Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 02:07

    dependabot[bot] on npm_and_yarn


  • 02:07
    dependabot[bot] closed #15857
  • 02:07
    webpack-bot labeled #15863
  • 02:07
    dependabot[bot] labeled #15863
  • 02:07
    dependabot[bot] opened #15863
  • 02:07

    dependabot[bot] on npm_and_yarn

    Bump core-js from 3.20.3 to 3.2… (compare)

  • 02:03

    dependabot[bot] on npm_and_yarn

    Bump lint-staged from 11.1.2 to… (compare)

  • 02:03

    dependabot[bot] on npm_and_yarn


  • 02:03
    dependabot[bot] closed #15728
  • 02:03
    webpack-bot labeled #15862
  • 02:03
    dependabot[bot] labeled #15862
  • 02:03
    dependabot[bot] opened #15862
  • May 24 19:42
    webpack-bot labeled #15859
  • May 24 19:42
    donalffons opened #15859
  • May 23 02:07

    dependabot[bot] on npm_and_yarn


  • May 23 02:07
    dependabot[bot] closed #15806
  • May 23 02:07
    webpack-bot labeled #15857
  • May 23 02:07

    dependabot[bot] on npm_and_yarn

    Bump core-js from 3.20.3 to 3.2… (compare)

  • May 23 02:07
    dependabot[bot] labeled #15857
  • May 23 02:07
    dependabot[bot] opened #15857
Kirill Tolkachev

Hello everyone.

I would like to create entry points with shared part. Don’t understand how to achieve this.

Motivation and example explained in issue - facebook/react#24230

We pack is a huge amount of materials and abstraction. I’m slightly disoriented in this new world. Could anyone help me to find right docs, howto and other explanations for solve sharing code between two entry point ptoblem?

I need an offline documentation for the webpack
How do you download webpack offline documentation
Seif Eddine Slimene
Clone the whole repository and then checkout any tag you want then you'll get your offline documentation good luck
Jessie Tran
I cannot use booststrap 5 (toggle, drowdown) into webpack. If I add bootstrap JS CDN into html file, it's working. Pls help me how to import booststrap 5 into webpack.
Hello, anyone familiar with Aborted because ...js is not accepted warning? I am creating a new project with the same configurations as another one of my working webpacks. This includes @hot-loader/react-dom and @pmmmwh/react-refresh-webpack-plugin.
Ah, I solved this already. My root component wasn't a proper component function, I am using hyperscript and can be easy to mix that up. Have a good day folks.
How can I make webpack-dev-server to both serve my project AND also generate the output files in the dist folder? Currently it only generates those files in memory and doesn't create the dist folder on every new change save.
Hey guys, I got a question. I'm trying to make a scroll down button that scrolls smoothly to an about-me page in ReactJS. I've seen this tutorial using useRef(). But, because I make everything into different Components, I'm curios if I can use for example a <div ref={aboutMeRef}> and make a button to scroll to this <div> from another file if that makes sense.

Hi Everyone, LinkedIn is hiring a Software Engineer - Android. Anywhere in the US, full time.

In this role, you will design and execute user-facing features for the native LinkedIn app as well as LinkedIn Learning app on Android devices, by leveraging mobile operating system frameworks for multi-threading, persisting data, and managing user experience and graphics across multiple screen sizes.

Key Skills: API, Android, OOP, (MVC/MVVM/MVP), Data structures and Algorithms

Please send your resume directly at masundaray@linkedin.com, or ping me if you have any queries.

Eero Anttila
How can I get the port that webpackDevServer selected automatically for me? webpackDevServer.listen() doesn't return anymore object with .address() function
Asma Fayaz
Hi I'm gwtting this error Field 'browser' doesn't contain a valid alias configuration
/Users/asmafayaz/fulljs/src/index.wasm doesn't exist
Hey all. I am a webpack noob and was hoping someone could help me with setting up multiple html/js pages in 1 config. Totally willing to pay. Feel free to add me on Discord: Coat#0001
Eero Anttila

How can I get the port that webpackDevServer selected automatically for me? webpackDevServer.listen() doesn't return anymore object with .address() function

Figured out that the port can be obtained from webpackDevServer.server.address()

Viliam Elischer

QQ: is it a good idea to try optimize development webpack build, by creating a separat vendors.bundle.js or is it better to leave the vendor code in individual bundles for each entry point?

Pros - smaller user code bundle
Cons - on each entrypoint with devtools the vendors.bundle.js gets loaded/download on localhost as well :grin:


