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
Go to minifycode.com and click the CSS minifier tab. Then paste the CSS code into the input box and click the Minify CSS button. After the new minified code is generated, copy the code. Then go back to the css file of your website and replace the code with the new minified version.
Minification is the process of minimizing code and markup in your web pages and script files. It's one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.
What is CSS minification? CSS minification is the process of removing unneeded code from CSS source files, with the goal of reducing file size without changing how the CSS file executes in the browser.
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 partynode_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 insidenode_modules
inreact-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 toreact-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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With