Question

44

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

rated 0 times [ 49] [ 5] / answers: 1 / hits: 10931 / 3 Years ago, tue, august 24, 2021, 12:00:00

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 'pathtowebpack.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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

felixa

Add To Favorites

Follow

Total Points: 180

Total Questions: 113

Total Answers: 108

Location: Palau

Member since Sat, Aug 21, 2021

3 Years ago

felixa questions

1 Cannot find module 'webpack' using webpack-dev-server

Wed, Mar 10, 21, 00:00, 3 Years ago

1 React npm error “npm ERR! code ELIFECYCLE” when I do npm start

Fri, Nov 6, 20, 00:00, 4 Years ago

1 React Router useHistory. History.push changes url but does not load component

Wed, Sep 16, 20, 00:00, 4 Years ago

1 Using redux hooks outside of a component for code reusability

Tue, Dec 31, 19, 00:00, 5 Years ago

1 How would I import fonts from google fonts into javascript, so i can use it for my canvas?

Sat, Oct 19, 19, 00:00, 5 Years ago

View All

answered 3 Years ago analiseb · Accepted Answer

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!