G Jeswin
I will build a front-end 3 pages website for just $5 !!
Take a look at my Gig here: https://www.fiverr.com/share/4Z6lWB
Aris Konstantoulas
Hi everyone, at RudderStack we ran into an issue with excessively long deployment times that we determined was caused by overhead from typescript.
After thinking through solutions, we used webpack to solve the problem, and reduced deployment times by 80%.
I wrote a post on it that I hope you might find useful. Please check it out, and give me your feedback!
G Jeswin
Great! I like the blog/post/article!
Shubham Sharma
I have a library in my node_modules and that library contains a require statement. For some reason, webpack is not replacing a basic require statement to a webpack_require statement. As a result, I am getting a require is not defined error. I tried looking at the documentation, but I am not sure I find any relevant documentation regarding transpiling require statements to webpack_specific_require statements. Please let me know what is going wrong in my case.
This is my question on stack overflow
The question contains all the details along with gist and images. Please help
Tim Branyen
Hi all, I'm trying to suppress the initial bundling that occurs when using webpack-dev-server. I cannot find any config options that correlate to this feature. Reading through the source code, I can't find where compiler.run even occurs when using webpack serve. My use case is that we have >100 entrypoints and I want them to bundle on-demand.
Tim Branyen
This seems pretty complicated to solve... looks like webpack-dev-server and middleware require the compiler to run at boot. When I stop this behavior, I prevent new requests from completing as it reuses the aforementioned compilation instance (which never ran to begin with).
Raphael Boukara

Hi :)
I am stuck with HashedModuleIdsPlugin and typescript :(
I hope I am in a right place for this kind of question 😁
I am getting an issue when compiling a TS project that require HashedModuleIdsPlugin and export it with commonJS.

I reproduced it in a super tiny project here: https://github.com/raphaelboukara/test_ts_webpack. It's super tiny, ~3 lines of code.

In my src folder I have 2 files:

  • index.ts: import webpack.js
  • webpack.js: exports require('webpack').ids.HashedModuleIdsPlugin

When running tsc, I am getting the error:

src/webpack.js:1:1 - error TS9006: Declaration emit for this file requires using private name 'HashedModuleIdsPlugin' from module '"/Users/raphael.b/lab/test_ts_webpack/node_modules/webpack/types"'. An explicit type annotation may unblock declaration emit.

1 const { ids: { HashedModuleIdsPlugin } } = require('webpack');

Found 1 error in src/webpack.js:1

How to reproduce?

1- git clone git@github.com:raphaelboukara/test_ts_webpack.git
2- nvm use
3- npm i
4- npm run build


node: 16.13.1
webpack: 5.72.0
ts: 4.6.4

Any idea what I am doing wrong?

Raphael Boukara
I think stackoverflow is the right place for this one :)

Compiled with problems:X

ERROR in ./node_modules/framer-motion/dist/es/utils/process.mjs 9:25-32

Module not found: Error: Can't resolve 'process/browser' in 'E:\vynkSafeReact\myapp\node_modules\framer-motion\dist\es\utils'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

