-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add webpack support #1649
Comments
My PR at cutting-room-floor/glify#7 avoids the browserify check, and combined with a section in the webpack config like {
node: {
fs: "empty"
}
} (people recommend this but nobody knows what it does) That said, that only gets us to the point where it appears that the transform doesn't work. Hands-on testing and development of this compatibility layer might be better left to someone with more knowledge of webpack internals. |
I putted an alias in my webpack config: |
It is not just the glify that is the problem. I tried manually compiling the shaders and using the result to build with webpack but it still fails, as dispatcher.js uses webworkify to generate the worker files/blobs with browserify. I tried to change those to webpack's worker-loader but failed in getting that to work. |
Curious how far we are on getting gl-js + react + webpack to work. Is this a problem that requires a long term architectural-level solution? |
@hannesj Could you elaborate on why webpack's worker-loader didn't work?
|
@lucaswoj, Sorry, I didn't debug it very thoroughly, as it works to just bundle in the pre-packaged js. It seemed that the individual workers were spun up correctly, but for some reason the event listeners in the worker didn't get executed when messages were sent from the main thread. |
@hannesj can you explain a bit more about your solution? Did you just use a prebundled shim same way as in https://github.com/twelch/react-mapbox-gl-seed/blob/master/src/components/GLMap.js#L3-L4 ? |
Even if you are building with webpack (I have been doing so), minifyify is also a regular dep. Because it is a regular dep, it has a peerDep of Browserify. That might also cause some issues at some point (npm shrinkwrap issue for us). |
I was running into problems bundling mapbox-gl-js into a webpack package (ridiculously long production build times when using dist/mapbox-gl-dev, dist/mapbox-gl not working), so I made a webpack-compatible branch. The main changes were using loaders to package the shaders and worker files. Documentation generation no longer works because of non-js dependencies. |
Is there any progress to support webpack? |
Any progress updates will be posted to this ticket. We would be thrilled to review a PR adding Webpack support by someone who uses and understands the platform. |
I found a blog about it. It just works. |
Thanks @sleepycat (Mike) for making this blog post! |
@misterfresh This is very helpful. Might want to consider setting up a way to inform users of your lib when/if your lib becomes deprecated. |
This finally worked for me for anyone using react 0.15, map box-gl-js 0.17 and ES6 import: npm install brfs, json-loader, transform-loader, webworkify-webpack -S inside webpack.config.js
|
@eltoro I'm pretty sure this is a typo |
Yep, thanks. I also added the resolve alias for webworkify-webpack. Without it the styles don't work. I can confirm that this setup is working for me. |
@eltoro Still having issues when using mapbox-gl 0.18.0. Google Chrome Runtime Error
I've fixed it by adding another loader for loaders: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'node_modules/mapbox-gl/js/render/painter/use_program.js'),
loader: 'transform/cacheable?brfs'
}
... |
In my case webpack had trouble to resolve to mapboxgl using mapbox-gl 0.18.0. I changed the import statement and now it works.
Also I added a post loader in my webpack config.
|
@dvreed77 I found a solution to the bug if you are interested. There is a memory leak in mabox-gl and its connection with webworkify. My solution involves modifying code both in mapbox-gl and in webworkify-webpack. Basically in webworkify-webpack you need to change the last lines of index.js to:
Then in mapbox-gl/js/util/actor.js add
This removes the blob instead of keeping it in memory, which causes a memory leak. I also added this line: Hope this helps. |
@ReLrO Wow, great find! Does anyone else know of this memory leak? Should definitely do a pull a request in this case |
@dvreed77 I thought of it, but the fix depends on the modification of webworkify-webpack and until webworkify-webpack will change, the fix for mapbox-gl-js wont work... |
Weird error happening over here. Everything compiles just fine and is working great in all environments (Recent versions of Chrome + Firefox + Safari tested) EXCEPT for Safari v.8.0 (tested on 8.0.8 on desktop + iOS 8). When running on Safari v.8.x, the following error is surfaced:
stacktrace
UPDATE 1 When running the webpack build without uglify, the problem disappears. Investigating further now. |
in other browsers (this time chrome 34.0.1847.116) getting a different runtime error. Here's a better stacktrace from an un-minified bundle:
some of the above lines:
UPDATE After some debugging, i've found the error is occurring because the method polyfilling the method with the snippet here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find - |
@aidanlister Hi there, I am facing the same issue, but didn't figure it out. Is yours resolved? Thanks! |
Has anyone gotten it to work with Webpack 2? → https://webpack.js.org/configuration/ Here's my non-working configuration function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
...
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'mapbox-gl': resolve('node_modules/mapbox-gl/dist/mapbox-gl.js'),
'webworkify': 'webworkify-webpack'
}
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'node_modules/mapbox-gl/js/render/painter/use_program.js'),
loader: 'transform/cacheable?brfs'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /node_modules\/mapbox-gl/,
loader: 'transform',
enforce: 'post',
query: 'brfs'
}
],
}
} Results in
|
Solved it by removing the two loaders (just not in conjunction with UglifyJS, see below) function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
...
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'mapbox-gl': resolve('node_modules/mapbox-gl/dist/mapbox-gl.js'),
'webworkify': 'webworkify-webpack'
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
}
],
}
} However, building it with |
In import mapboxgl from 'mapbox-gl'; I'm getting |
I am using the default webpack configuration that comes with the vuejs project scaffolded using the vue-cli together with the webpack template. Mapbox works perfectly during development but when I build the project mapbox throws this error: My webpack file looks like this var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
} Someone help please |
Try doing what @zezhipeng mentions here:
It fixed the exact same problem for me: |
@onehorsetown your solution works like charm. Thanks a lot 👍 👏 . I had come up with a not so elegant work around. I added module.exports = {
...
externals: {
"mapbox-gl": 'mapboxgl'
}
...
} to the |
I end up doing just adding
and it woks using web pack 2.0 you need to add ify-loader |
…ey in .vitaminrc Justification: sometimes, you want to be able to specify custome aliases, for instance for libraries where entry point need some very specific webpack config to be built. In that case you may want to use the compiled js instead (for instance, that the case of mapbox-gl mapbox/mapbox-gl-js#1649
We are using it with Angular 6 and getting an error. I'm not sure where should I added this. Any idea in which file(probably tsconfig.json) and in which block I should add it? |
@mitulgolakiya add angular json => "scripts": ["node_modules/mapbox-gl/dist/mapbox-gl.js"] |
Why is this issue marked as closed? There is not clear way of using this lib with, maybe, the most used js bundler out there. |
Hi @bujoralexandru, We've outlined the possible solutions in the transpiling section of GL JS docs here https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling We also have a test application that uses webpack, which loads and transpiles the Web Worker separately: https://github.com/mapbox/mapbox-gl-js/tree/main/test/build/transpilation |
Hi @stepankuzmin, Thank you for the fast response 💯 ! One issue still remains: we lose the magic of typescript for the |
I'm able to bundle gl-js using webpack, but I'm getting a runtime error (in glify) with Chrome 46 on OSX. @tmcw mentioned this has been reported before and that a webpack alternative to glify may be needed. Adding an issue for reference and noting workaround.
at https://github.com/mapbox/glify/blob/master/index.js#L13
Simple example showing my work -- https://github.com/twelch/react-mapbox-gl-js/tree/webpack-test
One workaround is to shim with the pre-built gl-js library using the webpack script-loader module.
instead of
The text was updated successfully, but these errors were encountered: