create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

Support TypeScript module resolution `node16`

Open demurgos opened this issue 1 year ago • 0 comments

Describe the bug

Setting moduleResolution to node16 in tsconfig.json is not supported.

(Write your answer here.)

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

N/A

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /home/demurgos/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 5.18 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 18.7.0 - /usr/bin/node
    Yarn: 3.2.2 - /usr/bin/yarn
    npm: 8.15.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 103.0
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

  1. Initialize a project
  2. Set moduleResolution to node16 in the TypeScript compiler options
  3. Run the build script

Expected behavior

The project compiles

Actual behavior

  • node16 requires explicit .js extensions.
  • when using .js extensions, webpack does not find the target file

Reproducible demo

N/A

How to fix this

Webpack 5.74.0 added support for extension aliases. It allows to write .js in the imports and resolve the .ts file.

The webpack config should update its resolve field:

{
  resolve: {
    extensionAlias: {
      ".js": [".ts", ".js"],
      ".cjs": [".cts", ".cjs"],
      ".mjs": [".mts", ".mjs"],
    }
    // ...
  }
  // ...
}

demurgos avatar Aug 01 '22 10:08 demurgos