Hello,
I'm using Cesium on a React project I'm working on and when the Cesium component loads the stars and GUI elements are visible but there is no globe to be seen. I have the following error in the console:
Error: importScripts failed for Workers/createVerticesFromHeightmap at http://localhost:8080/Cesium/Workers/createVerticesFromHeightmap.js
http://requirejs.org/docs/errors.html#importscripts
I did a search and found this post: https://groups.google.com/forum/#!topic/cesium-dev/XYDzjHUXHVc
He says that he added the following test:
if (url.indexOf(".js") < 0) {
url+= ".js";
}
to the req.load function but this fix has no effect for me.
Thank you for your time.
Same issue here. In addition, also getting a 404 on the following resource:
http://localhost:3000/cesium/Source/Workers/Core/Ellipsoid.js
Using Webpack + React.
Pasted cesium/ dir into /public
Set BuildModuleUrl.setBaseUrl('./cesium/Source/');
Relevant Webpack config objects:
output: {
path: __dirname + '/public',
filename: '[name].bundle.js',
publicPath: '/',
sourcePrefix: '' //https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/#ive-already-got-webpack-set-up-just-tell-me-how-to-use-cesium
},
devServer: {
contentBase: __dirname + '/public',
hot: true,
}
SO CLOSE TO HAVING AN AWESOME IDEA COME TO FRUITION!!!! Thanks Cesium core team, y'all are awesome!
FYI, I do have a sample project that demonstrates use of Webpack, React, and Cesium together, at https://github.com/markerikson/react-redux-cesium-testing-demo . It’s from early this year, and I think my prod setup has been tweaked a bit since then, but that should give you the general idea of the approach I’m using. May or may not actually be useful, but hopefully having another example will help.
I do hope to write a blog post at some point discussing Webpack+React+Cesium, but I have a number of other topics that are higher on the priority list atm.
Hey Mark! Thanks so much. I actually cloned your repo earlier today… But to be honest, it was a little over my head. haha. Reading up on DLL now and how you’re splitting the webpack configs; very neat! I will try to wrap my head around this some more tonight. I really want to understand how this integration works. Webpack is always the place where my brain gets a little, well, let’s just say fuzzy
Thanks again. Your work is soooo appreciated! And the fact you reached out here is super awesome.
If you ever write that blog post I know I will have it bookmarked in no time.
Sure. If you’ve got questions on that repo, feel free to ask here or file an issue there.
FYI, my React/Redux links list has a number of articles talking about what Webpack’s DllPlugin is and how to use it, at https://github.com/markerikson/react-redux-links/blob/master/webpack-advanced-techniques.md . There’s also a “Webpack Tutorials” section of that list.
Basically, the DllPlugin is about pre-bundling some files, which also generates a metadata file saying “this bundle contains files X, Y, and Z”. Then in your app config, you reference the metadata file, and Webpack knows not to include files X, Y, and Z into the app bundle.
If you’re interested, my blog is at http://blog.isquaredsoftware.com/ . Currently working on an extended tutorial series about React and Redux, which is intended to showcase some useful techniques I’ve come up with while building another app. The React+Cesium post won’t be part of that series, so we’ll see when I can fit it in.
Mark
Oh wow. Some really great stuff on your blog, man. Just took a brief peek; enjoy how practical the material is and how organically you walk through it. Very human. Will definitely continue to read more of it!
I really appreciate you being so generous with your time and your knowledge.
Heh, thanks I actually appreciate that comment on a couple levels. I haven’t gotten much in the way of specific feedback on the tutorial posts so far, so I’ve been wondering how well the writing+code approach is being received. Glad to hear at least one vote of confidence that what I’m doing is at least reasonably useful and informative
FWIW, I just wrapped up the last of the initial coding for Practical Redux Part 5, and I should have the post up in about a week. Parts 3 and 4 weren’t really all that exciting because they were primarily setup, so from here on out I’m hoping to get into specific useful aspects.
Thanks again, and do let me know how things go with Webpack and Cesium.
Mark
In case anyone else gets stuck on this and can’t figure it out. Try it with another browser. For me Chrome was the only one that threw the error due to strict MIME type enforcement. If this is the case, your headers on JS files might be issue. I was using Flask and it uses the registry to determine MIME types. So for me, the fix was on my server changing the registry. Regedit > Computer\HKEY_CLASSES_ROOT.js and then Content Type should be application/javascript not text/plain. Hope this helps someone else… drove me crazy for two days.