# Using Cesium function in Web worker

**URL:** <https://community.cesium.com/t/using-cesium-function-in-web-worker/26355>\
**Category:** CesiumJS\
**Created:** [August 26, 2023, 3:30pm UTC](https://community.cesium.com/t/using-cesium-function-in-web-worker/26355 "2023-08-26T15:30:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnnylc](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/johnnylc/32/10461_2.png) [@johnnylc](https://community.cesium.com/u/johnnylc)\
**Post date:** [August 26, 2023, 3:30pm UTC](https://community.cesium.com/t/using-cesium-function-in-web-worker/26355/1 "2023-08-26T15:30:43Z")

</div>

I want to use the cesium’s process function and data types(like Cartisian3) in web worker.  
I searched related topics in the community:

> [@cannot use cesiume in Worker](https://community.cesium.com/t/cannot-use-cesiume-in-worker/2091):
>
> Hi, I need to do some processing in a worker, and I'd love to use Cesium functions, but: &nbsp;&nbsp;&nbsp;&nbsp;importScripts('url\_of/Cesium.js'); Won't work because document and window are undefined (which is expected). Is there a ways to use Cesium build in a worker ? Thanks, Vincent.

> [@Not able to Use Cesium.js functions in the worker thread](https://community.cesium.com/t/not-able-to-use-cesium-js-functions-in-the-worker-thread/21920):
>
> Hello Team, I am trying to use the cesium.js intersection test in the worker thread but somehow I am not able to run and execute the code. Latter on I realized worker is not even process/identify the Cesium.Cartesian3. Is there any way we can use cesium js functions/API in the worker thread ? Or is it not possible to do so ? @Gabby_Getz@omar Thank you !!

I tried to add cesium to the worker using import Cesium from ‘cesium’ , or importScripts(‘url\_to\_cesium\_index.js’) . but none of them work.  
So how to use Cesium functions in Web worker ?

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [August 30, 2023, 5:24pm UTC](https://community.cesium.com/t/using-cesium-function-in-web-worker/26355/2 "2023-08-30T17:24:25Z")

</div>

Hi,

There is no reason you can’t use Cesium functions in a web worker.

However, [web workers do not share the same global scope as the webpage](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope). You must import Cesium code accordingly, and any build process for workers may need to be treated differently that that of the main app.

Could you share the current way you are creating the worker and and built tools associated with your project? For example are you using webpack to build?

Thanks,  
Gabby

---

<div class="post-metadata">

**Author:** ![johnnylc](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/johnnylc/32/10461_2.png) [@johnnylc](https://community.cesium.com/u/johnnylc)\
**Post date:** [August 31, 2023, 3:59am UTC](https://community.cesium.com/t/using-cesium-function-in-web-worker/26355/3 "2023-08-31T03:59:27Z")

</div>

Yes，I use webpack and worker-loader to build the project,  
1, Webpack rule config for worker-loader as below:

```auto
config.module.rules = [
      {
        test: /\.worker\.js$/i,
        use: [
          {
            loader: 'worker-loader',
            options: {
              inline: 'no-fallback'
            }
          }
        ]
      },
      ...config.module.rules
    ]

```

2, The web worker is implemented in “history-data.worker.js”:

```auto
import _ from 'lodash'
import moment from 'moment'
importScripts(`http://localhost/js/Cesium/index.js`)

self.onmessage = async function (e) {
  const type = e.data.type
  const payload = e.data.payload

  if (type === 'INIT') {
    console.log('init time', moment().format('YYYY-MM-DD HH:mm:ss.SSSS'))
    self.postMessage({
      type: 'WORKER_INIT',
      payload: { data: 'success' }
    })
  }
}

```

3, The worker is imported and created in the project:

```auto
   import DataWorker from './worker/history-data.worker'
   const dataProcessWorker = new DataWorker()
   const dataProcessWorker.postMessage({ type: 'INIT', payload: {} })

```

- Error occurs at the importScripts line  
`importScripts(`[http://localhost/js/Cesium/index.js`](http://localhost/js/Cesium/index.js%60))`  

- Error when replaced the importScripts line to:  
`import * as Cesium from 'cesium'`  
Compile error occurs:  

So could you please make an example of using Cesium in a web worker?  
Thank you.

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [August 31, 2023, 1:15pm UTC](https://community.cesium.com/t/using-cesium-function-in-web-worker/26355/4 "2023-08-31T13:15:19Z")

</div>

Hi there,

`import * as Cesium from 'cesium'` is the best way to import Cesium.

The issue is that webpack is not handling the optional chaining in the source code ( the `variable.?property` syntax). [This issue should cover how to address the issue.](https://github.com/webpack/webpack/issues/10227).

You can also import only the modules you need in the worker to help minimize the worker, for example

`import { Cartesian3, Cartographic } from 'Cesium'`.

---

<div class="post-metadata">

**Author:** ![johnnylc](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/johnnylc/32/10461_2.png) [@johnnylc](https://community.cesium.com/u/johnnylc)\
**Post date:** [September 1, 2023, 3:54am UTC](https://community.cesium.com/t/using-cesium-function-in-web-worker/26355/5 "2023-09-01T03:54:48Z")

</div>

Thank you, following you suggestion it works.

Add these lines to package.json, replace the `acorn` package that the webpack uses as a parser:

```auto
{
  ...
  "resolutions": {
    "acorn": "npm:acorn-with-stage3"
  },
  "dependencies": {

```