How to use Cesium with React without using the Resium library

CesiumJS
1

Hi I am just wondering is there any tutorial on how to integrate native CesiumJS into react? I do not want to use the resium library on the github since I prefer using the original CesiumJS. Any input is greatly appreciated! Thanks

2
3

Hey, that’s my repo and blog post! :slight_smile:

Having said that, I would in all seriousness recommend using Resium. My post shows how to start wrapping some Cesium functionality into React components by hand, but Resium has already done all that work for you, and their library has some good documentation on how to use it.

If you’re using Create-React-App, the same folks behind Resium also have a CRA override plugin at https://github.com/darwin-education/craco-cesium that makes it easy to modify CRA’s config to enable including Cesium correctly.

1 Like
4

Hi @Mark_Erikson,
Thanks a lot for the blog post. It’s the only way I have made cesium work with react right of the bat.
I have spend 2 days looking at resium, and craco-cesium, and also tried resiumJS with npm and nothing ever works! The exemple they give never works, there is always a tones of errors that make no sense, there is always conflicting libs, the forum is terrible, the documentation is awful.
For those desperate with Resium or Craco-cesium, this is the way.

5

Unfortunately, just saying “there were a lot of errors” doesn’t really give any details that anyone can use to help you :frowning:

6

Yeah I know, I’m sorry for the outburst, I was tired.

7

Hi @Mark_Erikson,
I feel stupid for my last message.
After a bit of rest, I retried the Resium exemple and finally made it work.

I had to use yarn instead of npm, change the ReactDOM import, remove the react-hot-loader, and change the ReactDOM.createRoot.

If I use npm though I still get :

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.44.2"

I realised I can only make craco-resium work with yarn. If I use npm I have the webpack issue that I could not resolve.
The problem is, my project use npm.