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: react/create-react-app#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

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