transform-react-constant-elements => Acorn: SyntaxError: Unexpected token

[slorber]

Input Code

Here's the exact input code I'm using: gist

I've tried to reduce/isolate the problematic part but was unable to find it. It seems that removing code blocks can somehow randomly make the compilation step pass successfully, don't know why.

Note that removing the whole component StampleDescriptionMainMediaAndText does make the error disappear, but I'm unable to identify which part of it is problematic, and surprisingly, removing other code blocks might also work!

Expected Behavior

Enabling plugin transform-react-constant-elements (latest) should work.

Current Behavior

ERROR in ./src/components/stample/stampleDescription/stampleDescription.js
Module parse failed: /Users/sebastienlorber/Desktop/Stample-react/node_modules/react-hot-loader/index.js!/Users/sebastienlorber/Desktop/Stample-react/node_modules/babel-loader/lib/index.js!/Users/sebastienlorber/Desktop/Stample-react/src/components/stample/stampleDescription/stampleDescription.js Unexpected token (348:85)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (348:85)
    at Parser.pp$4.raise (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$2.parseBindingAtom (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1417:12)
    at Parser.pp$2.parseMaybeDefault (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1455:25)
    at Parser.pp$2.parseBindingList (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1440:27)
    at Parser.pp$1.parseFunctionParams (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1072:24)
    at Parser.pp$1.parseFunction (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1064:10)
    at Parser.pp$3.parseExprAtom (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1810:19)
    at Parser.pp$3.parseExprSubscripts (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/sebastienlorber/Desktop/Stample-react/node_modules/acorn/dist/acorn.js:1692:19)
 @ ./src/components/stample/stampleMainContentReadOnly/stampleMainContentReadOnly.js 29:26-93

Your Environment

    "babel-core": "6.23.1",
    "babel-loader": "6.3.2",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-inline-elements": "6.22.0",
    "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
    "babel-plugin-transform-react-remove-prop-types": "0.3.2",
    "babel-preset-react-app": "2.1.0",
    "babel-preset-stage-0": "6.22.0",

{
  "presets": [
    "react-app",
    "stage-0"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-inline-elements",
        "transform-react-remove-prop-types",
        "transform-react-pure-class-to-function"
      ]
    }
  },
  "sourceMaps": false
}

Maybe related to #5315 ? cc @STRML @existentialism

[babel-bot]

Hey @slorber! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[existentialism]

@slorber do you by chance use webpack's expose-loader?

(https://twitter.com/jimbolla/status/831525123182227458)

[hzoo]

If you are getting an acorn error it's probably not babylon (unless we didn't compile something down to ES5 and thus the error)

[slorber]

@existentialism no I'm not using expose-loader

@hzoo this error only happens once I enable transform-react-constant-elements, it does not when I disable it, so it looks to me quite related to Babel no?

[hinok]

@slorber @hzoo I encountered today the same problem. I made a sample repository that shows this bug (newest webpack, babel-*).

https://github.com/hinok/babel-loader-bug

ERROR in ./src/index.js
Module parse failed: /Users/dk/Desktop/Dev/babel-loader-bug/node_modules/babel-loader/lib/index.js!/Users/dk/Desktop/Dev/babel-loader-bug/src/index.js Unexpected token (23:37)
You may need an appropriate loader to handle this file type.
| };
|
| var bazFactory = function bazFactory((_temp = _ref3, _ref4 = <Bar icon={icon}>
|       {text}
|     </Bar>, _temp)) {

In my case this kind of code break babel-plugin-transform-react-constant-elements.

const Foo = ({ children }) => <div>{children}</div>;
const Bar = ({ icon, children }) => <div>{icon}{children}</div>;

const bazFactory = ({ text, icon }) => props => (
  <Foo {...props}>
    <Bar icon={icon}>
      {text}
    </Bar>
  </Foo>
);

const App = () => (
  <div>
    {bazFactory({ text: 'Hello World', icon: 'An icon' })()}
  </div>
);

I think that code is wrongly transformed

var bazFactory = function bazFactory((_temp = _ref3, _ref4 = <Bar icon={icon}>

It works when this plugin is removed from .babelrc.

[slorber]

great :) I'm sure it'll be way more helpful that my code snippet :p thanks

[zackify]

I'm having the same problem. Removing babel-plugin-transform-react-constant-elements fixes it.

[hoschi]

Same error, slightly other syntax:

import React from 'react';
import renderIf from 'render-if';

export let Person = ({showButtons, buttonText}) => {
    return <div>
               This is me!
               { renderIf(showButtons)(() => (
                     <button>
                         { buttonText }
                     </button>
                 )) }
           </div>;
};

export default Person;

It works if I remove the plugin, or remove {buttonText}. This version works too:

import React from 'react';
import renderIf from 'render-if';

export let Person = ({showButtons, buttonText}) => {
    return <div>
               This is me!
               { renderIf(showButtons)(<button>
                                           { buttonText }
                                       </button>
                 ) }
           </div>;
};

export default Person;

[brantphoto]

hi everyone. I was having the same issue as @hinok,
var bazFactory = function bazFactory((_temp = _ref3, _ref4 = <Bar icon={icon}>

thought it was a version issue, but it appears to be an issue with the order of the plugins run

DOES NOT WORK:

    "plugins": [
      "transform-react-remove-prop-types",
      "transform-react-constant-elements",
      "transform-react-inline-elements"
     ]

DOES WORK:

    "plugins": [
      "transform-react-remove-prop-types",
      "transform-react-inline-elements"
      "transform-react-constant-elements"
    ]

while the documentation on https://babeljs.io/docs/plugins/transform-react-constant-elements/ does make a small reference to the "transform-react-constant-elements" step being perhaps last (e.g., just before minifying your code) it could be clearer that order matters. Or, perhaps they create a single react plugin that does all the optimization but enforces the order.

Did this help fix anyone's problems?

[slorber]

@brantphoto thanks, declaring constant-elements last seems to fix the problem on my codebase too!

There's already an optimization preset for Babel and I've made a PR to update the order: jamiebuilds/babel-react-optimize#33

Still, I think it's worth letting this bug open as order should probably not matter no?

[hinok]

@brantphoto Thanks! This really helped me and and fixed the problem 🍾 🎈 🎉

[apaatsio]

I believe this has been fixed by #5686

At least I couldn't reproduce @hinok's example any more.

Edit: I can't reproduce the error in @hoschi's example either.

[hoschi]

@apaatsio thanks for testing, I put it on my todo list