Depreciation of this Package

strothj commented 5 years ago

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: https://github.com/facebook/create-react-app/pull/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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Can you try the skipLibCheck tsconfig setting?

feimosi commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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:

https://github.com/facebook/create-react-app/issues/5692 https://github.com/facebook/create-react-app/issues/5118

feimosi commented 5 years ago

@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) :thinking:

Anyway, thanks for the links!

seniorquico commented 5 years ago

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

strothj / react-app-rewire-typescript-babel-preset