compilerOptions.paths must not be set (aliased imports are not supported)

[thorlucas]

Here's my setup:

// tsconfig.json
{
    "extends": "./tsconfig.paths.json",
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": [
        "src"
    ]
}

Then, I created a tsconfig.paths.json:

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

Finally, my craco config:

// craco.config.js
module.exports = {
    style: {
        postcss: {
            plugins: [
                {
                    plugin: require('craco-alias'),
                    source: "tsconfig",
                    baseUrl: "./src",
                    tsConfigPath: "./tsconfig.paths.json",
                    debug: true,
                },
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

And yet:

-> yarn build
yarn run v1.22.10
$ craco build
The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

Creating an optimized production build...
Failed to compile.

./src/index.tsx
Cannot find module: '@components/App'. Make sure this package is installed.

You can install this package by running: yarn add @components/App.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Why?

[biggyspender]

I'm not seeing this, but IIRC, it did give me trouble. I suspect that if you add trailing slashes to the baseUrl in one/both of tsconfig.json/craco.config.js, you'll be back in business.

[biggyspender]

And to suppress the STERR output related to this (in Bash):

yarn build --no-colors \
    2> >(grep -v -e "The following changes are being made to your tsconfig.json file:" -e "- compilerOptions.paths must not be set (aliased imports are not supported)")

[beingtyson]

you should change like this

[nessor]

Same problem here. I see that the suggested solution from @beingtyson more like a hot fix. I don't want to separate my tsconfig just for a plugin. I really think this is an unexpected behavior / a bug.

Edit: The suggested fix does not seem to work either.

The problem is coming from CRA: See this issue: https://github.com/facebook/create-react-app/issues/8909

[AsebWebDev]

The workaround by @beingtyson works for me to use the defined aliases, but I still got the same error:

Nevertheless this workaround works better for me than ejecting CRA.

[xcfox]

This is because tsconfig.json does not conform to the validation rules of react-scripts. Until react-scripts changes the validation rules, this is my solution:

1. Create tools/fix-alias.js as follows:

   
   /* eslint-disable */
   const path = require('path')
   const fs = require('fs')

rewrite('node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js', c => c.replace("paths: { value:", "// paths: { value:") )

function rewrite(path0, fn) { const path1 = path.resolve(__dirname, '../', path0) const contentBefore = fs.readFileSync(path1).toString() const content = fn(contentBefore) fs.writeFileSync(path1, content) }

2. Execute ``tools/fix-alias.js``
```shell
node tools/fix-alias.js

3. Auto execute tools/fix-alias.js for each installation, edit package.json as follows:

   {
   ...
   "scripts": {
   ...
   "postinstall": "node tools/fix-alias"
   },
   ...
   }

[renesansz]

@xcfox awesome! this solves my issue with the warning. thanks

[julix-unity]

c => c.replace("paths: { value:", "// paths: { value:")

am I missing something or would that just break the line?

In node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

[xcfox]

@julix-unity To disable the warning, Replace line 159 to a comment