react-scripts 4.0.1 absolute components import doesn't work

[SergeyP2H]

Describe the bug

Absolute components import doesn't work in 4.0.1 CRA version.

For example:

import React, { useState } from 'react';
import Todo from 'components/Todo';

I get this error `Module not found: Can't resolve 'components/Todo' in '.../cra-project/src'

Folder components is nested to src folder.

The file .env was added in the project root.
.env file content

NODE_PATH=src/

When I change react-scripts version from 4.0.1 to 3.4.4 absolute imports work fine.

Did you try recovering your dependencies?

Yes.

Environment

Environment Info:

current version of create-react-app: 4.0.1
running from /home/sergey-sedykh/.npm/_npx/12865/lib/node_modules/create-react-app

System:
OS: Linux 5.4 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-3330 CPU @ 3.00GHz
Binaries:
Node: 14.6.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Browsers:
Chrome: 85.0.4183.121
Firefox: 83.0
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.1 => 4.0.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Install project with CRA
2. Create the file .env in the project root.
3. Add to the .env file next content NODE_PATH=src/
4. Use absolute components import

Expected behavior

Absolute module imports should work.

[spencersteers]

NODE_PATH was dropped in 4.0.0: https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#removed-typescript-flag-and-node_path-support

[Toub]

Replace NODE_PATH=./ in your .env file by the following in tsconfig.json

  "compilerOptions": {
    "baseUrl": "./"
  }

This could be more explicit in the changelog.

[ValeryVS]

I used "baseUrl": "src" with react-scripts@3 but now there is

Parsing error: Cannot read file '.../tsconfig.json'

[ValeryVS]

"baseUrl": "./" works, but I don't want to write src also. #10410
Do you know any workaround here, perhaps? @Toub

[martin-nef]

Got it working. Try this in jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "checkJs": true,
    "jsx": "react-jsx"
  }
}

Found here:
https://stackoverflow.com/questions/60637561/auto-import-of-react-components-in-visual-studio-code#

[terrynguyen255]

None of those work for me in 2021 with create-react-app@4.0.3

[bbycroft]

From what I can tell, this is an issue with the react-scripts@4.0.3 version of fork-ts-checker-webpack-plugin (4.1.6). The plugin outputs

TypeScript error in C:/.../my-project/src/index.tsx(4,17):
Cannot find module 'src/subfolder/file' or its corresponding type declarations.  TS2307

when yarn run tsc and VS Code both show that typescript can successfully compile & typecheck the project.

Ejecting CRA and modifying webpack.config.js & versions demonstrates this:

1. Disabling ForkTsCheckerWebpackPlugin entirely results in a successful build (no type checking though!)
2. Forcing a version upgrade from 4.1.6 to 6.4.0 (via package.json resolutions: {}) seems to give the correct behaviour, where type checking is available and absolute paths work as expected.

The plugin upgrade requires modifications to webpack.config.js to work, so as far as I can tell, there is no workaround for non-ejected react-scripts to support typescript + absolute imports.

[killmenot]

Works for me with react-scripts@5.0.0 (ts, default configuration)