Cannot import anything from node_modules/ external dependencies into web worker

[sangeltandem]

The Web Worker is failing to load external dependencies.

The web worker works fine for standalone functions that are written inside the Worker.ts file but when I moved actual code that had external dependencies I saw this in the console:

0446a38b-53bf-4461-b2cd-4427cdafe0bc:23408 Uncaught ReferenceError: _ is not defined
    at 0446a38b-53bf-4461-b2cd-4427cdafe0bc:23408:4

Saw this when running the rollup -c:

(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
lodash (guessing '_')
moment (guessing 'moment$2')
moment-range (guessing 'momentRange')
uuid (guessing 'uuid')
@tandemdiabetes/taco-js-pump-events-decoder (guessing 'tacoJsPumpEventsDecoder')
lodash/flatMap (guessing 'flatMap')
lru-cache (guessing 'LRU')

This is my rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import json from '@rollup/plugin-json';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import analyze from 'rollup-plugin-analyzer';
import { dependencies, peerDependencies } from './package.json';
import webWorkerLoader from 'rollup-plugin-web-worker-loader';

const devMode = process.env.NODE_ENV === 'development';

const onAnalysis = ({
  bundleSize,
  bundleOrigSize,
  bundleReduction,
  moduleCount,
  modules,
}) => {
  if (!devMode) return;
  console.log({
    bundleSize,
    bundleOrigSize,
    bundleReduction,
    moduleCount,
  });
};

const getDependenciesFromPackageJson = () => {
  return [...Object.keys(dependencies), ...Object.keys(peerDependencies)]
    .map((name) => new RegExp(`^${name}`))
    .concat([/node_modules/]);
};

export default {
  external: [...getDependenciesFromPackageJson()],
  input: 'src/index.ts',
  output: [
    {
      file: 'lib/index.esm.min.js',
      format: 'es',
    },
    {
      file: 'lib/index.min.js',
      format: 'cjs',
    },
  ],
  plugins: [
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' }),
    json(),
    nodeResolve(),

    webWorkerLoader(),
    analyze({
      summaryOnly: false,
      hideDeps: true,
      skipFormatted: true,
      onAnalysis: onAnalysis,
    }),
  ],
};

Should you be able to load external dependencies into the web worker? I am able to import relative files just fine but it breaks anytime I try to use an npm package. Is there some configuration I need to change to make this work?

[mattrossman]

Have you tried setting external: [] in the webWorkerLoader options?

webWorkerLoader({ external: [] )

The README describes the option as follows:

EXPERIMENTAL override rollup resolution of external module IDs useful to inline external dependencies in a worker blob. Default: undefined

It seems by default all external modules are expected to be provided in scope separately unless you tell it to bundle the externals that way.

[theosanderson]

I would also like to understand how to resolve this

[mattrossman]

@theosanderson Did you try the above solution? It should resolve this.

[theosanderson]

Hi @mattrossman, Yes I did. I wasn't clear if the suggestion was to add external: [] or external:['imported_package_name'] but in neither case was I able to get things to work. I get Uncaught ReferenceError: pako is not defined within the worker. I don't have the nodeResolve() plugin, if that could be the issue.

Ed: nodeResolve seems to help, now debugging hopefully a different issue

[mattrossman]

Right, it should be exactly external: [] (empty array, i.e. nothing will be provided externally, everything should be bundled internally).

Yes, IIRC I used @rollup/plugin-node-resolve and @rollup/plugin-commonjs in combination with this plugin.

[ajayjaggi97]

Hey @mattrossman . I have externals: [] in my config. This is making all the dependencies to be bundled along the worker code which is what i want. But the bundled dependencies code is es6 code and i want it to resolve to es5 build of dependency so that i don't have to transpile it. Can you further help with this.

@mattrossman @sangeltandem @theosanderson