unable to import react-scrollbar-js with Webpack

[pablobarria]

Hi,

I was going to try out this component but I was unable to use it, as Webpack won't import it (throws an error).

ERROR in ./~/react-scrollbar-js/src/js/components/react-scrollbar.js
Module parse failed: C:\Users\differentsmoke\Dropbox\Sensentia\06_documentation\SensentiaCustomerSupport\node_modules\react-scrollbar-js\src\js\components\react-scrollbar.j
s Unexpected token (32:6)

The JSX in react-scrollbar.js looks odd to me, but I can't tell at a glance if there's any mistakes. In any case, I thought I should report.

Cheers, P.

[BosNaufal]

Hi @pablobarria, Thank you for giving me an issue, but I'm not sure where the error syntax is. :confused:

Did you install it with NPM or Download Via github?

[pablobarria]

NPM. On a Windows machine, using Node 6.x

[pablobarria]

Hi. I think I know what the problem is. I am no expert in building NPM packages, so I might be wrong:

Your entry point is a JSX file in the src directory. My Webpack configuration ignores the node_modules directory for the babel loader, so it breaks when trying to import it. It should be pointing to build/build,js

However, right now that file is an unresolved git merge conflict. So you should fix that as well.

As I said, I am no expert, so I might be wrong, but this is what I think is the problem.

Cheers, P.

[BosNaufal]

@pablobarria I think, it shouldn't has any problem. Cause if we pointing the main file to the build.js, it will import all "Demo Page Js" File. While you just need the react-scrollbar.js only.

[durandal79]

im converting an existing project from requirejs to webpack and get this bug as well. did you find a solution that worked for you @pablobarria ?

[BosNaufal]

Hi @durandal79, Okey, I'm getting confused now :confused: Why it can be happened?

[durandal79]

i think the problem is that babel ignores packages in node_modules folder. So the jsx code in the scrollbar files isnt transpiled. I think you need to build it to ES5 if its going to be published in an npm module.

[lc00]

Hi @BosNaufal, so I’ve created this repo (https://github.com/lc00/react-scrollbar-webpack-error) based on create-react-app repo (so that hopefully you understand the issue) and when I imported the react-scrollbar library in src/App.js, it’s got the same error

Error in ./~/react-scrollbar-js/src/js/components/react-scrollbar.js Module parse failed: /Users/summerbreez/sandbox/my-app/node_modules/react-scrollbar-js/src/js/components/react-scrollbar.js Unexpected token (32:6) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (32:6) @ ./src/App.js 20:24-53

[sshmyg]

Hi, it's bug occurs, because you import sass within js module. "You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (32:6)"

[BosNaufal]

Hi @serheyShmyg, You're right, but how should publish a package with a style? :confused:

[usulpro]

Hi! would you like to start using the React-Storybook as a base for this repo? As a benefits:

• cool demo pages
• transpilling to ES5 before publishing to NPM
• publishing via one line

we could separate srs/dist/example app and pulish to npm only pure dist

I am willing to help to put it all on the storybook rails if you want! :)

[sshmyg]

@BosNaufal don't import sass into js modules, because a lot of developers separate style and js files. Just mention in docs, that style is required or add inline style to every tag in your component (it's very popular nowadays, like jss or something).

[usulpro]

@serheyShmyg

add inline style to every tag in your component

the main idea of this repo is

it's TOTALLY CUSTOMIZABLE

and that's great :) that's why it's better not to use inline style in this case.

my offer is to have pure CSS (the default one) and ES5 in npm package wich could be overwritten by developers. At the same time in source it's still possible to have any kind of CSS, we just need to transpille it before publishing

@lc00 to use it in the currient version you need to install sass-loader and node-sass. It looks that @BosNaufal has installed them gobaly - that's why he dont need them in dependencies

[BosNaufal]

Hey @serheyShmyg @UsulPro, So Better have a separate style file? How can I publish a main style in NPM package, so the developer is easy to import it? :confused:

[usulpro]

there are plenty to choose from https://github.com/MicheleBertoli/css-in-js 😄

[dmbaranov]

Are you going to fix it? Because i have the same problem.

[BosNaufal]

Hey Guys~ cc: @theWaR13 @UsulPro @serheyShmyg @pablobarria @durandal79 @lc00

For this issue, you can check my last update https://github.com/BosNaufal/react-scrollbar/commit/98d35117f24290d04004de5675f168e330c81a68 and please close this issue after that.

Just tell me if there's something wrong~

[usulpro]

Hey @BosNaufal ! I checked this repo and it still has issues.

I was trying to import it as npm package and import ReactScrollbar from 'react-scrollbar-js'; and I had an error: Uncaught SyntaxError: Unexpected token import Then I was trying to git clone this repo and npm run dev - I had a bunch of errors ERROR in Cannot find module 'babel-core'

The first is because you publish to npm a non-transpilled version of source code. It could be easily fixed by adding a babel prepublish scripts to package.json. For the last error adding 'babel-core` to devDependencies will be enough I hope. I've noticed some minor issues in the package as well.

So my suggestions are:

1. Transpile src by Babel to ES5 before publishing to npm

2. Publish to npm only dist folder (since we don't need to have an example project and images in the package)

3. Remove the example project code from src folder to example folder. It's in oder to separate it from src.

4. Remove react from dependencies to peerDependencies

Then we could check how it works with default css when importing as npm package.

I would like to help with it. Would you mind if I make a PR with this fixes?

[BosNaufal]

Hey @UsulPro, It will be great if I get help from the expert~ :grin: :+1: You can make a PR for this issue...

[usulpro]

Ok, it's done! :sunglasses: It takes a bit more time and more code changings than I expected first, but finally we have:

• Pure ES5 javascript code in NPM package. It's bundled by webpack into one JS file including default css. Importing it from NPM you'll have only this bundle, nothing bloats your project dependencies. (Docs, examples, dev-app is still available in Github repo of course)

So you don't need to care about appropriate css loaders, babel settings and so on. The only peerDependesies is React.

• Since default css is bundled into the package we need the way to override it if it's necessary. It's simple - just require new css in your app. (exactly like you did it before, but now you can do it only if it's necessary)

• In oder to get access to any scrollbar element I reorder a classnames. Now any element has own unic classname and each state of this element has own modifier. See readme for details. But default appearance is the same as it was before!

• Added some functionality for ScrollTo functions. Now it's possible to set value in %% and set negative values to scroll from bottom.

• Added two example projects which shows all features of this project

• Added ESLint in oder to keep the code clean and comfortable for contributing

• I added some sections to readme describing this changes

@BosNaufal, could you take this PR and publish it to NPM? After that we can start to use it! You can test it before by npm start and via example projects (see in readme).

For publishing you just need to npm publish. You can find all details in Contribution section of readme.