Failed to minify on production build

[foogod]

Ok, so I created a new react app with create-react-app, added react-plotly.js to my project/code, ran into the "using glsify without its transform applied" problem (issue #13), and after reading through the various solutions, opted to do a npm run eject so I could add ify-loader to my webpack.config.dev.js and webpack.config.prod.js (ala https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack).

This fixed the problem in dev mode, and I can get my component to display just fine when running the dev server (npm start). However, now if I try to do a 'npm run build' to build a production version, I get the following error:

Failed to compile.

Failed to minify the code from this file: 

 	./node_modules/ify-loader!./node_modules/gl-matrix/src/gl-matrix/common.js:28 

Read more here: http://bit.ly/2tRViJ9

I've looked around, but I can't seem to find much of a hint on how to fix this.. any ideas?

[bpostlethwaite]

Thanks for the feedback @foogod we'll get back to you early in the new year.

[timonweb]

I've catched the same error with CRA too.

[kevinwuhoo]

I have the same issue with a hand rolled webpack config. After a bit of investigation I think it's related to these two issues:

• Can't build gl-matrix with Webpack throught UglifyJS toji/gl-matrix#270
• SyntaxError: Unexpected token: name (xxxxxx) from Uglify plugin webpack/webpack#2972

[nicolaskruchten]

OK, so here's a webpack configuration that works for me... The issue is resolved by adding the es2015 preset to babel-loader to properly handle gl-matrix :)

var webpack = require('webpack');

module.exports = {
  entry: "./index.js",
  output: {
    path: __dirname,
    filename: "bundle.webpack.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets" : [["es2015", {modules: false}], "react"],
          }
        }
      },
      {
        test: /\.js$/,
        use: 'ify-loader',
      },
      {
        test: /\.js$/,
        use: 'transform-loader?plotly.js/tasks/util/compress_attributes.js',
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}),
    new webpack.optimize.UglifyJsPlugin({
      ie8: false,
      mangle: {
        except: ['$super', '$', 'exports', 'require']
      }
    })
  ]
};

You'll need the following modules:

    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "ify-loader": "^1.1.0",
    "plotly.js": "^1.33.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-plotly.js": "^1.2.0",
    "transform-loader": "^0.2.4",
    "webpack": "^3.10.0"

[nicolaskruchten]

The other option when using create-react-app is to not eject, and simply load Plotly from a CDN with a <script> tag. It's not appropriate in all cases but a good option to keep in your back pocket :)

[ZNackasha]

while this is a still a problem you can use this work around

[hamzaahmadse]

I have the same issue with laravel-mix using react-preset. The bundling done successfully but the app does not work and displays the error message that is..

[gajus]

Same here.

JavaScript heap out of memory error.

$ npm run build

> @ build /Users/gajus/Documents/dev/applaudience/cinema-analytica-web-app
> NODE_ENV=production webpack --config src/bin/webpack.config.production.js

clean-webpack-plugin: /Users/gajus/Documents/dev/applaudience/cinema-analytica-web-app/src/bin/.dist has been removed.




<--- Last few GCs --->

[16105:0x102801e00]    54536 ms: Mark-sweep 1301.7 (1451.8) -> 1301.5 (1452.8) MB, 1887.2 / 0.0 ms  allocation failure GC in old space requested
[16105:0x102801e00]    56515 ms: Mark-sweep 1301.5 (1452.8) -> 1301.4 (1414.8) MB, 1979.2 / 0.0 ms  last resort GC in old space requested
[16105:0x102801e00]    58479 ms: Mark-sweep 1301.4 (1414.8) -> 1301.4 (1409.8) MB, 1963.1 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0xd97f00a5529 <JSObject>
    1: DoJoin(aka DoJoin) [native array.js:~94] [pc=0x10470330bd28](this=0xd9746b022d1 <undefined>,o=0xd9753584421 <JSArray[2035273]>,p=2035273,D=0xd9746b02371 <true>,z=0xd9746b02431 <String[0]: >,y=0xd9746b023e1 <false>)
    2: Join(aka Join) [native array.js:~119] [pc=0x10470330c1be](this=0xd9746b022d1 <undefined>,o=0xd9753584421 <JSArray[2035273]>,p=2035273,z=0xd9746b02431 <String[0]: >,y=0xd9...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/Users/gajus/.nvm/versions/node/v9.8.0/bin/node]
 2: node::FatalTryCatch::~FatalTryCatch() [/Users/gajus/.nvm/versions/node/v9.8.0/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/gajus/.nvm/versions/node/v9.8.0/bin/node]
 4: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/Users/gajus/.nvm/versions/node/v9.8.0/bin/node]
 5: v8::internal::Runtime_StringBuilderConcat(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/gajus/.nvm/versions/node/v9.8.0/bin/node]
 6: 0x104702e042fd

[nicolaskruchten]

@HamzaAhmad932 @gajus can you please create separate issues detailing your respective setups? It's easiest for me to help people independently one thread at a time :)