kripod / gatsby-plugin-cesium

A Gatsby plugin to add support for CesiumJS

gatsby-plugin-cesium

A Gatsby plugin to add support for CesiumJS.

Install

npm install --save gatsby-plugin-cesium cesium

How to use

Edit gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-cesium'],
};

Notable differences from the official webpack integration guide of Cesium

• All of the Cesium libraries can be imported and used with the following syntax:

  import Cesium from 'cesium';
  import 'cesium/Source/Widgets/widgets.css';
  import React from 'react';
  
  class CesiumContainer extends React.Component {
    componentDidMount() {
      const viewer = new Cesium.Viewer('cesiumContainer');
    }
  
    render() {
      return <div id="cesiumContainer" />;
    }
  }

• Individual modules can be imported using the following syntax:

  import Color from 'cesium/Source/Core/Color';
  
  const color = Color.fromRandom();

• glTF model loading is supported out of the box:

  import CesiumGroundModelURL from '../data/models/CesiumGround.gltf';
  
  const model = viewer.scene.primitives.add(
    Cesium.Model.fromGltf({
      url: CesiumGroundModelURL,
    }),
  );

gatsby-plugin-cesium's Issues

Cannot load Cesium Plugin

Hello! I am using Gatsby CLI version 4.11.2 and Gatsby version 4.11.2 on Windows 10.

I followed your instructions per the README to load everything.

I don't understand what the problem is but I'm guessing it has something to do with how you load Cesium into webpack as a separate directory in gatsby-node.js.

jake@COMPUTER_NAME MINGW64 ~/cesiumjs-quickstart (master)
$ gatsby develop
success compile gatsby files - 1.665s
success load gatsby config - 0.044s

 ERROR 

Error in "C:\Users\XXX\cesiumjs-quickstart\node_modules\gatsby-plugin-cesium\gatsby-node.js": Package subpath './Source/Cesium' is not defined by "exports" in
C:\Users\XXX\cesiumjs-quickstart\node_modules\cesium\package.json



  Error: Package subpath './Source/Cesium' is not defined by "exports" in C:\Users\XXX\cesiumjs-quickstart\node_modules\cesium\package.json

  - errors:371 new NodeError
    node:internal/errors:371:5

  - resolve:429 throwExportsNotFound
    node:internal/modules/esm/resolve:429:9

  - resolve:703 packageExportsResolve
    node:internal/modules/esm/resolve:703:3

  - loader:482 resolveExports
    node:internal/modules/cjs/loader:482:36

  - loader:522 Function.Module._findPath
    node:internal/modules/cjs/loader:522:31

  - loader:919 Function.Module._resolveFilename
    node:internal/modules/cjs/loader:919:27

  - helpers:108 Function.resolve
    node:internal/modules/cjs/helpers:108:19

  - gatsby-node.js:7 Object.<anonymous>
    [cesiumjs-quickstart]/[gatsby-plugin-cesium]/gatsby-node.js:7:40

  - loader:1097 Module._compile
    node:internal/modules/cjs/loader:1097:14

  - loader:1149 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1149:10

  - loader:975 Module.load
    node:internal/modules/cjs/loader:975:32

  - loader:822 Function.Module._load
    node:internal/modules/cjs/loader:822:12

  - loader:999 Module.require
    node:internal/modules/cjs/loader:999:19

  - helpers:102 require
    node:internal/modules/cjs/helpers:102:18

  - resolve-module-exports.ts:197 resolveModuleExports
    [cesiumjs-quickstart]/[gatsby]/src/bootstrap/resolve-module-exports.ts:197:26

  - validate.ts:428 
    [cesiumjs-quickstart]/[gatsby]/src/bootstrap/load-plugins/validate.ts:428:31


not finished load plugins - 0.736s