reearth / craco-cesium Goto Github PK

View Code? Open in Web Editor NEW

73.0 7.0 20.0 505 KB

Let's use 🌍Cesium with create-react-app today!

License: MIT License

JavaScript 100.00%

react javascript cesium create-react-app

craco-cesium's Introduction

craco-cesium

Let's use 🌍Cesium with create-react-app today! This is a plugin for @craco/craco. Resium is also recommended.

NOTE: Unmaintained: Vite is recommended rather thant create-react-app

Currently create-react-app development is inactive. Now it would be a good time to start using Vite to start development as it is easier and faster. See Resium documentation for more information.

There are no plans to perform any maintenance on this library. If you have any requests for additional functionality or dependency upgrading, please send us a pull request!

Very very easy usage

1. Create a React project

npm install -g create-react-app
# or
yarn global add create-react-app

create-react-app example
cd example

2. Install modules

In your create-react-app project, install modules:

npm install --save @craco/craco craco-cesium cesium resium
# or
yarn add @craco/craco craco-cesium cesium resium

3. Rewrite npm scripts

Rewrite npm scripts in package.json as following:

{
  // ...
  "scripts": {
    "start": "craco start", // react-scripts -> craco
    "build": "craco build", // react-scripts -> craco
    "test": "craco test",   // react-scripts -> craco
    "eject": "react-scripts eject"
  },
  // ...
}

4. Create craco config file

Create craco.config.js in the project root:

module.exports = {
  plugins: [
    {
      plugin: require("craco-cesium")()
    }
  ]
};

5. Congratulations! 🎉

Set up is complete! Enjoy your Cesium life.

You can import Cesium as following:

import { Viewer, Entity, Color } from "cesium";

If you are using Resium, you can import Cesium and Resium as following.

import { Color } from "cesium";
import { Viewer, Entity } from "resium";

🔥Pro Tip: Enabling HMR

💡 Example project is here.

yarn add craco-plugin-react-hot-reload react-hot-loader @hot-loader/react-dom

⚠️ @hot-loader/react-dom's version should be the same as react's.

Add an alias of webpack and craco-plugin-react-hot-reload plugin to craco.config.js:

module.exports = {
  webpack: {
    alias: {
      "react-dom": "@hot-loader/react-dom"
    }
  },
  plugins: [
    { plugin: require("craco-plugin-react-hot-reload") },
    { plugin: require("craco-cesium")() }
  ]
};

Wrap root component with hot function in src/App.js

export default App;

import { hot } from "react-hot-loader/root";

// ~~~~~~~~~~~~~~~~~~~~~~~~~

export default hot(App);

Done!

Please refer to react-hot-loader to refer to the details.

Options

If the option is omiited, the default options is used:

CracoCesiumPlugin({
  loadPartially: false,
  loadCSSinHTML: true,
  cesiumPath: "cesium",
});

`loadPartially`

If false, whole Cesium will be loaded in HTML and window.Cesium is used in import { ... } from "cesium";. This is the easiest way.

Otherwise, Cesium will be load partially and bundled in the JS. You have to install strip-pragma-loader to build Cesium for production: npm i -S strip-pragma-loader.

For more details, refer to Cesium official tutorial.

`loadCSSinHTML`

If true, Widgets/widgets.css in Cesium is loaded in HTML.

Otherwise, you have to load the CSS once manually as following.

If loadPartially is true:

import "cesium/Widgets/widgets.css";

Otherwise:

import "cesium/Build/CesiumUnminified/Widgets/widgets.css";

`cesiumPath`

Directory path destination to copy Cesium files.

craco-cesium's People

Contributors

Stargazers

Watchers

craco-cesium's Issues

RuntimeError: The Resource is already being fetched

Getting this error while trying to using Cesium3DTileset
Code below

function App() {

    const handleReady = tileset => {
      if (viewer) {
        viewer.zoomTo(tileset);
      }
    };

    return (
      <Viewer
        full
        ref={e => {
          viewer = e && e.cesiumElement;
        }}>
        <Cesium3DTileset url={IonResource.fromAssetId(5714)} onReady={handleReady} />
      </Viewer>
    );}

