SyntaxError with 3rd-party React component

[hbarcelos]

🐛 bug report

I am trying to use the 3box-comments-component in an application.

It fails with a SyntaxError after loading. I tried to reproduce the problem with webpack and create-react-app, but the integration works exactly as expected for those.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-class-properties"],
  "sourceMaps": "inline"
}

package.json:

{
  "name": "example-parcel",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "dependencies": {
    "3box-comments-react": "^3.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "web3": "1.2.6"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/plugin-syntax-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "parcel": "^1.12.4"
  }
}

.browserslistrc :

last 1 chrome version
last 1 firefox version
last 1 safari version

🤔 Expected Behavior

The application should load without errors.

😯 Current Behavior

After running parcel src/index.html and going to the page URL, I get the following error in the console:

> Reactions.jsx:17:17
> Uncaught SyntaxError: unexpected token: ':'
>     js src.78399e21.js:309542
>     __webpack_require__ src.78399e21.js:308114
>     <anonymous> index.js:1
>     <anonymous> index.js:4
>     js src.78399e21.js:309747
>     __webpack_require__ src.78399e21.js:308114
>     <anonymous> verifier.js:13
>     js src.78399e21.js:308239
>     __webpack_require__ src.78399e21.js:308114
>     <anonymous> api.js:17
>     js src.78399e21.js:308191
>     __webpack_require__ src.78399e21.js:308114
>     <anonymous> ProfileHover.jsx:21
>     jsx src.78399e21.js:311726
>     __webpack_require__ src.78399e21.js:308114
>     exports src.78399e21.js:308178
>     parcelRequire<["../../node_modules/profile-hover/dist/reactBundle.js"]< src.78399e21.js:308181
>     newRequire react-is.development.js:51
>     localRequire OrbitDB.js:34
>     parcelRequire<["../../node_modules/3box-comments-react/lib/components/Comment.js"]< src.78399e21.js:314764
>     newRequire react-is.development.js:51
>     localRequire OrbitDB.js:34
>     parcelRequire<["../../node_modules/3box-comments-react/lib/components/Dialogue.js"]< src.78399e21.js:315498
>     newRequire react-is.development.js:51
>     localRequire OrbitDB.js:34
>     parcelRequire<["../../node_modules/3box-comments-react/lib/index.js"]< src.78399e21.js:315783
>     newRequire react-is.development.js:51
>     localRequire OrbitDB.js:34
>     parcelRequire<["index.jsx"]< src.78399e21.js:316616
>     newRequire react-is.development.js:51
>     parcelRequire helpers.ts:72
>     <anonymous> idna.ts:82

💁 Possible Solution

I would guess this is something related to scss/sass parser. I had a similar issue while trying to put the webpack example together, however after including the sass-loader, it worked as expected.

However I cannot be sure about that.

🔦 Context

N/A

💻 Code Sample

I created this repo with a minimum reproducible example.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4
Node	10.22.0
npm/Yarn	1.18.0
Operating System	Linux (Kernel 5.7.9-1-MANJARO)

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.