How to import local npm package in custom Worker

[tadeas22]

Summary

Is it possible to import whatever node module package in my custom SW?

Relevant information

In gatsby-config.js i am using the gatsby-plugin-offline to register my src/custom-sw.js. In src/custom-sw.js i am trying to use my locally installed lodash because i want to share it with React part of app src/pages/index.js.

This is not specific to lodash but it is good example to demonstrate the problem.

Problem

As you can guess the src/custom-sw.js throwing 404 lodash not found...

Question

Is it even possible to use same library across React and SW part of app?

File contents

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-offline`,
	options: {
	  appendScript: require.resolve(`./src/custom-sw.js`)
	}
    },
    ...
 ]
...
}

src/custom-sw.js:

importScripts("lodash");

package.json:

{
  "dependencies": {
    "lodash": "^4.17.20",
    "whatever_lib": "^X.Y.Z",
    ...
  },
...
}

src/pages/index.js:

import React from "react";
import lodash from "lodash";
...

[wardpeet]

At the moment you can't :'( The only way to do it is to precompile your SW script. It's a bit to complex to write it down in an issue.

[tadeas22]

Ouuhh :( but many thanks for the reply. Do you have any advice on which way to go (doc, tutorial)? Is it something in webpack?

[wardpeet]

you'll need to run a separate webpack/rollup/bundler command before you run gatsby build or run it during gatsby process.

Easiest would be to use microbundle:
The command you want is something like:

microbundle -i src/custom-sw.js -o .cache/custom-sw.js --no-pkg-main -f iife --externals=none

You'll have to change your offline config to this:

    options: {
	  appendScript: require.resolve(`./.cache/custom-sw.js`)
	}