Depreciation of this Package

[strothj]

Hello,

Thank you everyone for your support and interest in this package.

I will be adding a depreciated banner to this repository as soon as the pull request below is released. Let me know if you have any questions or concerns.

Create React App adds TypeScript Support

There is a pending pull request to add TypeScript support (through the Babel preset) to Create React App which you can view here:
facebook/create-react-app#4837. I was able to swap out this rewire for a build of Create React App with TypeScript support.

The first post has instructions on how to try the new build out. For testing purposes, it was recommended to build the branch and use Yarn's link feature.

It looks like it is very close to release. It may be worth waiting for the official release.

If you're interesting in adding the build to your project without linking, you can try the following (Yarn instructions):

• Build the Create React App project per the instructions of the first post in the pull request
• Copy the packages babel-preset-react-app and react-scripts to a folder in your workspace:

/vendor/react-scripts
/vendor/babel-preset-react-app

• Add a resolutions override to package.json:

"resolutions": {
  "react-scripts/babel-preset-react-app": "file:./vendor/babel-preset-react-app"
}

• Add the vendored dependencies to package.json:

"dependencies": {
  "babel-preset-react-app": "file:./vendor/babel-preset-react-app",
  "react-scripts": "file:./vendor/react-scripts"
}

Create React App v2 Release Notes

You can view the blog post here: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

Migration instructions from alpha:
https://gist.github.com/gaearon/8650d1c70e436e5eff01f396dffc4114

Monorepo support (from 2.x alphas) was removed in final 2.0

The decision to drop monorepo support is detailed here: https://gist.github.com/gaearon/8650d1c70e436e5eff01f396dffc4114#monorepo-support-from-2x-alphas-was-removed-in-final-20

Files from before monorepo support removal

webpack.config.dev.js
https://github.com/facebook/create-react-app/blob/22353ecf02db21f7bff6a0c088ef7f0631f29fd6/packages/react-scripts/config/webpack.config.dev.js#L219

paths.js
https://github.com/facebook/create-react-app/blob/22353ecf02db21f7bff6a0c088ef7f0631f29fd6/packages/react-scripts/config/paths.js

workspaceUtils.js
https://github.com/facebook/create-react-app/blob/22353ecf02db21f7bff6a0c088ef7f0631f29fd6/packages/react-dev-utils/workspaceUtils.js

[seniorquico]

Thanks for maintaining this project and helping us get converted to CRA+TypeScript! It's great news that a broader community is interested in this support existing in CRA. Hope to see you around the net in the future!

[feimosi]

Has anyone managed to migrate to the new CRA with Typescript support (v2.1+) ?

Removing the rewrite causes hundreds of errors in my project, as if the tsconfig was ignored by CRA e.g.:

Type error: Ambient const enums are not allowed when the
'--isolatedModules' flag is provided.

If I try to still use the rewrite with the newest version if fails too:

/home/feimosi/Projects/saycaster-podcatcher/frontend/node_modules/
react-app-rewire-typescript-babel-preset/dist/rewireWebpack.js:22 
        throw new Error("Unable to locate scripts loader.");

Any suggestions?

[strothj]

Can you try the skipLibCheck tsconfig setting?

[feimosi]

I've tried but turns out react-scripts overrides tsconfig with their settings on every run. That explains all the errors I was getting (baseUrl was being removed). Not sure if I've missed something but the documentation doesn't mention anything.

[josephj]

@feimosi

After I upgraded the react-scripts to 2.1.1, it made some changes automatically. My project is working good after upgrading.

You can check both my tsconfig.json and the pull request.

Hope it could help to solve your issue.

[seniorquico]

We also migrated successfully. We're currently using react-scripts@2.1.1 with the following tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "Preserve",
    "lib": ["DOM", "DOM.Iterable", "ES2018"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "pretty": true,
    "resolveJsonModule": true,
    "skipLibCheck": false,
    "strict": true,
    "target": "ES5"
  }
}

[feimosi]

I can't get it working because CRA forces certain tsconfig values i.e. isolatedModules is true and skipLibCheck is false. I can't change it in any way, that's ridiculous. Therefore it breaks on range-parser.d.ts Ambient const enums error.

Also, @josephj @seniorquico do you have local absolute imports working with your configs? I don't see baseUrl there.

[seniorquico]

@feimosi isolatedModules is recommended (required?) when transpiling TypeScript with Babel due to Babel's single-file emit architecture:

https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

We do not use absolute imports. There are some CRA discussion threads on this topic:

facebook/create-react-app#5692
facebook/create-react-app#5118

[feimosi]

@seniorquico that's interesting about isolatedModules, although, how come my project compiles with react-app-rewire-typescript-babel-preset and it doesn't with CRA (Ambient const enums error) 🤔

Anyway, thanks for the links!

[seniorquico]

@feimosi I'm sorry, I have no idea! 🤷‍♂️ I haven't encountered that error. 😞