Not transpiling in prod mode?

[timurtu]

I'm getting the following error when bundling in prod mode.

Timurs-MacBook-Pro:demo-app timur$ yarn prod
yarn prod v0.17.10
$ npm-run-all --sequential build serve 
yarn run v0.17.10
$ NODE_ENV=production node ./config/scripts/build 
Creating an optimized production build...
(node:84380) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Failed to compile.

static/js/main.1ca47fa2.js from UglifyJs
Unexpected token: operator (>) [./~/get-own-enumerable-property-symbols/index.js:1,0][static/js/main.1ca47fa2.js:15690,25]

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 1.
error Command failed with exit code 1.

I searched for the error online and couldn't find anything, so then I looked at the code on the line referenced in the error and it was the following.

// lines 15690-15693
module.exports = object => {
  return Object.getOwnPropertySymbols(object)
    .filter(keySymbol => object.propertyIsEnumerable(keySymbol))
}

Does anyone know why it may not transpile? I ejected my config but haven't made any changes to the prod config besides adding a sass loader and excluding it from the url-loader. The app runs fine in dev mode

[Timer]

You are most likely importing files outside of appSrc (#1234) -- this is not allowed default behavior.
Since you ejected, you can tweak your webpack configuration to allow for this.

[timurtu]

Okay, but I have been doing it without errors before, is it a new bug? Does this mean I need to move svgs into my src folder?

[timurtu]

I'm only importing JavaScript from within src and node_modules

[Timer]

My apologies, it actually looks like you're depending on a node module get-own-enumerable-property-symbols which requires arrow functions. You need to switch packages or contact the package maintainer and ask that they ship compiled code.

Node modules are not compiled -- you can change this behavior but I advise against it (same line, include node_modules).
To figure out the culprit package, run npm ls get-own-enumerable-property-symbols (unless if you are depending on it).

[timurtu]

Interesting but why would it transpile in dev mode?

This was the npm ls btw ty

[email protected]
  └─┬ [email protected]
    └── [email protected] 

[timurtu]

So you're saying I may need to include node_modules in the webpack config?

[Timer]

It's not being compiled in dev mode.
The dev mode does not uglify code, only production. Uglify JS does not support ES6+ syntax, which is why this is blowing up.

[Timer]

Including node_modules is one solution, but I advise against it.
Perhaps you could compile just that package though, something like require.resolve('get-own-enumerable-property-symbols').

[timurtu]

Okay yeah you're right. Where should I put that line?

[Timer]

Switch webpack.config.prod.js#171 to something like:

include: [paths.appSrc, require.resolve('get-own-enumerable-property-symbols')],

Your mileage may vary though. 😄

[timurtu]

Okay I got the same error on a different line and require.resolve'd another package and it finally built but now that kinda messed up my app for some reason

[timurtu]

And mileage at compile time or runtime ?

[Timer]

Messed up your app in what way? (this is why you shouldn't compile node_modules)

Mileage as in the location of that line.

[timurtu]

I agree I wouldn't publish something not transpiled. It's bizarre the text of my app changed and it's still working fine in dev mode

[timurtu]

What do you suggest?

[timurtu]

https://github.com/timurtu/bootstrap-components

[Timer]

I believe you're just seeing the effects of the minifier mangling names. You can tune UglifyJsPlugin to shut that off (mangle: false).

[timurtu]

Would the require.resolve have anything to do with it mangling source code? Do I have to sacrifice mangling names? Btw I realize transpiling node_modules may be out of scope for create-react-app and appreciate your help

[Timer]

No, the require.resolve is for something else.
It looks (to me) you are turning your components into text using a library, which in turn is getting mangled names. Not sure if you can do anything about this, sorry!

You might be able to tell uglify to ignore certain names, but that's out of the scope of my knowledge.

[Timer]

The require.resolve is telling webpack to compile those modules so they're uglify/browser compatible.

Your problem is here, because this is being mangled.

Edit: looks like the webpack plugin (so uglify2) accepts a exclude parameter you can use! Anyway, I need to go to bed.
Goodluck!

[timurtu]

Oh okay I get it now, it's resolving the pathname to require it. Okay I will try the mangle: false

[timurtu]

And yes that's what it's doing I didn't realize the package I'm using to convert JSX to string wasn't transpiled

[timurtu]

That fixed it thanks!