I am trying to follow some best practices listed here. I specifically want to make sure I have absolute imports going on. I am fairly new to Node and Typescript and so I expect to be moving files around frequently as I go.

I therefore configured my tsconfig.json file with the suggested

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

Sounds like what it is doing is very basic. Just replacing "@/*" with a absolute source path file relative to the top level. This way the import does not change based on where the file importing something sits.

Somehow my VS code seems to understand this. I am not sure how but there is this system in vscode that works in such a way that if I mistype an import I get an error like this

But if I type it correctly I get no error

I have my files set up like this

However when I run npm start it is as though the thing running in terminal is running a different thing that is running in VSCode because the replacement doesnt seem to work. I get an error:

TS2307: Cannot find module '@/components/WebsiteTitles' or its corresponding type declarations.

Or

ERROR in ./src/App.tsx 6:0-54
Module not found: Error: Can't resolve '@/components/WebsiteTitles' in '/Users/main/Coding/portfolio-website/src'

My localhost is a mac if that helps.

I am trying to follow some best practices listed here. I specifically want to make sure I have absolute imports going on. I am fairly new to Node and Typescript and so I expect to be moving files around frequently as I go.

I therefore configured my tsconfig.json file with the suggested

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

Sounds like what it is doing is very basic. Just replacing "@/*" with a absolute source path file relative to the top level. This way the import does not change based on where the file importing something sits.

Somehow my VS code seems to understand this. I am not sure how but there is this system in vscode that works in such a way that if I mistype an import I get an error like this

But if I type it correctly I get no error

I have my files set up like this

However when I run npm start it is as though the thing running in terminal is running a different thing that is running in VSCode because the replacement doesnt seem to work. I get an error:

TS2307: Cannot find module '@/components/WebsiteTitles' or its corresponding type declarations.

Or

ERROR in ./src/App.tsx 6:0-54
Module not found: Error: Can't resolve '@/components/WebsiteTitles' in '/Users/main/Coding/portfolio-website/src'

My localhost is a mac if that helps.

• node.js
• typescript

1 Answer 1

Based on your description, I think you used CRA (Create React App) to set up your project.

CRA doesn't provide an easy way to override path imports because it hides the Webpack configuration. However, you can still achieve this by using CRACO

I recommend checking the website, installing it, and updating the script section in package.json.

Then in the root of your project, create a craco.config.js file and add the following configuration to set up the alias:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
};

After doing this, you should be able to use the @ alias for imports in your React project. However, personally, I recommend using Vite for setting up your project. They use it too :)