Framework Upgrade: Module not found

dnprock · October 19, 2020, 10:42pm

Hello,

I’m upgrading my Vida app from 0.16 to 0.19. I’m hitting an error with import.

./src/pages/CreateDashboardPage/CreateDashboard.tsx
Module not found: Error: Can't resolve '../../components/DashboardComponent' in '/Users/phuocdo/Workspace/redwoodjs/vida/web/src/pages/CreateDashboardPage'

The issue seems to be related to JavaScript and TypeScript. The CreateDashboardPage component is JavaScript and DashboardComponent is TypeScript. The code is here:

github.com

vidalab/vida/blob/upgrade-0.19/web/src/pages/CreateDashboardPage/CreateDashboard.tsx#L4

    
      
          import { Component, MouseEvent } from "react"
          import { Submit } from '@redwoodjs/web'
          import DashboardsLayout from 'src/layouts/DashboardsLayout'
          import DashboardComponent from 'src/components/DashboardComponent'
          import MonacoEditor from 'react-monaco-editor'
          import vizJson from './viz.json'
          
          
interface CreateDashboardProps {
            vizData: object
          }
          
          
interface CreateDashboardState {
            vizData: object
          }

I notice that there’s an import of DashboardsLayout. This is import throws no error because DashboardsLayout is in JavaScript.

Has anyone faced this issue? Should I start migrate Page objects into TypeScript?

Thanks,

Phuoc Do

dthyresson · October 19, 2020, 11:34pm

Should the filename be the same is the directory name?

You have dropped the “Page” from the .tsx file.

dnprock · October 19, 2020, 11:43pm

The page is CreateDashboardPage.js. It references CreateDashboard.tsx. The Router references CreateDashboardPage. I have to organize the code this way because the Router cannot include TypeScript code. This is a way of reducing the amount of JavaScript.

Tobbe · October 20, 2020, 8:05am

There has been a PR or two about imports and ts

So maybe, if you want to, you could try upgrading to latest canary and see if that works. Or (safer option) you’ll wait until 0.20.0 is out and give that a try

danny · October 20, 2020, 5:38pm

Hey @dnprock, yep things went wrong in .19 Babel loaders.

Definitely try the new version, but if you’d rather stick to 19, there are three options:

a) Change the imports line to explicitly import from the full path, like this:

import AddTodo from '../../components/AddTodo/AddTodo'

b) If its possible, change your tsx imports to jsx (obviously not a viable solution for everyone).

c) Unverified by me, but another option is to try importing like this:

import AddTodo from 'src/components/AddTodo/AddTodo'

instead of

import AddTodo from 'src/components/AddTodo'