Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot run create-react-app with typescript #46

Open
starsolaris opened this issue Jan 13, 2019 · 3 comments
Open

Cannot run create-react-app with typescript #46

starsolaris opened this issue Jan 13, 2019 · 3 comments

Comments

@starsolaris
Copy link

npx create-react-app example --typescript
cd ./example

create jetpack.config.js from doc

jetpack --verbose
jetpack › Jetpack 0.12.1 �
jetpack › Webpack 4.28.3
jetpack › Dir G:\source\example
jetpack › Entry .
jetpack › Asset server http://localhost:3030
jetpack › Failed to compile! Found 1 error:

  multi (webpack)-hot-middleware/client.js?path=/assets/__webpack_hmr&noInfo=true&reload=false .
  Module not found: Can't resolve '.' in 'G:\source\example'
@KidkArolis
Copy link
Owner

To use TypeScript with jetpack, you currently need a bit of extra config.

I had to do the following to get npx create-react-app example --typescript.

  1. Create jetpack.config.js:
module.exports = {
  entry: "./src",
  webpack (config) {
    config.resolve.extensions = ['.tsx', '.ts', '.js', '.json']
    config.module.rules[0].oneOf.push({
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
    })
  }
}
  1. Install ts-loader with npm i -D ts-loader
  2. Install React types with with npm i -D @types/react
  3. In tsconfig.json set "jsx": "react" and "noEmit": false

Not pretty, but I don't personally use TypeScript, so haven't spent the effort to make this nicer.

@KidkArolis
Copy link
Owner

I think CRA is not using ts-loader and that's why the tsconfig.json is a bit different there. If we did something more similar in jetpack to what CRA does with typescript, maybe in the general TS support would become simpler.

@starsolaris
Copy link
Author

Thanks for helping me.
Another thing: when create app with create-react-app (with typescript, without all ok) browser print next warnings to console:

Ignored an update to unaccepted module ./src/App.js -> ./src/index.js -> 0
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

When i made config changes from doc, HMR start working, but warning still appears.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants