20

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

Community
  • 1
  • 1
Lukas
  • 9,752
  • 15
  • 76
  • 120
  • you forgot to add react tag. – Sagar V Aug 14 '17 at 09:43
  • If I understand you correctly you mean that I have not required the React library. That is not the problem, I don't need it here. – Lukas Aug 14 '17 at 09:44
  • no. Since there is react codes, I think react have to do something which I am unsure. If yes, adding the tag react will help you to bring this question to react devs – Sagar V Aug 14 '17 at 09:57
  • It really is not the problem, since I am not using React here. I am using a compiled react class that for me functions is just an arbitrary object – Lukas Aug 14 '17 at 11:00
  • 1
    I found the solution – Lukas Aug 14 '17 at 11:02

6 Answers6

17

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 react-scripts@2.0.0, 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 react-scripts@2.0.0 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 react-scripts@2.x.x

or

yarn add --exact react-scripts@2.x.x
Ken Ratanachai S.
  • 3,307
  • 34
  • 43
11

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
amdev
  • 6,703
  • 6
  • 42
  • 64
  • 1
    This was the only realistic solution for me. I just added the Terser Plugin where the old UglifyJsPlugin (despite the official docs). I'm curious what is your actual setup – Danielo515 Jan 13 '20 at 19:37
  • 1
    Saved my day, thank you! I had the same issue and webpack/react setup, with react-app being rejected. Simply removing `uglifyJsPlugin` and replacing with `terser-webpack-plugin-legacy` fixed the webpack minification issue. Just by using `new TerserPlugin(),`in webpack config. Legacy documentation was a bit confusing for webpack 3.x.x config. The build size has actually improved as well now \o/ – Tony Barnes Feb 29 '20 at 18:13
  • It also worked for me, I lost my entire day trying to figure out what was going on. But finally it worked – Yago Azedias Sep 01 '20 at 20:35
  • You can also try adding/modifying *a transpilation step* before minification (e.g. add the library dir to `include` list of your `babel-loader` config, if using webpack + babel). – Janaka Bandara Jan 22 '21 at 03:14
  • I don't understand how I change these settings? Who can help me please? – Haim Abeles Oct 18 '22 at 13:08
  • This is what is written in my file `new webpack.optimize.UglifyJsPlugin({` – Haim Abeles Oct 18 '22 at 13:09
9

I found the solution!

I had some ES6 features in my code, namely foreach the ~ operator and shorthand function syntax. The uglyfier did not accept that. I needed to replace that with ES5 code and it works well now.

Lukas
  • 9,752
  • 15
  • 76
  • 120
  • 19
    What do you do if the code is in one or more of your `node_modules` packages? – Joshua Pinter Jun 01 '18 at 01:39
  • @JoshuaPinter were you able to find a solution for node packages? – shivavelingker Sep 11 '18 at 17:53
  • 1
    @shivavelingker I believe I ended up using a different node package that was already precompiled to ES5 and worked with Electron. If you find a better solution, please it here. – Joshua Pinter Sep 12 '18 at 03:27
  • 2
    @JoshuaPinter It worked with updating the react script, as it was resolving .mjs before .js . ```npm install --save --save-exact react-scripts@1.1.2``` – Harish Rana Sep 28 '18 at 05:15
  • 1
    As @HarishRana suggested, it worked for me: same error (trying to minify PNotify 4.0-alpha.4) was fixed updating 'react-scripts=1.1.5' to '2.05' (latest) at the package.json. The option of JoshuaPinter is another good workaround. – Jose Cordero Oct 20 '18 at 17:30
  • 2
    I wouldn't call downgrading a solution. You're going have to eventually figure out a better solution. – gene Aug 13 '19 at 23:26
  • While changing the source itself makes sense in this case (after all it's your own library that you're importing in your project), in general you can try adding/modifying *a transpilation step* before minification (e.g. add the library dir to `include` list of your `babel-loader` config, if using webpack + babel) - esp. for third-party libraries outside of your control. – Janaka Bandara Jan 22 '21 at 03:14
3

For anyone having this issue where upgrading react-scripts isn't the solution, this my story:

First, I use vscode with some auto import plugin that automatically adds the import at the top. It was working ok... until yesterday.

Today I ran the deploy script on my local branch (last time I ran it was last week) and I got this horrible error message, particularly:

Failed to minify the code from this file:

    ./node_modules/re-reselect/src/cache/FifoObjectCache.js:4

It didn't make sense because master build was working fine and I hadn't updated my packages since then.

Hopeless, I started to build commit by commit (actually I started with some of the first ones, then when it worked tried with some other in the middle, and so on) looking for the culprit.

And then I found it!

The auto import plugin added the following import to my code:

import createCachedSelector from 're-reselect/src/index';

when it should be:

import createCachedSelector from 're-reselect';

Causing some reselect source files to be compiled instead of using the already compiled ones by the library.

TL;DR; Do not trust your auto import plugin. Never. Ever. :facepalm:

inakiabt
  • 1,953
  • 1
  • 16
  • 28
3

I've solved this by importing minified version of external library. F.E. for socket.io-client change

import io from 'socket.io-client';

to

import io from 'socket.io-client/dist/socket.io.js';

Anatoliy Litinskiy
  • 81
  • 4
0

First change from package.json. "react-scripts": "2.0.3",

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.
Rahman Qadirzade
  • 135
  • 3