Closed macnibblet closed 7 years ago
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.
Hmm, my bad i had files with .ts
and not .tsx
, so progress :)
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
@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
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
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 :)
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
@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 ?
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
@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?
@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 :)
@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?
@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:
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 :)
@piotrwitek Thanks. It is really kind of you. Will let you know if I fixed it.
@goldenyz I'm glad I could help, I also appreciate your efforts to fix the issue for other environments :)
@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.
@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.
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