Questions tagged [webpack-5]

Use this tag for questions specific to features in Webpack 5. When using this tag, also include the more generic [webpack] tag where possible.

Use this tag for questions specific to features in Webpack 5. For general Webpack questions, the correct tag is .

Webpack 5

Migrating instructions can be found in the documentation.

862 questions
12
votes
3 answers

How to get mini-css-extract-plugin to work with webpack 5?

I am trying to extract the css files in my library. I've read the way to do this is using mini-css-extract-plugin. Am I doing something wrong? Is there another way to extract the css files for my library? Below I've created a simple test project…
longlostbro
  • 528
  • 2
  • 7
  • 24
11
votes
1 answer

Webpack 5 in Ceate React App can't resolve not fully specified routes

We are developing a react library and recently noticed, that it throws an error when we want to consume it with a new (webpack 5) Create React App. It complains about this: "BREAKING CHANGE: The request failed to resolve only because it was resolved…
user3130985
  • 161
  • 1
  • 10
10
votes
1 answer

How to securely import version from package.json while respecting Error: Should not import the named export 'version'?

After updating to Webpack 5, I'm getting this error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) Super-simple code example: import { version } from…
Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76
10
votes
1 answer

I upgraded my webpack v4 to v5 and after that I am getting a "cannot add property" error

I upgraded my webpack v4 to v5 as per this docs https://webpack.js.org/migrate/5 and after that I am getting this error. TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible at…
Abhisar Tripathi
  • 1,569
  • 10
  • 21
10
votes
3 answers

When updating Next.js v10.1.13 to webpack5, getting warnings Can't resolve 'fsevents' in chokidar

npm install next react react-dom And running Node.js v12 Created most simple pages/index.tsx export default function PageHome(props) { return <>Hello World! } (I also had TypeScript configured as per Next.js instructions but not sure if that's…
700 Software
  • 85,281
  • 83
  • 234
  • 341
10
votes
1 answer

js events not firing in webpack built react application

Spoiler: I am leaning towards a Webpack issue rather than React (since with a plain React app, taken straight form create-react-app things work). But still, it only happens with React... The main issue is that a simple event (e.g. onClick is never…
ppanero
  • 327
  • 5
  • 17
9
votes
0 answers

What's the idea of "layer" in Webpack 5?

As title. I'm learning Webpack 5, and I just noticed there seems to be a concept called "layer" that is rarely mentioned(or I haven't found) in the documentation. It can be found here (for the intro. of top-level entry field): personal: { …
NeoZoom.lua
  • 2,269
  • 4
  • 30
  • 64
9
votes
3 answers

How can I make webpack embed my *.wasm for use in a web worker?

I have some rust code that compiles to web assembly using wasm-pack and wasm-bindgen. I want to call into this code from a web worklet/worker. The entire app should eventually be just one single *.js file, with everything else inlined. This is what…
9
votes
1 answer

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

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 |-…
OfirD
  • 9,442
  • 5
  • 47
  • 90
9
votes
1 answer

Webpack 5 Assets Module: How to keep the folder structure in the output folder?

I try to configure Webpack 5 such it keeps the assets folder structure for my images and fonts. I have the following structure: - /app /assets /images /topic1 /topic2 /fonts In my webpack config I have…
obcomv
  • 178
  • 1
  • 6
9
votes
2 answers

How does module federation choose which dependency version to use?

I've been playing around with this module federation example, where the setup is relatively straightforward - a host is consuming a module from a remote with a shared react dependency. When running this locally, I noticed that despite both host and…
Niko Savas
  • 93
  • 1
  • 5
8
votes
4 answers

TypeError: __webpack_require__.h is not a function

I have upgraded from angular 12 to angular 13. Now after upgrading when I tries to run my application. It runs perfectly but in console it is getting the error. index.js:37 Uncaught TypeError: __webpack_require__.h is not a function at Module.38202…
Ashwani Tandon
  • 129
  • 1
  • 5
8
votes
1 answer

import SVG as React Components with webpack 5

I want to use SVG as a React Component in my app. I'm using: react 17.0.2, Webpack 5.57.1, @svgr/webpack 6.2.1. I followed the steps on adding svgr in webpack.config file as in svgr documents svgr-doc but there is an Error in the console dev…
avivl
  • 113
  • 1
  • 4
8
votes
1 answer

Webpack-5 - Webpack tries to resolve root-relative paths to images in scss (or css) and fails

I'm getting this error after upgrading to Webpack-5: Error: Can't resolve '/path/to/image.jpg' in '/app/path/to/module/module' The issue is with images used for css backgrounds where the files aren't stored in the repository, and are not available…
dovidweisz
  • 1,215
  • 13
  • 24
8
votes
1 answer

webpack 5 - Parsed request is a module

I'm creating webpack5 setup for an small app and while doing I'm facing the below mentioned issue. Please suggest the way to resolve Issue Snapshot Module not found: Error: Can't resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src' …
1
2
3
57 58