How do you handle typings/tsd?

[piotrwitek]

I use only @types repository from npm, which is a proper way recommended by TypeScript to handle managing types in your application. Remember to use --dev flag when installing, this is especially important for node applications/modules, less important for web apps.

e.g. npm i -D @types/react

This pattern even support using specific version of typings for a library you are using:

e.g. npm i -D @types/react@0.14.X

[macnibblet]

I see i'm migrating our website from a rather obsolete build system to using this one instead, which shows great promise. But I'm currently running into a bunch of problems.

yarn run start works fine but i'm getting a lot of 404 on the localhost:8888 but yarn run tsc works just fine ? Any suggestions on how to debug that.

[macnibblet]

Hmm, my bad i had files with .ts and not .tsx, so progress :)

[macnibblet]

I'm having a slight issue with the dependency react-perfectscrollbar

http://localhost:8888/jspm_packages/npm/react-perfect-scrollbar@0.1.1/lib/scrollbar.scss.js
    Error: XHR error (404 Not Found) loading http://localhost:8888/jspm_packages/npm/react-perfect-scrollbar@0.1.1/lib/scrollbar.scss.js
    Error loading http://localhost:8888/jspm_packages/npm/react-perfect-scrollbar@0.1.1/lib/scrollbar.scss.js
    Error loading http://localhost:8888/!http://localhost:8888/!http://localhost:8888/jspm_pa…8888/jspm_packages/npm/react-perfect-scrollbar@0.1.1/lib/scrollbar.scss.js as "!!./../node_modules/css-loader/index.js!./../node_modules/postcss-loader/index.js!./../node_modules/sass-loader/index.js!./scrollbar.scss" from http://localhost:8888/jspm_packages/npm/react-perfect-scrollbar@0.1.1/lib/react-perfect-scrollbar.js

[piotrwitek]

@macnibblet there is a problem with the library you are using, I have already filed an issue: https://github.com/goldenyz/react-perfect-scrollbar/issues/1

the solution is to change the main entry point of library to min version rather than normal as it is referencing some webpack internal loading features. I have created a branch with working solution for you: https://github.com/piotrwitek/react-redux-typescript-starter-kit/tree/react-perfect-scrollbar-demo

[macnibblet]

Awesome thanks :D next question how do i import our styles ? We have written them in basic scss and the readme says it supports it but I cannot figure how to import them

[piotrwitek]

No problem :) For styles use SCSS jspm loader like https://github.com/mobilexag/plugin-sass Just follow their examples.

I can recommend also http://typestyle.io/ for TS projects but it is a different takeover on styling and need an open mind in a team :)

[piotrwitek]

Ah I forgot to post react-perfect-scrollbar fix: find a file /react-redux-typescript-starter-kit/jspm_packages/npm/react-perfect-scrollbar@0.1.1.json and change: "main": "lib/react-perfect-scrollbar.min.js", Now it should work

[macnibblet]

@piotrwitek Awesome, but alas I have another question. Almost successfully replaced the old build system with the new one. But when I reload the page now with a none "index" route e.g /portal i get a 404 ?

[piotrwitek]

you need history api fallback for this to work on currently used dev server (jspm-hmr) you can hook up your own dev server using express or you have to use browser history (I mean hashHistory) instead as in demo it will work when I merge this: https://github.com/piotrwitek/jspm-hmr/issues/3 I didn't have time for this yet

[goldenyz]

@macnibblet The issue goldenyz/react-perfect-scrollbar#1 has been fixed in the last commit. But I still have a question: why can't I reference the non-minified version, just like the other libs doing (https://github.com/reactjs/react-redux)? @piotrwitek Could you provide more details?

[piotrwitek]

@goldenyz First thanks for the fix! :) You can reference non-minified version, it was not the reason :) The reason was that your non-minified bundle was not properly built and was referencing some dev stuff failing in non-webpack environments :)

[goldenyz]

@piotrwitek Thanks for the information. I will try to make it reference to the non-minified version again. Do you know how to verify that my fix is correct?

[piotrwitek]

@goldenyz you can use the branch I have created for @macnibblet to verify against ES Modules powered bundlers like JSPM/rollup, (necessary code example is already implemented there).

just do:

• clone https://github.com/piotrwitek/react-redux-typescript-starter-kit/tree/react-perfect-scrollbar-demo
• then installation steps from readme

now reinstall react-perfect-scrollbar to new version with: jspm uninstall react-perfect-scrollbar jspm install npm:react-perfect-scrollbar (NOTE: 'npm:' prefix)

run npm start and load a demo page in browser to verify if it's working correctly :)

[goldenyz]

@piotrwitek Thanks. It is really kind of you. Will let you know if I fixed it.

[piotrwitek]

@goldenyz I'm glad I could help, I also appreciate your efforts to fix the issue for other environments :)

[goldenyz]

@piotrwitek FYI. It has been fixed in the newest version, which still reference to the non-minified version in main. Thanks again for raising this issue.

[piotrwitek]

@goldenyz cool! I have updated branch demo to a new version and tested. Now it's working without problems, great job! I'll close this issue as it have been fully covered.