Help with Typescript Dev Environment Importing Redwood Absolute Imports

Get Help and Help Others
1

Hello, I’m quite new to the Redwood (and web development) community coming from a background with native apps.

I’ve started work on a new project with a team of engineers where they’re using RedwoodJS with Typescript as the tech stack. I’ve installed the same versions of node and typescript as the other engineers on the team, but I’m having an issue with Typescript compiling .ts and .tsx files that import any of the Redwood Absolute Paths. i.e. src/components/Article where it complains that it Cannot find module. Using relative paths doesn’t seem to be an issue with my Typescript setup.

I was able to reproduce the problem in the Redwood Tutorial App by following these steps:

  • Followed the steps in the tutorial README
    • git clone https://github.com/redwoodjs/redwood-tutorial
    • yarn install
    • yarn rw prisma migrate dev
    • yarn rw prisma db seed
  • Converted the project to Typescript using the Redwood command
    • yarn rw setup tsconfig (This sets up the tsconfig.json files within web/ and api/ directories)
  • Converted the file extension for a file with an Absolute Import to typescript.
    • web/src/components/ArticleCell/ArticleCell.js → web/src/components/ArticleCell/ArticleCell.tsx
  • From the root directory, run npx tsc -p web/tsconfig.json (assuming file extension change was made under the web/ directory)

Doing the above results in the following output for me:

web/src/components/ArticleCell/ArticleCell.tsx:1:21 - error TS2307: Cannot find module 'src/components/Article' or its corresponding type declarations.

1 import Article from 'src/components/Article'
                      ~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error in web/src/components/ArticleCell/ArticleCell.tsx:1

No one else on my team seems to have the same issue. Any help would be greatly appreciated!

2

Hey @JWShroyer, could you try yarn rw g types as a last step? Those directory-named imports needs the .redwood folder to be generated, which contains TS mirror types. I could reproduce everything you mentioned, and then when I generated types (or started the dev server), the error went away.

1 Like
3

Ah, jeez. That was exactly my problem. I see now that the final step in the tutorial README is to run yarn rw dev which would’ve also generated the .redwood/ folder :man_facepalming:.

Thanks for the quick reply!