question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How-to import Cesium on Webpack

See original GitHub issue

I’m trying to install Cesium on Webpack, and the current tutorial looks outdated.

If I do what is inside your tutorial, i get :


import Cesium from 'cesium/Cesium'
export default class CesiumAdapter extends React.Component {
  /**
   * Lifecycle method: component did mount. Used here to load and initialize the Cesium component
   */
  componentDidMount = () => {
    var viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker : false
    });
  }
  render() {
    return (
      <div
        id="cesiumContainer"
      />)
  }
}

Which makes this error :

WARNING in ./web_modules/utils/cesium-adapter/src/adapters/CesiumAdapter.jsx 37:23-29
"export 'default' (imported as 'Cesium') was not found in 'cesium/Cesium'
 @ ./web_modules/utils/cesium-adapter/src/main.js
 @ ./src/CesiumTest.jsx
 @ ./src/main.jsx

WARNING in ./web_modules/utils/cesium-adapter/src/adapters/CesiumAdapter.jsx 40:27-33
"export 'default' (imported as 'Cesium') was not found in 'cesium/Cesium'
 @ ./web_modules/utils/cesium-adapter/src/main.js
 @ ./src/CesiumTest.jsx
 @ ./src/main.jsx
ℹ 「wdm」: Compiled with warnings.

I can fix it by importing everything like that :

import * as Cesium from 'cesium/Cesium'
 [... ]
    var viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker : false
    });

Or even better (may use Webpack dead code optimizer) :

import { Viewer } from 'cesium/Cesium'
 [... ]
    var viewer = new Viewer('cesiumContainer', {
      baseLayerPicker : false
    });

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:17 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
thw0rtedcommented, Apr 29, 2021

That makes sense. Your fix is another good solution, though in my case it’s a bit of a pain to modify the installed library like that. I’m hoping that Cesium is willing to re-open the issue and take a PR fixing package.json for everybody.

2reactions
TJKourycommented, Apr 29, 2021

…or you can just forget all that mess and use c137.js!

Read more comments on GitHub >

github_iconTop Results From Across the Web

CesiumJS and Webpack
You can import the whole CesiumJS library or require only the specific modules you need. Including modules will result in webpack compiling only...
Read more >
CesiumGS/cesium-webpack-example: The minimal ... - GitHub
We recommend importing named exports from the Cesium ES module, via the import keyword. This allows webpack to tree shake your application automatically....
Read more >
How to setup CesiumJS to use in ReactJS, Webpack, and ...
Instead, to use CesiumJS in your React project… ... import { Viewer } from 'cesium';// Import Cesium CSS if not yet added at...
Read more >
ES6 style import for cesium - javascript - Stack Overflow
As dcr24 said in his answer, you can use Cesium with Webpack. Install Cesium ... import Color from 'cesium/core/Color'; var color = Color....
Read more >
Installation | Resium - Re:Earth
create-react-app · Next.js · webpack. Copy whole Cesium files and load Cesium in HTML; Copy only asset files and bundle Cesium normaly except...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found