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
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 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
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 toreact-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]