openlayers: Webpack production build fails with 5.0.0-beta
- I am submitting a bug or feature request, not a usage question. Go to https://stackoverflow.com/questions/tagged/openlayers for questions.
- I have searched GitHub to see if a similar bug or feature request has already been reported.
- I have verified that the issue is present in the latest version of OpenLayers (see ‘LATEST’ on https://openlayers.org/).
- If reporting a bug, I have created a CodePen or prepared a stack trace (using the latest version and unminified code, so e.g.
ol-debug.js, notol.js) that shows the issue.
I’m using Create React App for it’s polished development and production Webpack configs, to bundle an app using OL5 beta. It’s not actually using React, but Create React App is simply the best resource for a production ready Webpack setup.
Development / watch mode works perfectly. However production build terminates, with the following message:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/ol/index.js:24
Read more here: http://bit.ly/2tRViJ9
The links goes here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
The first point in the linked page asks to open an issue here, so I believe this has something to do with OL and not with webpack config. Still it’s strange as the development mode seems to work fine, probably the issue is not too big.
Reproducible case
npm install -g create-react-app
create-react-app oltest
cd oltest
yarn add ol@5.0.0-beta.7
echo -e "import ol from 'ol'\n$(cat src/App.js)" > src/App.js
yarn build
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 15 (12 by maintainers)
OK, the core of the issue here is that
AFAIK, the front-end-on-npm ecosystem so far considers the standard approach to publish ES5 code to npm, just like how OL 4 did.
This seems to be indeed the case: I did a grep in my bigger node_modules folder and none of the modules had any
letkeyword in, and if they had, it was just in an optional “src” folder, not in the main js code.So we can say that right now, the standard approach is to publish ES5 compiled version to npm.
Now, if OL 5 wants to brake this tradition and publish ES6 code to npm, there needs to be additional instructions in how to babelify it’s code as well during build. This would effect every single project OL is used in! The problem is not just UglifyJS, the actual problem is browsers not supporting ES6 (like IE10).
I think, somewhere hidden in this thread is the configuration needed to make webpack babelify module’s code, not just user’s code, but I’m not so sure about it: https://github.com/webpack/webpack/issues/2972
But please understand that with this approach you are requiring all of your users to implement a very unusual configuration in their build setup, what will have to be solved on a case-by-case bases, as each build config is quite different.
Right now, the only workaround with OL 5 is to copy the ol source code into a user side folder, and replace all includes from
'ol/some/thing'to'./ol/some/thing'. This workaround actually works, the bundled code is transformed to ES5. The downside is that we’ve pretty much included ol’s source code in a project.A working Webpack example using existing @tschaub minimum sample for OpenLayers 5.0.0-beta.7
@simonseyock I think the best solution is to use the officially recommended babel-preset-env method, wouldn’t it? Just set the browsers to the ones which OL5 officially supports and it’ll transpile only those features which are needed by the exact browsers.
Also, babel-polyfill might also be required if you are using modern features.