Failed to minify the code from this file

Question

I am authoring a JavaScript library that I want to put on npm. I am currently using that library in another project and I have added it as a dependency using its GitHub repository:

"dependencies": {
  // ... others
  "react-web-component": "LukasBombach/react-web-component",
}

I am also using Webpack with the UglifyJsPlugin. Now when I want to build my project I get an error:

Failed to compile.

Failed to minify the code from this file:

./packages/react-scripts/node_modules/react-web-component/src/index.js line 18:0

Read more here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

error Command failed with exit code 1.

This is a problem of my library. When I remove it from my deps (and from my code) compiling works.

I cannot figure out what the problem is, my code seems pretty straight forward:

const ReactDOM = require('react-dom');
const retargetEvents = require('./retargetEvents');
const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');

module.exports = {
  create: function(app, tagName, options) {
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function() {
          const shadowRoot = this.createShadowRoot();
          const mountPoint = document.createElement('div');
          getStyleElementsFromReactWebComponentStyleLoader().forEach(style =>
            shadowRoot.appendChild(style)
          );
          shadowRoot.appendChild(mountPoint);
          ReactDOM.render(app, mountPoint);
          retargetEvents(shadowRoot);
        },
      },
    });
    document.registerElement(tagName, { prototype: proto });
  },
};

Inside the retargetEvents and getStyleElementsFromReactWebComponentStyleLoader requires there are simple module.export commands. You can see their source code here and here.

I have already tried publishing my library using ES6 export / import commands.

The full source code of my library (it's just these 3 files) can be found at https://github.com/LukasBombach/react-web-component

Answer 1

For those you are facing the problem. First check your package.json whether you are using React-script 1.x. If so try upgrade to 2.x.x.

From the official Troubleshooting docs npm run build fails to minify

npm run build fails to minify Before [email protected], this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in [email protected] and higher.

If you're seeing this error, you're likely using an old version of react-scripts. You can either fix it by avoiding a dependency that uses modern syntax, or by upgrading to react-scripts@>=2.0.0 and following the migration instructions in the changelog.

Upgrade by.

npm install --save --save-exact [email protected]

or

yarn add --exact [email protected]

Answer 2

For people that still face this issue, here I found a solution that worked for me; I will explain it step by step here:

Recently I involved in a project that uses an older version of create-react-app with webpack@3 and uglifyJsPlugin in it's webpack configuration. While I worked with the project the main issue and problem raised when I installed other npm packages and I worked with them for a while in dev mode. After I've done my tasks on them, when I wanted to build the project, I faced with the headache of:

cannot minify code from this file blah blah blah...

The problem raised from minifying the js files so t thought that if I change the configuration of webpack.config.prod to change the minification process of it, then I would be able to solve the problem. So I checked the webpack.config.prod file and I saw that it uses the uglifyJsPlugin for minification. I changed the configuration to use terser-webpack-plugin and I got another error that would state that this pkg is for webpack@4. Finally I ended up using terser-webpack-plugin-legacy for my webpack@3 configuration and it worked perfectly. Please note that my create-react-app was ejected.