How to import a library like moment.js into a web worker

Question

Can I import a library installed with npm into a web worker?

I need to use the moment.js library into a web worker.

It is installed via npm into the node_modules/moment directory

I already have tried with this at the top of the worker.js file:

importScripts('/node_modules/moment/moment.js');

But I get

GET http://192.168.2.1:8100/node_modules/moment/moment.js 404 (Not Found)

Answer 1

Yes, it's possible, chances are you're already using a popular bundler like webpack or parcel, but even if you're not it's still possible, though probably not directly from node_modules

With Parcel

main.js

// relative path to the worker from current file
const worker = new Worker('../utils/myWorker.js');

myWorker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

With Webpack (as entry)

main.js

// relative to the expected public path (have in mind any filename transforms like hashing)
const worker = new Worker('myWorker.bundle.js');

myWorker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

webpack.config.js

{
  entry: {
    main: './src/app/main.js'
    worker: './src/utils/myWorker.js',
  },
  output: {
    path: `${ROOT_PATH}/public`,
    filename: '[name].bundle.js',
  }
}

With Webpack (worker-loader)

Install the loader

• npm install worker-loader --save-dev
• Webpack worker-loader documentation https://www.npmjs.com/package/worker-loader

main.js

// relative path to the worker from current file
import Worker from '../utils/myWorker.worker.js';

const worker = new Worker();

myWorker.worker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

With CRA (Create React App) (worker-loader) inline loader

Using an inline loader

• npm install worker-loader --save-dev
• Webpack worker-loader documentation https://www.npmjs.com/package/worker-loader
• we acknowledge we want to use the inline loader syntax this one time (eslint-disable)

main.js

/* eslint-disable import/no-webpack-loader-syntax */
import Worker from "worker-loader!./myWorker.worker.js";

const worker = new Worker();

myWorker.worker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

You can always import the library from a CDN

myWorker.js

importScripts('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js');

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

Other bundlers

• Web workers cannot importScripts from parent folders for security reasons
• The node_modules folder is usually at the root of the project so you can't access it with importScripts
• The bundler needs to be configured so that the content can be aliased or copied to a location the worker can access

AngularCLI, Ionic, CRA

For projects using webpack as a bundler the 2 webpack solutions can be adapted as long as you can access the webpack config and customize it. If you can't access the config (CRA) you can use the inline loader from the "With CRA" example

The "Webpack (as entry)" example was actually borrowed from Angular CLI generated app with Web Workers

• It explains how to modify the setup to bootstrap angular using web workers
• It have been referenced as a webworker solution for Ionic projects too

Note on TypeScript

• you may need a separate ts config in the worker folder
• Structuring a TypeScript project with workers

{
  "extends": "../generic-tsconfig.json",
  "compilerOptions": {
    "lib": ["esnext", "webworker"],
  }
}