React-scripts v4.0.0 incompatibility with paths

[felipepsq]

After upgrading my react-scripts to v4.0.0, React to 17.0.1, and leaving react-app-rewired at v2.1.6, I get this.

appTsConfig.compilerOptions[option] = value;

TypeError: Cannot add property paths, object is not extensible at verifyTypeScriptSetup (/root/project/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43) at Object.<anonymous> (/root/project/node_modules/react-scripts/scripts/start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1015:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10) at Module.load (internal/modules/cjs/loader.js:879:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Module.require (internal/modules/cjs/loader.js:903:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/root/project/node_modules/react-app-rewired/scripts/start.js:35:1) at Module._compile (internal/modules/cjs/loader.js:1015:30) error Command failed with exit code 1.

I already set noFallthroughCasesInSwitch to true and jsx: "react".

According to this issue, paths property still not allowed.

Any solution with react app rewired?

[danielkcz]

The aliased paths were never supported in CRA, but worked perfectly with react-app-rewire-alias for me. I really don't follow why they decided to make it even more painful in 4.x by banning that property completely.

[felipepsq]

Yes, aliased paths were never supported, but I use customize-cra and worked for me too.
I spent my whole afternoon trying to deal with react-script 4 and paths, but no success. I really want to know why they are making it ever harder.

[Menci]

Use patch-package: facebook/create-react-app#9429 (comment)

[danielkcz]

@Menci That's a very fragile solution relying on scripts to run in the correct moment, especially with CI builds it's tricky.

[Menci]

It's THE ONLY WAY.

…

On Fri, Nov 6, 2020 at 16:30 Daniel K. ***@***.***> wrote: @Menci <https://github.com/Menci> That's a very fragile solution relying on scripts to run in the correct moment, especially with CI builds it's tricky. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#500 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACWRBA7JORGDE24SRJKHGNDSOOXZPANCNFSM4S7224YA> .

[danielkcz]

Well, I would argue that the "only way" is to annoy React team until they fix it 😆

[henryruhs]

I don't know what you guys think but for me this is the time to eject and get rid of react-scripts...

[danielkcz]

@redaxmedia I am thinking similar, but redirecting my attention to NextJS, which doesn't impose such weird limitations. They even support aliased paths out of the box. It's fairly well crafted from what am I seeing so far. Maybe even better than CRA. The only bad thing is the need for a server, but that's manageable.

[henryruhs]

@FredyC Well, that would be overkill for someone that just like to replace the underlaying webpack scripting.

I found that someone opened an pull request to allow paths: facebook/create-react-app#10014

[danielkcz]

Well, that would be overkill for someone that just like to replace the underlaying webpack scripting.

Why would you think so? It's still React, just different, less strict, tooling. I am pretty much sure, that you could just take your CRA code base and start it with Next. SSR and other advanced things are not mandatory. But that's surely offtopic here, just saying :)

[sheepsteak]

I have a PR to add paths support to CRA. I have no idea if/when this will be in a release though - facebook/create-react-app#10014

[henryruhs]

@sheepsteak Fix the pipeline ... there are things like jest/no-conditional-expect not being allowed.

[sheepsteak]

@redaxmedia All the PRs on that repo are failing, unfortunately. They said they're working on it.