[Question] Do we really need a custom webpack config?

Hello guys, I was reviewing this project and a single question arrived to me: Do we really need to use a new webpack configuration?

I'm probably missing some context on the migration to ESmodules, but as far as I understand the further changes are:

Point the import cesium to Cesium/Source. That's working from my side with cra.
Import the widgets.css: If you import it from anywhere in your app is going to be bundled, you just need to do import 'cesium/Build/Cesium/Widgets/widgets.css'
Copy the Cesium assets:

Instead of using webpack for copying Workers, ThirdParty, Assets, Widgets, you can just add a pre-script and copy them with a single command to your /public folder. And add that folder to your .gitignore.

I know this point is not the cleanest, but in a real project are you willing to maintain craco + craco-cesium for a single library?

I know there is an issue with the dependency warnings, but makes more sense to push Cesium to perform any improvement.

Thanks for the time doing this!

Can't deploy to firebase

I can start locally (with craco start). And i can server locally (with craco build && serve -s build). But when i deploy to firebase, it fails. You can see my site at https://skyynetwork-staging.firebaseapp.com/.

Any ideas on what the problem is?

Build warning

Thanks for a nice plugin.

I'm receiving this when running craco start:

`warning "workspace-aggregator-694e21dc-1b3c-4954-b960-c781cae0f6e5 > myproject > craco-cesium > [email protected]" has incorrect peer dependency "webpack@^2.0.0".

Note I've also pinged this issue which is related. So perhaps if it is fixed there it won't need to be fixed here.

some confused

Thank you for your contribution to the cesium.
I want to use cesium and create-react-app without rewire it. react-app-rewired is a custom configuration tools for react.
Is it possible to use react-app-rewired to build the project?

Crash when using yarn PnP

When using with:

create-react-app toto --use-pnp --typescript
yarn add @craco/craco cesium resium craco-cesium
yarn start

We have the following crash in the console:

unable to locate 'node_modules/cesium/Build/CesiumUnminified' at '/Users/vincent/Code/cloud/node_modules/cesium/Build/CesiumUnminified'

With this displaying in the react application

ReferenceError: Cesium is not defined
cesium
/Users/vincent/Code/cloud/external "Cesium":1
> 1 | module.exports = Cesium;
View compiled
__webpack_require__
/Users/vincent/Code/cloud/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
/Users/vincent/Code/cloud/webpack/bootstrap:149
  146 | 		);
  147 | 		hotCurrentParents = [];
  148 | 	}
> 149 | 	return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/vincent/Code/cloud/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
/Users/vincent/Code/cloud/webpack/bootstrap:149
  146 | 		);
  147 | 		hotCurrentParents = [];
  148 | 	}
> 149 | 	return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 | 	return {
View compiled
Module../src/App.tsx
http://localhost:3000/static/js/main.chunk.js:103:64
__webpack_require__
/Users/vincent/Code/cloud/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
/Users/vincent/Code/cloud/webpack/bootstrap:149
  146 | 		);
  147 | 		hotCurrentParents = [];
  148 | 	}
> 149 | 	return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 | 	return {
View compiled
Module../src/index.tsx
http://localhost:3000/static/js/main.chunk.js:239:62
__webpack_require__
/Users/vincent/Code/cloud/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
/Users/vincent/Code/cloud/webpack/bootstrap:149
  146 | 		);
  147 | 		hotCurrentParents = [];
  148 | 	}
> 149 | 	return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 | 	return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:377:18
__webpack_require__
/Users/vincent/Code/cloud/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
checkDeferredModules
/Users/vincent/Code/cloud/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
/Users/vincent/Code/cloud/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57

Browser console says

Cesium.js:1 Uncaught SyntaxError: Unexpected token <
localhost/:23 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/cesium/Widgets/widgets.css".
external "Cesium":1 Uncaught ReferenceError: Cesium is not defined
    at Object.cesium (external "Cesium":1)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module.<anonymous> (resium.es.js:1)
    at Module.../../Library/Caches/Yarn/v4/npm-resium-1.4.1-ebf13cc1ac10a8a03a415d59b2ffb79e4abae4cf/node_modules/resium/dist/resium.es.js (resium.es.js:3062)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../src/App.tsx (App.css?4b4c:45)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../src/index.tsx (index.css?43ab:45)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (serviceWorker.ts:143)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
cesium @ external "Cesium":1
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
(anonymous) @ resium.es.js:1
../../Library/Caches/Yarn/v4/npm-resium-1.4.1-ebf13cc1ac10a8a03a415d59b2ffb79e4abae4cf/node_modules/resium/dist/resium.es.js @ resium.es.js:3062
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
./src/App.tsx @ App.css?4b4c:45
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
./src/index.tsx @ index.css?43ab:45
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ serviceWorker.ts:143
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
webpackHotDevClient.js:120 unable to locate 'node_modules/cesium/Build/CesiumUnminified' at '/Users/vincent/Code/cloud/node_modules/cesium/Build/CesiumUnminified'
printWarnings @ webpackHotDevClient.js:120
handleWarnings @ webpackHotDevClient.js:125
push.../../Library/Caches/Yarn/v4/npm-react-dev-utils-9.0.1-5c03d85a0b2537d0c46af7165c24a7dfb274bef2/node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:190
push.../../Library/Caches/Yarn/v4/npm-sockjs-client-1.3.0-12fc9d6cb663da5739d3dc5fb6e8687da95cb177/node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
push.../../Library/Caches/Yarn/v4/npm-sockjs-client-1.3.0-12fc9d6cb663da5739d3dc5fb6e8687da95cb177/node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
push.../../Library/Caches/Yarn/v4/npm-sockjs-client-1.3.0-12fc9d6cb663da5739d3dc5fb6e8687da95cb177/node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36

workerE6 path fixing

I have tried craco-cesium with cesium "1.93.0", and I had issues loading moudels in Workers,
probably related to this

For some reason I got only WorkerE6 bundled, which is not configured here :

craco-cesium/index.js

Line 103 in 7092931

}

craco build

Having issues deploying to production server after running yarn build.

After I deploy to my server I get a blank screen.

Is this only for development server? I can run it on localhost:3000 when running yarn start no problems.

Do I need to set the homepage: "./" or entry point main: "index.js"?

Please help I've spent a couple of days trying to find a solution.

you can see the results here:

https://arvibe.xyz/n3/index.html . <--- craco build

I've even attempted to use the webpack config 1 and I was having the same issue just getting a blank screen.

https://arvibe.xyz/NGFDemo/index.html . <-- webpack config 1 build

Issue with CRA5 (webpack 5)

Hello. Seems it's not possible to do code-splitting with create-react-app 5.

My craco.config.js is:
module.exports = { plugins: [{ plugin: require('craco-cesium')({ loadPartially: true }) }] };
Craco version: "@craco/craco": "^6.4.3"

When I run craco start, I get an error:
$ craco start Failed to compile. Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. configuration.node has an unknown property 'fs'. These properties are valid: object { __dirname?, __filename?, global? } -> Options object for node compatibility features.

Should it work? If no, are there any plans to upgrade this nice plugin to be compatible with CRA5?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore: update dependency strip-pragma-loader to v1.0.1
fix: update dependency copy-webpack-plugin to v5.1.2
fix: update dependency webpack to v4.46.0
fix: update dependency copy-webpack-plugin to v11
fix: update dependency html-webpack-tags-plugin to v3
fix: update dependency webpack to v5
chore: lock file maintenance
Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

copy-webpack-plugin ^5.1.1

html-webpack-tags-plugin ^2.0.17

webpack ^4.42.1

strip-pragma-loader *

@craco/craco *

Check this box to trigger a request for Renovate to run again on this repository

Error running "craco start" command while using react-scripts 3.3.1

I'm having this error, after upgrading react-scripts to the newest version (3.3.1).

Error running html-webpack-tags-plugin, are you sure you have html-webpack-plugin before it in your webpack config's plugins?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: env-cmd -e development craco start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Any ideas on what might be the problem?

Wrong height

Hi,
I'm loading an asset from cesium ion.

The issue is it's not showing the proper height. When I look at the asset on the cesium ion page, the height is correct, ie on the ground.
But when I look at it with craco-cesium it float above the ground.
What should I do ?

here is my code :

import React from "react";
import { Viewer, Cesium3DTileset } from "resium";
import { IonResource, Ion  } from "cesium";

function ResiumPlayer(props) {
  Ion.defaultAccessToken = process.env.REACT_APP_ION_TOKEN;
  let viewer; // This will be raw Cesium's Viewer object.
  const AssetId = props.IonAssetId;
  if(!AssetId){
    return false;
  }
  const handleReady = tileset => {
    if (viewer) {
      viewer.zoomTo(tileset);
      viewer.infoBox.frame.sandbox = "allow-same-origin allow-top-navigation allow-pointer-lock allow-popups allow-forms allow-scripts";
    }
  };
  return (
    <Viewer
      full
      ref={e => {
        viewer = e && e.cesiumElement;
      }}>
      <Cesium3DTileset url={IonResource.fromAssetId(AssetId)} onReady={handleReady} />
    </Viewer>
  );
}

export default ResiumPlayer;

Thanks
Best

Unable to find static Cesium files using craco

Versions:

"@craco/craco": "^7.1.0"
"craco-cesium": "^1.2.0"
"resium": "^1.17.2"
"copy-webpack-plugin": "^11.0.0"

I followed the exact procedure described in the README using craco.config.js. However, I getting this error on the console

GET http://localhost:3000/cesiumStatic/Assets/approximateTerrainHeights.json 404 (Not Found)

And also this error on the main page (screenshot)

It looks like I need to copy over the directories from the node_modules folder during the build step, and configure the CESIUM_BASE_URL variable as suggested here: https://cesium.com/learn/cesiumjs-learn/cesiumjs-webpack/#add-cesiumjs-to-a-webpack-app

I modified the craco.config.js to the following, but i still keep getting the same error.

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

const cesiumSource = "./node_modules/cesium/Build/Cesium";
const cesiumBaseUrl = "/cesiumStatic";

module.exports = {
  plugins: [
    {
      plugin: require("craco-cesium")()
    },
  ],
  webpack: {
    plugins: {
      add: [
        new CopyWebpackPlugin({
          patterns: [
            {
              from: path.join(cesiumSource, "Workers"),
              to: `${cesiumBaseUrl}/Workers`,
            },
            {
              from: path.join(cesiumSource, "ThirdParty"),
              to: `${cesiumBaseUrl}/ThirdParty`,
            },
            {
              from: path.join(cesiumSource, "Assets"),
              to: `${cesiumBaseUrl}/Assets`,
            },
            {
              from: path.join(cesiumSource, "Widgets"),
              to: `${cesiumBaseUrl}/Widgets`,
            }
          ]
        })
      ]
    }
  }
};

Im not super familiar with webpack and craco, so unsure if I am refactoring correctly. Any suggestions?
Thanks in advance

Building for Relative Paths

When use relative paths
package.json:

{
  "homepage": ".",
}

Use HtmlWebpackTagsPlugin copy cesium files to htmlTag，should be considered "homepage" field in package.json file or relative path is recommended

like "./cesium/Widgets/widgets.css"

Using jest for testing

How can i config prugin for testing using Jest ?

My config (craco.config.js):

const CracoLessPlugin = require("craco-less");

module.exports = {
    plugins: [
        {
            plugin: CracoCesiumPlugin()
        }, {
            plugin: CracoLessPlugin
        }
    ]
};

Output:

$ craco test
FAIL src/tests/store/init.test.ts
● Test suite failed to run

:2
}(requirejsVars.require, requirejsVars.requirejs, requirejsVars.define));
  ^

ReferenceError: requirejsVars is not defined

  1 | import {Model} from "./Layer";
> 2 | import {Cartesian3, Cartographic, ConstantPositionProperty, JulianDate, PositionProperty, Quaternion} from "cesium";
    | ^
  3 | import {baseUrl} from "../utils/config";
  4 | 
  5 | class Trackable {

  at exec (node_modules/requirejs/bin/r.js:62:23)
  at setBaseUrl (node_modules/requirejs/bin/r.js:30248:13)
  at node_modules/requirejs/bin/r.js:30338:9
  at Object.<anonymous> (node_modules/requirejs/bin/r.js:30427:2)
  at Object.<anonymous> (node_modules/cesium/index.js:13:17)
  at Object.<anonymous> (src/entities/Trackable.ts:2:1)

Webpack update

please update webpack to the latest version / we use module-federation and its requires webpack 5 .

Cannot read property 'BillboardGraphics' of undefined

I have installed craco-cesium package according to readme instructions.

I am facing the following error

TypeError: Cannot read property 'BillboardGraphics' of undefined
create
node_modules/resium/dist/resium.es.js:1190
1187 | var BillboardGraphics = createCesiumComponent({
1188 | name: "BillboardGraphics",
1189 | create: function (cprops) {
1190 | return new Cesium.BillboardGraphics(cprops); <--- error here
1191 | },
1192 | mount: function (element, context) {
1193 | if (context.entity) {

His is my main

import React from 'react';
import classes from './App.module.scss';
import {BillboardGraphics, Entity, Viewer} from "resium";
import {Cartesian3, Color, createOpenStreetMapImageryProvider} from 'cesium';

const options = {
    timeline: false,
    animation: false,
    baseLayerPicker: false,
    homeButton: false,
    infoBox: false,
    geocoder: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    selectionIndicator: false,
    navigationInstructionsInitiallyVisible: false,
    orderIndependentTranslucency: false,
    fullscreenButton: false,
    imageryProvider: createOpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/',
    }),
};

const App: React.FC = () => {
    return (
        <div className={classes.App}>
            <Viewer full {...options}>
                <Entity
                    name="test"
                    description="test!!"
                    position={Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100)}
                    point={{pixelSize: 20, color: Color.TRANSPARENT}}
                    onClick={(a, t) => console.log('click', t)}>
                    <BillboardGraphics
                        image={'https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/lens-512.png'}
                        scale={0.06}/>
                </Entity>
            </Viewer>
        </div>
    );
};

export default App;

Any clues?

Error running html-webpack-include-assets-plugin

After upgrade to 1.1.0,Provisioning has encountered a problem,Important details are located below.

yarn run v1.16.0
$ craco start
Error running html-webpack-include-assets-plugin, are you sure you have html-webpack-plugin before it in your webpack config's plugins?
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I hope that after this incident, something will be done about these.

issue with import cesium and webpack

I am encountering two issues with the create-react-app v 3.4.1 and craco-cesium v 1.2.0.
I created a simple application using create-react-app and install @craco, craco-cesium and cesium. See project package.json file

{
  "name": "desktopapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "cesium": "^1.69.0",
    "craco-cesium": "^1.2.0",
    "lodash": "^4.17.15",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

in the view, I have the following Cesium import line which returns undefined:

import Cesium from 'cesium';
console.log(Cesium);

after deleting the node_modules and package-lock.json files and running npm install the depencencies are installed again, though starting the app npm run start showing the following error:

$ npm run start

> [email protected] start /home/ababakanian/SNT/scenario_analyzer/desktopapp
> craco start


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.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /home/ababakanian/SNT/scenario_analyzer/desktopapp/node_modules/webpack (version: 4.43.0)

listing the webpack versions. this is what I see:

$ npm ls webpack
[email protected] /home/ababakanian/SNT/scenario_analyzer/desktopapp
├─┬ [email protected]
│ └── UNMET PEER DEPENDENCY [email protected] 
└─┬ [email protected]
  └── [email protected] 

npm ERR! peer dep missing: webpack@^2.0.0, required by [email protected]

the associated react-scripts uses webpack v 4.43.0 see https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json#L81
though craco-cesium uses 4.42.1, see https://github.com/darwin-education/craco-cesium/blob/master/package.json#L15
is this the cause of the issue?