search

wub / preact-cli-plugin-typescript

Adds TypeScript support to preact-cli :zap:
MIT License
49 stars 6 forks source link

Fix 'preact build' failures with *.tsx files #7

Closed DLehenbauer closed 6 years ago

DLehenbauer commented 6 years ago

Fix the module errors in #2 and #3 by defaulting tsconfig.json to emit 'ES5'. Fix the original issue w/CSS Modules in #4 by including 'typings-for-css-modules-loader'.

DLehenbauer commented 6 years ago

Example preact-cli template using *.tsx files:

preact create DLehenbauer/preact-template-typescript test
cd test
preact build

Without 'typings-for-css-modules-loader', you'll be unable to import styles as a CSS Module:

ERROR [at-loader] ./src/components/header/index.tsx:3:24
    TS2307: Cannot find module './style.css'.

Without the tsconfig.json changes, UglifyJS will report an unrecognized token:

ERROR bundle.26772.js from UglifyJs
Unexpected token: name (header_Header) [./components/header/index.tsx:8,14][bundle.26772.js:482,6]
JNaftali commented 6 years ago

Would switching from webpack.optimize.UglifyJsPlugin (which I believe is https://github.com/webpack-contrib/uglifyjs-webpack-plugin v0.4.6) to installing the loader separately (which has passed v1.0.0) fix these problems as well without transpiling things unnecessarily?

DLehenbauer commented 6 years ago

No, the problem w/.tsx files is that the TypeScript doesn't know what you're trying to do when you ask it to import a .css file.

The 'typings-for-css-modules-loader' generates a *.d.ts typescript declaration file that declares each CSS style as a string so you can refer to them in TSX like <div class={style.home} />.

(This happens earlier in the pipeline, before UglifyJS run on the JS files emitted by TypeScript.)

DLehenbauer commented 6 years ago

Sorry, it had been long enough that I forgot there were two problems addressed in this PR...

If you swap in the latest 'uglifyjs-webpack-plugin', you can avoid downgrading TypeScript from emitting ES6 -> ES5 in the tsconfig.json. (Babel will transpile to ES5 for you later in the webpack pipeline.)

I recently did this in a project where TypeScript was unable to lower something I had done to ES5.

wub commented 6 years ago

Thanks @DLehenbauer, sorry I took so long to get to this.

andrewiggins commented 6 years ago

@wub Thanks for following up with this. Looking forward to the next release!