How to tell `import` to always read files from the `src/` directory for a reactjs project-CodePudding

I inherited a react project that was working on my last computer. But now it can't build on my new computer. Specifically, I forgot how to get the npm start command to know where the project directory is.

For example, let's say I have the following two files:

// src/template/Page.js
import LoginComponent from 'component/Login.js'

// src/component/Login.js
export default function Gallery() { return <div></div>;}

Then when I run npm start, I get the error:

Module not found: Can't resolve 'component/Login.js' in 'src/template/Page.js'

I vaguely remember that on my last computer, I used some hidden file, or possibly the .env file to tell npm to look for all react components under the src/ directory, such that the term src/ can be omitted from all the import statements in the code.

Does anyone know how to tell react or npm to always import components without always spelling out the src/ prefix?

NOTE: I also see a .vscode directory with these files:

// .vscode/settings.json
{
  "editor.snippetSuggestions": "top",
  "files.associations": {
    "*.js": "javascriptreact"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": false
  },
  "compilerOptions": {
    "baseUrl": "src"
  }
}

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src"
        }
    ]
}

I think these files might be related to my solution last time I got this working

In my package.json, I see these lines:

...
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}
...

Also, my package.json says I'm using "react": "^16.6.1" and my npm -v shows 5.5.1. I don't remember what npm version I was using on my last computer. So not sure if that would matter.

CodePudding user response：

You need a jsconfig.json to configure absolute imports (if you were using TypeScript, you would instead use tsconfig.json). This file is vital to your project working correctly, so you should commit this to source control so you don't have to remake it on each machine:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

I did not know Create React App supported this, I learned something today from your question. Thanks!

CodePudding user response：

Finally got it work. I added this line to my .env file:

NODE_PATH=src

And then everything worked. Taken from documentation here: https://nodejs.org/api/modules.html

If the NODE_PATH environment variable is set to a colon-delimited list of absolute paths, then Node.js will search those paths for modules if they are not found elsewhere.

On Windows, NODE_PATH is delimited by semicolons (;) instead of colons.

NODE_PATH was originally created to support loading modules from varying paths before the current module resolution algorithm was defined.

NODE_PATH is still supported, but is less necessary now that the Node.js ecosystem has settled on a convention for locating dependent modules. Sometimes deployments that rely on NODE_PATH show surprising behavior when people are unaware that NODE_PATH must be set. Sometimes a module's dependencies change, causing a different version (or even a different module) to be loaded as the NODE_PATH is searched.

Additionally, Node.js will search in the following list of GLOBAL_FOLDERS:
1: $HOME/.node_modules
2: $HOME/.node_libraries
3: $PREFIX/lib/node
Where $HOME is the user's home directory, and $PREFIX is the Node.js configured node_prefix.

These are mostly for historic reasons.

It is strongly encouraged to place dependencies in the local node_modules folder. These will be loaded faster, and more reliably.