search

mariusbalcytis / webpack-bundle

Bundle to Integrate Webpack into Symfony
MIT License
122 stars 36 forks source link

Production compilation error #77

Open NourEldin275 opened 6 years ago

NourEldin275 commented 6 years ago

Issue:

I get the following error when I run app/console maba:webpack:compile --env=prod I only get the error when I use the --env=prod option to deploy for production

What should I do to fix this?

Command Output

 (node:24503) 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.
Hash: c5d914d044be92554065
Version: webpack 2.7.0
Time: 2455ms
   [6] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
   [8] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [10] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [18] ./~/react/lib/React.js 5.08 kB {0} [built]
  [82] ./src/XXXX/BusinessBundle/Resources/public/js/Edfa3lyReactApp/products.js 641 bytes {0} [built]
  [83] ./src/XXXX/BusinessBundle/Resources/public/js/Edfa3lyReactApp/main.js 25 bytes {0} [built]
 [102] ./~/react-dom/index.js 59 bytes {0} [built]
 [116] ./~/react-dom/lib/ReactDOM.js 5.17 kB {0} [built]
 [165] ./~/react-dom/lib/findDOMNode.js 2.46 kB {0} [built]
 [172] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {0} [built]
 [175] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]
 [176] ./~/react/lib/ReactDOMFactories.js 5.48 kB {0} [built]
 [178] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]
 [180] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
 [186] ./~/react/react.js 56 bytes {0} [built]
    + 172 hidden modules

ERROR in main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js from UglifyJs
Unexpected token: name (Welcome) [main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js:9851,6]

  [Symfony\Component\Process\Exception\ProcessFailedException]                                                                                       
  The command "'node_modules/.bin/webpack' '--config' '/var/www/html/RockStar/app/cache/prod/webpack.config.js'" failed.                             
  Exit Code: 2(Misuse of shell builtins)                                                                                                             
  Output:                                                                                                                                            
  ================                                                                                                                                   
  Hash: c5d914d044be92554065                                                                                                                         
  Version: webpack 2.7.0                                                                                                                             
  Time: 2455ms                                                                                                                                       
     [6] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]                                                                                    
     [8] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]                                                                             
    [10] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]                                                                                       
    [18] ./~/react/lib/React.js 5.08 kB {0} [built]                                                                                                  
    [82] ./src/XXXX/BusinessBundle/Resources/public/js/Edfa3lyReactApp/products.js 641 bytes {0} [built]                                          
    [83] ./src/XXXX/BusinessBundle/Resources/public/js/Edfa3lyReactApp/main.js 25 bytes {0} [built]                                               
   [102] ./~/react-dom/index.js 59 bytes {0} [built]                                                                                                 
   [116] ./~/react-dom/lib/ReactDOM.js 5.17 kB {0} [built]                                                                                           
   [165] ./~/react-dom/lib/findDOMNode.js 2.46 kB {0} [built]                                                                                        
   [172] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {0} [built]                                                                       
   [175] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]                                                                                          
   [176] ./~/react/lib/ReactDOMFactories.js 5.48 kB {0} [built]                                                                                      
   [178] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]                                                                                       
   [180] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]                                                                                         
   [186] ./~/react/react.js 56 bytes {0} [built]                                                                                                     
      + 172 hidden modules                                                                                                                           
  ERROR in main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js from UglifyJs                                                       
  Unexpected token: name (Welcome) [main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js:9851,6]                                    
  Error Output:                                                                                                                                      
  ================                                                                                                                                   
  (node:24503) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/lo  
  ader-utils/issues/56                                                                                                                               
  parseQuery() will be replaced with getOptions() in the next major version of loader-utils.                                                         

maba:webpack:compile
mariusbalcytis commented 6 years ago

Could you give some syntax - what's in main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js line 9851?

It's either JS syntax error (which would be strange as it get's the file built) or target version of JS is incompatible with UglifyJS plugin. That is, babel producer newer version of JavaScript than UglifyJS plugin can handle.

Could you try to update uglifyjs to see if problem would still persist? It's version is in package.json, update is made with yarn or npm.

NourEldin275 commented 6 years ago

