{"id":16539685,"url":"https://github.com/rickstaa/webpack5-esm-library-example","last_synced_at":"2025-10-08T05:57:38.784Z","repository":{"id":104254024,"uuid":"440472313","full_name":"rickstaa/webpack5-esm-library-example","owner":"rickstaa","description":"A small example repo on how to bundle a ESM library using webpack5","archived":false,"fork":false,"pushed_at":"2021-12-30T11:01:32.000Z","size":401,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"no-webpack","last_synced_at":"2025-04-08T20:16:18.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rickstaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-21T10:09:55.000Z","updated_at":"2024-10-04T22:14:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"dca310b6-7e0c-41cb-a040-2aea57ca6106","html_url":"https://github.com/rickstaa/webpack5-esm-library-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rickstaa/webpack5-esm-library-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickstaa%2Fwebpack5-esm-library-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickstaa%2Fwebpack5-esm-library-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickstaa%2Fwebpack5-esm-library-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickstaa%2Fwebpack5-esm-library-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rickstaa","download_url":"https://codeload.github.com/rickstaa/webpack5-esm-library-example/tar.gz/refs/heads/no-webpack","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickstaa%2Fwebpack5-esm-library-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278897292,"owners_count":26064780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T18:50:07.792Z","updated_at":"2025-10-08T05:57:38.779Z","avatar_url":"https://github.com/rickstaa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started\n\nThis is a small example repo on how to bundle a ESM library using webpack5. It was based on [this blog post](https://blog.logrocket.com/transpile-es-modules-with-webpack-node-js/) and the [webpack documentation](https://webpack.js.org/). It contains several branches:\n\n-   [no-webpack](https://github.com/rickstaa/webpack5-esm-library-example/tree/no-webpack): A ESM library setup without using webpack.\n-   [webpack-react](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react): A ESM library setup that uses [Webpack](https://webpack.js.org/) and [babel](https://babeljs.io/) to bundle react components\n-   [webpack-react-css](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-css): Similar to the branch above but now we also style the React component using [Sass](https://sass-lang.com/) files.\n-   [webpack-react-css-lodash-external](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-css-lodash-external): Similar to the branch but now we specify lodash as a external dependency.\n-   [webpack-react-css-lodash-external-bundle-analyzer](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-css-lodash-external-bundle-analyzer): Similar to the branch but now we also included a way to inspect the bundle using the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).\n-   [webpack-react-dev-server](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-dev-server): Same as `webpack-react` but now also includes the use of the webpack dev server.\n-   [webpack-react-jsx-transform](https://github.com/rickstaa/webpack5-esm-library-example/tree//webpack-react-jsx-transform): Similar to above but now we use the new [jsx-transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).\n-   [webpack-react-jsx-transform-ejected](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-jsx-transform-ejected): Similar to above but now we use also ejected the demo project.\n-   [webpack-react-ts](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-ts): Similar to `webpack-react` but now the js code has been converted to ts.\n\n## How to test out this example\n\n1.  Pick a branch.\n\n2.  Install the node dependencies `npm i`.\n\n3.  Build the bundle using webpack `npm run build`.\n\n4.  Execute the `local_importer.js` node script `node local_importer.js` to see test that the bundle can be imported from inside the main package.\n\n5.  Go into the [CRA](https://reactjs.org/docs/create-a-new-react-app.html) demo project. Currently the `webpack5-library-example` library is dynamically linked inside the `package.json`. You can, however, also use the npm [link](https://docs.npmjs.com/cli/v8/commands/npm-link/) command.\n\n6.  Install the node dependencies.\n\n7.  Start the development server using `npm start`.\n\n## How to create a ESM library\n\nThe steps below are taken from \u003chttps://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\u003e:\n\n-   Add `\"type\": \"module\"` to your `package.json`.\n\n-   Replace `\"main\": \"index.js\"` with `\"exports\": \"./index.js\"` in your package.json.\n\n-   Update the `\"engines\"` field in `package.json` to `Node.js 12: \"node\": \"^12.20.0 || ^14.13.1 || \u003e=16.0.0\"`.\n\n-   Remove `'use strict';` from all JavaScript files.\n\n-   Replace all `require()/module.export` with `import/export`.\n\n-   Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`.\n\n-   If you have a TypeScript type definition (for example, `index.d.ts`), update it to use ESM imports/exports.\n\n-   Optional but recommended, use the node: protocol for imports.\n\n## How to use Webpack to build a ESM library\n\n-   Convert your `webpack.config.js` to a ESM module.\n\n-   Enable the [experiments.outputModule](https://webpack.js.org/configuration/experiments/#experimentsoutputmodule) option to make sure webpack outputs ECMASCript module syntax when possible.\n\n-   Enable [output.module](https://webpack.js.org/configuration/output/#outputmodule) to make sure that javascript files are outputted as ESM modules.\n\n-   If you want your library to be consumed by others make sure to set the [output.library.type](https://webpack.js.org/configuration/output/#outputlibrarytype) flag to `module`.\n\n-   Point the `package.json` `exports` property to your outputted bundle.\n\n-   If you want your ESM library to work with a CRA app you have to also specify the `\"browser\": \"./build/index.js\",` entry in your `package.json`. One known issue is [#10933](https://github.com/facebook/create-react-app/issues/10933).\n\n## How to exclude externals\n\nTo see the example checkout the [webpack-react-css-lodash-external](https://github.com/rickstaa/webpack5-esm-library-example/tree/webpack-react-css-lodash-external) branch. A guide on how to add externals can be found in the [Webpack documentation](https://webpack.js.org/configuration/externals/). The only thing that you have to keep in mind is that when bundling a ES module the [externalstype](https://webpack.js.org/configuration/externals/#externalstype) option is set to `'module'` by default. If your external module therefore is a ESM module you simply use the following:\n\n```json\nexternals: {\n    \"lodash-es\": \"lodash-es\",\n}\n```\n\nIf your external module is specified in a different format see the documentation.\n\n## Useful Resources\n\n-   [@sindresorhus - ESM migration guide (GIST)](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)\n-   [Building NPM package in 2021 (BLOG)](https://www.julian.io/articles/es2020-npm-package.html)\n-   [Pure ESM workflow, is it possible (BLOG)](https://www.indiehackers.com/post/pure-esm-workflow-is-it-possible-714965169d)\n-   [Life with ESM (BLOG)](https://css-tricks.com/life-with-esm/)\n-   [How to transpile ES modules with webpack and Node.js](https://blog.logrocket.com/transpile-es-modules-with-webpack-node-js/)\n-   [Webpack 5 release (CHANGELOG)](https://webpack.js.org/blog/2020-10-10-webpack-5-release/)\n-   [Learn Webpack - Full Tutorial for Beginners (VIDEO COURSE)](https://www.youtube.com/watch?v=MpGLUVbqoYQ\u0026t=6084s)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickstaa%2Fwebpack5-esm-library-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frickstaa%2Fwebpack5-esm-library-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickstaa%2Fwebpack5-esm-library-example/lists"}