Framework Upgrade: Module not found


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

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:

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?


Phuoc Do

Should the filename be the same is the directory name?

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

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.

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

1 Like

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'