I can't find that file in the project and Uglify is not installed included in package.json either. So I don't know if this is a problem and it should've been there or not.

Here is what I did

In webpack.config.js I commented the part of uglify //new webpack.optimize.UglifyJsPlugin() like so

/**
     * Build specific plugins - used only in production environment
     */
    if (BUILD) {
        config.plugins.push(
            /**
             * Only emit files when there are no errors
             * Reference: https://github.com/webpack/docs/wiki/list-of-plugins#noerrorsplugin
             */
            new webpack.NoEmitOnErrorsPlugin()

            /**
             * Minify all javascript, switch loaders to minimizing mode
             * Reference: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
             */
            //new webpack.optimize.UglifyJsPlugin()
        );
    }

This is what I got when I ran compile command again for env=prod

(node:1616) 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.
Hash: c5d914d044be92554065
Version: webpack 2.7.0
Time: 2060ms
                                                                    Asset    Size  Chunks                    Chunk Names
    main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js  754 kB       0  [emitted]  [big]  main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c
main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js.map  900 kB       0  [emitted]         main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c
   [6] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
   [8] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [10] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [18] ./~/react/lib/React.js 5.08 kB {0} [built]
  [82] ./src/Edfa3ly/BusinessBundle/Resources/public/js/Edfa3lyReactApp/products.js 641 bytes {0} [built]
  [83] ./src/Edfa3ly/BusinessBundle/Resources/public/js/Edfa3lyReactApp/main.js 25 bytes {0} [built]
 [102] ./~/react-dom/index.js 59 bytes {0} [built]
 [116] ./~/react-dom/lib/ReactDOM.js 5.17 kB {0} [built]
 [165] ./~/react-dom/lib/findDOMNode.js 2.46 kB {0} [built]
 [172] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {0} [built]
 [175] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]
 [176] ./~/react/lib/ReactDOMFactories.js 5.48 kB {0} [built]
 [178] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]
 [180] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
 [186] ./~/react/react.js 56 bytes {0} [built]
    + 172 hidden modules

Notes

Now the file main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js is produced and was added to /compiled directory. but the file that was produced when I run maba:webpack:compile which is main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.bundle.js was not produced when I only ran maba:webpack:compile --env=prod so is there is something else broken here or is this the normal behavior for production enviroment?

On line 9851 in main-e496dac1f5b908fe1cfc0ea9a07813ac984aee6c.8462e0b2df4475db7479.js Here is what I found (basically a react component that I wrote)

class Welcome extends __WEBPACK_IMPORTED_MODULE_0_react___default.a.Component {
    render() {
        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
            'h1',
            null,
            'Hello, REACT JS'
        );
    }
}

Here are the contents of package.json in case you needed to look at it

{
  "name": "XXXX",
  "description": "Hey",
  "version": "1.2.3",
  "private": true,
  "dependencies": {
    "async": "0.9.0",
    "babel-preset-react": "^6.24.1",
    "body-parser": "1.2.2",
    "express": "4.5.0",
    "forever": "latest",
    "intravenous": "latest",
    "mongodb": "1.4.5",
    "mongojs": "0.13.0",
    "react": "~15.6.1",
    "react-dom": "~15.6.1",
    "redis": "latest",
    "socket.io": "0.9.17",
    "underscore": "1.6.0"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-apidoc": "~0.10.1",
    "assets-webpack-plugin": "^3.5.1",
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-env": "^1.2.1",
    "css-loader": "^0.26.4",
    "extract-file-loader": "^0.1.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "image-webpack-loader": "^3.2.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.0",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.3",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dashboard": "^0.3.0",
    "webpack-dev-server": "^2.4.1"
  }
}
NourEldin275 commented 6 years ago

Also I previously made a modification to babel presets in wepack.config.js to get it to work properly with react since I'm primarily using the bundle for the react part of the project. Here is what I did:

 config.module = {
        rules: [
            /**
             * Compiles ES6 and ES7 into ES5 code
             * Reference: https://github.com/babel/babel-loader
             */
            {
                test: /\.jsx?$/i,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets:['react']
                }
            },

If this is the reason of issue, is it possible that I send this as a configuration to the bundle instead of directly modifying the webpack.config.js ? Would it help that way?