please send me the solution of this error
Matthew Leong
Hi all! Any Federated Module experts here? Running into some funky stuff. Long story short, the host app is loading the remote entry file, but it's still unable to actually load the module 😭. Thanks in advanced!
Hi all! im new to mini-css-extract-plugin, my question is, will ABSOLUTE_PUBLIC_PATH("webpack:///mini-css-extract-plugin/") be appended with font url by default? eg: url(../fonts/) -> url(webpack:///mini-css-extract-plugin//fonts/) .
Hi guys, anyone using the compress plugin with html-webpack-plugin ?

Can someone help me with this, all of a sudden I get this while using webpack5

TypeError: Object.fromEntries is not a function

Shay Rubach
Hello guys. Where would it be the best to ask questions about webpack errors when bundling a wasm module? (generated by rust, if matters)
Manuel Mora Gordillo
Hello! I need help!!
I have this configuration
new MiniCssExtractPlugin({ filename:[name].[contenthash:8].css, chunkFilename:[id].[contenthash:8].css})
which loads css dynamically. I would like to add arguments which are dynamic parameters like "5.0ba2326d.css?fcolor=AAABBB&scolor=EEEFFF"
This would have to be something like
new MiniCssExtractPlugin({ filename:[name].[contenthash:8].css, chunkFilename:[id].[contenthash:8].css?fcolor=${ fcolor }&scolor=${ scolor }})
Somebody knows how do it?
Joe Rattz

We recently lost our developer that setup our webpack config and I'm trying to fix a couple issues but I'm finding the Webpack 4 tree shaking documentation confusing.

First, I'll mention the two issues in case you can easily offer a solution.

  1. In production mode, our font paths are wrong.
  2. In production mode, a sprite png with an scss file specifying styles to position properly on the file has the wrong URL to the sprite png.

Of course everything works properly in development mode.

I understand, conceptually, tree shaking but I'm getting confused with the settings.

From the Tree Shaking doc here: (https://v4.webpack.js.org/guides/tree-shaking/)

package.json sideEffects

The second paragraph at the end says:

The new webpack 4 release expands on this capability with a way to provide hints to the compiler via the "sideEffects" package.json property to denote which files in your project are "pure" and therefore safe to prune if unused.

That makes it sound to me like files/patterns added to package.json's sideEffects property are the ones that are safe to prune, i.e. safe to tree shake.

However, on the same page in the "Mark the file as side-effect-free" section it says "If your code did have some side effects though, an array can be provided instead:".

This sounds like the opposite. The files that are NOT safe to tree shake go in the sideEffects property.

Also, we had an issue a few days ago where we noticed we were losing some styling in a Vue SFC (.vue) file, which we assumed to be due to tree shaking, and adding *.vue to the sideEffects array resolved the problem.

I see other places on the same page where it looks like sideEffects is for files that are not safe for tree shaking, which makes sense for the name of the property. For example this:

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.

So is the second paragraph of the Tree Shaking just worded backwards?

Webpack production config optimization sideEffects property vs package.json sideEffects property?

I have found that setting the optimization sideEffects to false in our webpack.prod.config file resolves both the font path and sprite png file path. That seems to me that it is therefore not tree shaking. But setting it to false seems linguistically like I'm saying none of my files have side effects so prune any you want. That seems to be the opposite of my observed behavior.

The documentation here https://v4.webpack.js.org/configuration/optimization/#optimizationsideeffects says:

Tells webpack to recognise the sideEffects flag in package.json ...

[As un unrelated side note, that section includes a blue info panel that says "Please note that sideEffects should be in the npm module's package.json file and doesn't mean that you need to set sideEffects to false in your own project's package.json which requires that big module." HUH? I cannot figure out what that is trying to tell me. What big module?]

That makes it sound to me like setting it to false should tell webpack to ignore the sideEffects in package.json. Which also makes it seem then that webpack should use it's default behavior for tree shaking which I interpret (but can't find definitively stated anywhere) to be that it will attempt to tree shake everything? Yet, the opposite seems to be true because when I set webpack.prod.config optimization.sideEffects to false, neither of my two problem exist making me think they have not been tree shook.

Also, the rest of the quote from above continues as:

... or rules to skip over modules which are flagged to contain no side effects when exports are not used.

This again makes it sound like package.json's sideEffects are the files that are safe to tree shake?

So I'm missing something. Any clarity and enlightenment would be greatly appreciated.

should i be @import'ing my SCSS Modules into my main.scss as i would everything else, and then split them out into separate files using a test in my Webpack config?
I get this odd situation where I have a <Text>{"9"}</Text> which I then update to <Text>{"10"}</Text> , and then I see "10" is being sent to the client, but the client does not render 10. I am not sure how to troubleshoot this.
reactHotLoaderGlobal.default is defined
Kashyap Mukkamala

Hello Everyone, We are in the process of migrating from Vue 2 to Vue 3 for our internal Design System. As the Design System is installed in a web application, naturally we have set Vue to be a peer dependency in the Design System. Also, when we bundle the Design System, we have specified vue as an external library. This is causing webpack to bundle the Vue functions like so

// EXTERNAL MODULE: external "vue"
var external_vue_ = __webpack_require__(748);
const _hoisted_1 = (0,external_vue_.createTextVNode)("Actions");

The problem here is that when the Design System is imported into the Web application, it complians that external_vue_ is undefined because Vue 3.x no longer has a default export. Any ideas on how this can be resolved? I am assuming this is a webpack change but I am not certain.

Hey guys, i have a problem. I want to use HMR with my Isomorphic React Express Webpack 5 Project. But i cant get it working. I tried so many things diffrent packages building the config new again and again. The nearest result is that i get "Cannot GET /" but even with google i cant fix that ^^' So maybe anyone has some experience with that and can help me
1 reply


I want to configure webpack for create-react-app .
I am using sass and other packages as well.

Is there any way to create the plugin plain names without hashing ?