search

markerikson / react-redux-cesium-testing-demo

A sample project demonstrating configuration of React, Redux, Webpack, Cesium, and Mocha
ISC License
51 stars 7 forks source link

Beginner question. #5

Closed alexchern closed 7 years ago

alexchern commented 7 years ago

Hi there,

Followed the instructions, but this is what I got at the end:

C:\WorkTmp\react-redux-cesium-testing-demo>npm run dev

react-redux-cesium-testing-demo@1.0.0 dev C:\WorkTmp\react-redux-cesium-testing-demo cross-env NODE_ENV=development node devServer.js

Listening at http://localhost:3000 webpack built 46de09b66803c0958f28 in 920ms Hash: 46de09b66803c0958f28 Time: 920ms chunk {0} app.js (app) 8.13 kB [rendered]

ERROR in ./src/index.js Module build failed: TypeError: Path must be a string. Received undefined at assertPath (path.js:7:11) at Object.dirname (path.js:695:5) at C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:36 at C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:396:22 at Array.map (native) at OptionManager.resolvePresets (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:385:20) at OptionManager.mergePresets (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:369:10) at OptionManager.mergeOptions (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:328:14) at C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:370:14 at C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:390:24 at Array.map (native) at OptionManager.resolvePresets (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:385:20) at OptionManager.mergePresets (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:369:10) at OptionManager.mergeOptions (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:328:14) at OptionManager.addConfig (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:10) at OptionManager.findConfigs (C:\WorkTmp\react-redux-cesium-testing-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:434:16) @ multi app Child html-webpack-plugin for "index.html": chunk {0} index.html 412 kB [rendered] webpack: bundle is now VALID.

What's wrong?

Thanks a lot,

Alex

markerikson commented 7 years ago

Appears to be https://github.com/webpack/webpack/issues/2463 . Basically, something about babel-core does not work under Node 6+, but only under Node 5. Upgrading babel-core to 6.10.4+ is supposed to fix the issue.

FYI, I'm currently working on a blog post that will show how to use Cesium in a Webpack-based application, with a newer sample project as an example. Keep an eye on http://blog.isquaredsoftware.com/ - I hope to publish the post by next week.

Also, out of curiosity: how did you find this repo?

alexchern commented 7 years ago

Hi Mark,

Thanks for the prompt response. Actually, I was looking for some guidance on how to put cesiumjs and a react on one page (+ using redux, to make it right). I'm a novice to all this stuff and your blog kinda has it all...

I'd like to use a cesiumjs instead of deprecated GE plugin (in some of our applications) and in the web based solution ( http://vod-aws.impleotv.com/ ) instead of leaflet. So, from what I understand (and I don't understand much :-) it is better just to split a page and keep cesium in a DOM while all the rest to implement using react..

Thanks,

Alex

On Thu, Mar 2, 2017 at 6:38 PM, Mark Erikson notifications@github.com wrote:

Appears to be webpack/webpack#2463 https://github.com/webpack/webpack/issues/2463 . Basically, something about babel-core does not work under Node 6+, but only under Node 5. Upgrading babel-core to 6.10.4+ is supposed to fix the issue.

FYI, I'm currently working on a blog post that will show how to use Cesium in a Webpack-based application, with a newer sample project as an example. Keep an eye on http://blog.isquaredsoftware.com/ - I hope to publish the post by next week.

Also, out of curiosity: how did you find this repo?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/markerikson/react-redux-cesium-testing-demo/issues/5#issuecomment-283706106, or mute the thread https://github.com/notifications/unsubscribe-auth/AJHeYVegMeC9nMcQ9-m5sYTobFNTtUudks5rhvCZgaJpZM4MQn7h .

markerikson commented 7 years ago

Gotcha. Well, if you gimme just a few more days, you'll have a lot more information on the topic available :)

And yeah, what I'm going to demonstrate in more depth is how to:

markerikson commented 7 years ago

And as promised, I just published a 2-part post on "Declaratively Rendering Earth in 3D: Using Cesium with React and Webpack". Part 1 covers basic Cesium+Webpack setup and build optimization with DllPlugin. Part 2 shows declarative React components that wrap imperative APIs:

http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-2-cesium-react/