Use Webpack 5 to build an ES module bundle, and consume that bundle in a Node.js ES module

Question

Is it possible to use Webpack 5 to build an ES module bundle (with a default export), and then consume (import) that bundle in a Node.js ES module?

• Here's a live demo of the following files.

I've got the following files:

|- webpack.config.js
|- package.json
|- /src
  |- index.js

index.js

function util() {
    return "I'm a util!";
}
export default util;

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    experiments: {
        outputModule: true,
    },
};

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  }
}

After running npm run build, we get:

|- webpack.config.js
|- package.json
|- /src
  |- index.js
|- /dist
  |- bundle.js

Great, now I want to just create some "demo" file importer.js which would import util and use it. For convenience, I'll create it on the same folder:

|- importer.js
|- webpack.config.js
|- package.json
|- /src
  |- index.js
|- /dist
  |- bundle.js

importer.js

import util from './dist/bundle.js';

console.log(util());

Now I run node importer.js, and I get this (expected) error:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
[...]
SyntaxError: Cannot use import statement outside a module

Ok then, let's add that "type": "module" to package.json:

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  },
  "type": "module"
}

Now, trying again node importer.js get us another error:

SyntaxError: The requested module './dist/bundle.js' does not provide an export named 'default'

What's more, when trying to re-run npm run build, we get yet another error:

[webpack-cli] Failed to load 'path\to\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined

• Note: Webpack 5 and ESM might be considered as somewhat related, but really it isn't, as it wants to use webpack.config.js itself as an ES module.

How can I make it work?

Would

what version of webpack and webpack-cli are you running? they're not listed in your package.json. – Aeolotropic

I ask because with webpack@^5.51.1 and webpack-cli@^4.8.0 I end up with an empty bundle.js file when I attempt to build. – Aeolotropic

@DanO, that's the result indeed, I'm with those versions as well. – Would

Answer 1

Since you use type: "module", Node.js will treat this module as ESM. From the doc esm_no_require_exports_or_module_exports, require, module.exports, __dirname are not avaliable in ESM. I will use ESM syntax to rewrite webpack.config.js.

Create a polyfill for __dirname variable.

From webpack documentation:

If you're using webpack to compile a library to be consumed by others, make sure to set output.libraryTarget to 'module' when output.module is true.

E.g.

webpack.config.js:

import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
  mode: "development",     
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    library: {
      type: "module",
    },
  },
  experiments: {
    outputModule: true,
  },
};

package.json:

{
  "name": "exporter",
  "version": "1.0.0",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "type": "module"
}

./src/index.js:

function util() {
  return "I'm a util!";
}
export default util;

importer.js:

import util from "./dist/bundle.js";

console.log(util());

Build:

⚡  npm run build   

> [email protected] build /Users/dulin/workspace/github.com/mrdulin/webpack-samples/packages/webpack-v5/stackoverflow/68913996
> webpack

asset bundle.js 3.01 KiB [compared for emit] [javascript module] (name: main)
runtime modules 670 bytes 3 modules
./src/index.js 65 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 87 ms

Execute importer.js:

⚡  node importer.js 
I'm a util!

Notate

I think you have a small mistake in the package.json: Shouldn't it be either "main": "dist/bundle.js" or "module": "src/index.js", as detailed here? – Would

Also, maybe you'll be able to shed a light on my follow-up question. – Would

you mentioned that you should use output.libraryTarget but you didn't use it in your example snippet – Retinoscope