Something wrong with babel

[FDiskas]

Impossible to use https://www.npmjs.com/package/rheostat library
.babelrc

{
  "presets": ["env", "react-app"],
  "plugins": ["transform-class-properties"]
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Rheostat from 'rheostat';
 
ReactDOM.render((
  <Rheostat
    min={1}
    max={100}
    values={[1, 100]}
  />
), document.getElementById('slider-root'));

Probably related to #878
parcel: 1.6.2

[FDiskas]

What if problem is here?
https:/airbnb/rheostat/blob/72cc78a93da07e634c2a63a587dcda25017bc30a/package.json#L5

As a workaround ♦️

import Rheostat from 'rheostat/lib/Slider';

[davidnagli]

Does JSX work without rheostat?

Are you sure that you're using 1.6.2 and not some other version? (we saw something very similar in #963)

Also can you please provide the full error message... it got cropped out of your screenshot.

[FDiskas]

If I rename index.js to index.jsx works without rheostat library

npx parcel --version
1.6.2

[FDiskas]

🚨  /mnt/SSD/Projects/***/node_modules/rheostat/src/Slider.jsx:34:11: Unexpected token (34:11)
  32 | class Button extends React.Component {
  33 |   render() {
> 34 |     return <button {...this.props} type="button" />;
     |            ^
  35 |   }
  36 | }
  37 | 

[FDiskas]

I tried to

npm i -D babel-plugin-transform-react-jsx

then added to .babelrc that plugin - same error

[lucianoratamero]

I'm having the same problem, but with react-foundation:

node_modules/react-foundation/src/components/breadcrumbs.js:21:9: Unexpected token (21:9)
  19 |   const passProps = removeProps(props, objectKeys(Breadcrumbs.propTypes));
  20 | 
> 21 |   return <ul {...passProps} className={className}/>;
     |          ^
  22 | };
  23 | 
  24 | Breadcrumbs.propTypes = {

anyone?

[lucianoratamero]

I found out that the problem is related to parcel not using babel for node_modules.
changing to the es5 library did the job, @FDiskas .

[FDiskas]

Yes in this case parcel should respect modules package.json settings
ex.: https://unpkg.com/[email protected]/package.json

"main": "lib/index.js",
"jsnext:main": "src/index.js",

parcel should take file from "main" not from "jsnext:main" key 👝 if babel is not used
Same goes to https://unpkg.com/[email protected]/package.json
and all others

[lucianoratamero]

thanks, that clarifies it :]

[bencevans]

Seem to be having getting the same issue when running in a Docker based on the official Node v8 image. However works perfectly when run on the host system. Same version of Node.js and Parcel. O.o