eZ Platform Discussions

SyntaxError while building assets after updating to eZ Platform 2.5.0

Hello,

I’m updating a project to eZ Platform 2.5.0.

My project was already using Webpack and Babel before updating : It has a Webpack configuration file (webpack.config.js) and the configuration for Babel is stored in package.json.

I renamed the existing webpack.config.js to webpack.custom.config.js and I copied eZ Platform’s default webpack.config.js to my project. Then, I imported my custom configuration file from eZ Platform’s webpack.config.js.

When I run encore, it builds my project’s assets correctly it outputs a lot of errors while building the assets of eZPlatformAdminUiBundle :

 error  in ./vendor/ezsystems/ezplatform-admin-ui/src/bundle/Resources/public/js/alloyeditor/src/toolbars/ez-add.js

Syntax Error: SyntaxError: D:\dev\versions\2014.11-dev\_sources\vendor\ezsystems\ezplatform-admin-ui\src\bundle\Resources\public\js\alloyeditor\src\toolbars\
ez-add.js: Unexpected token (75:12)

  73 | 
  74 |         return (
> 75 |             <div
     |             ^
  76 |                 aria-label={AlloyEditor.Strings.add}
  77 |                 className={className}
  78 |                 data-tabindex={this.props.config.tabIndex || 0}

I think this happens because encore attempts to build eZPlatformAdminUiBundle’s assets using my project’s Babel configuration.
My project doesn’t use neither React nor JSX, hence the errors. I tried to add the preset @babel/preset-react to my Babel configuration, but it didn’t change anything.

Here is my Babel configuration :

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
          "browsers": [
            "Firefox > 46",
            "Firefox ESR",
            "Chrome > 50"
          ]
        },
        "useBuiltIns": "entry",
        "corejs": 3,
        "exclude": [
          "transform-regenerator"
        ]
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Here is my Webpack configuration file :

const path = require('path');
const {ProvidePlugin} = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (env, args) => {
    const isDev = args.mode !== 'production';
    return {
        mode: args.mode,
        context: "redacted",
        entry: [
	    "redacted",
        ],
        output: {
            path: "redacted",
            filename: '[name].bundle.js?[contenthash]',
            publicPath: 'redacted',
        },
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    sourceMap: true,
                    terserOptions: {
                        ecma: 7,
                        keep_classnames: true,
                        output: {
                            beautify: true,
                            indent_level: 2,
                        }
                    }
                }),
            ],
            splitChunks: {
                maxInitialRequests: 1,
                maxAsyncRequests: 1,
                minChunks: 2,
            }
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: isDev,
                        },
                    },
                },
            ],
        },
        externals: {
            jquery: 'jQuery',
            ractive: 'Ractive',
        },
        devtool: isDev ? 'cheap-eval-source-map' : false,
        plugins: [
            new ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
            }),
        ],
        stats: {
            warnings: isDev,
        },
    };
};

How can I fix this error and build all the assets ?

I can’t answer your question directly, but I can share what we did with our custom setup that we had before upgrading to eZ Platform 2.5.

We actually renamed eZ Platform’s webpack.config.js to webpack.config.ezplatform.js.

We also added a script to package.json:

"scripts": {
    "dev": "encore dev",
    "prod": "encore production",
    "ezplatform": "encore production --config=webpack.config.ezplatform.js"
},

so we build our assets with yarn dev and yarn prod and eZ assets with yarn ezplatform and no issues nor incompatibilities occur.

I also tried to contribute the renamed config file to eZ Platform repo precisely due to problems you describe, but it was turned down unfortunatelly: https://github.com/ezsystems/ezplatform/pull/392

This post was flagged by the community and is temporarily hidden.