Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 16:57
    webpack-bot unlabeled #15991
  • 16:57
    webpack-bot labeled #15991
  • 16:57
    gluxon synchronize #15991
  • 11:10
    webpack-bot labeled #15892
  • 10:22
    sokra closed #15940
  • 10:22

    sokra on main

    chore: add bugs field in packag… Merge pull request #15940 from … (compare)

  • 10:21
    sokra closed #15834
  • 10:21

    sokra on main

    ci: update github actions Merge pull request #15834 from … (compare)

  • 10:21
    sokra closed #15909
  • 10:21

    sokra on main

    fix: hmr build twice fix registry Merge pull request #15909 from … (compare)

  • 10:18

    sokra on main

    enhanced-resolve@5.10.0 Merge pull request #16001 from … (compare)

  • 10:18

    sokra on up-enhanced-resolve

    (compare)

  • 10:18
    sokra closed #16001
  • 10:17
    sokra edited #16001
  • 10:13
    sokra edited #15991
  • 10:12
    webpack-bot labeled #15991
  • 10:12
    webpack-bot unlabeled #15991
  • 08:39

    sokra on main

    remove unnecessary moduleId pro… Merge pull request #16005 from … (compare)

  • 08:39

    sokra on moduleId-prop

    (compare)

  • 08:39
    sokra closed #16005
Brian Jenkins
@brianjenkins94
Hey all, I'm using Next.js and wanted to know if there was a way that I could potentially have a custom webpack config that could manipulate the paths of pages at build time
i.e. if I have pages/foo/bar.tsx, I want to remove foo/ at compile time
really i'm just looking for any way to manipulate the path, I'm just not clear on if that's something I can do in the config or if I have to write my own plugin
Aman Pandey
@afficiona
image.png
image.png
Hello. I am facing one issue where my react app is not able to load the lazily loaded chunk(Error: loading chunk 0 failed). Upon checking, I found the chunk is being requested from the relative url that is localhost.com:8000/chunk.js, instead of requesting it from the actual path that is set in the webpack config. My webpack config looks like below:
{
...
output: {
filename: '[name].client.bundle.js',
chunkFilename: 'chunk.js',
path: path.resolve(__dirname, '..', '.build', 'js'),
},
...
}
The other file that is bundle.js loads correctly from localhost.com:8000/build/js/bundle.js. It's just the problem with this chunk that it's not loading from the builds directory. I would really appreciate any help on this. Thanks a ton in advance :)
Tim Branyen
@tbranyen
Has anyone found a way to output ES5 and ES6 bundles from the same config? Our build times would increase 2x if we were to double build with separate configurations.
Konstantin Darutkin
@spalt08

Hi everyone!

I am an author of gradejs.com — a tool, that analyzes Webpack production bundles. It detects a list of bundled NPM libraries and works even for minified or tree-shaken bundles without access to the source code or Webpack stats files.

The project is free and open-sourced: https://github.com/gradejs/gradejs

We’ve just launched an open beta test and would like to get some feedback from the community.

Catalin Pintea
@catalinrebs_gitlab
hi guys, been debugging a strange issue with mini-css-extract-plugin & webpack5
I'm trying to get rid of a flash of unstyled content caused by style-loader, by replacing it woth mini-css-extract-plugin
image.png
the issue is, the CSS gets included as a <script> tag
I haven't found a way to fix it, although I did run into similar issues people had in the past - webpack-contrib/mini-css-extract-plugin#50
thanks a lot for any tips!
Catalin Pintea
@catalinrebs_gitlab
nevermind, this was an issue with our Django setup, and not mini-css-extract. thanks!
@myNameIsDu
Hey, guys, I have a requirement to check whether the module exists at runtime and go back.Then i found magic comment Api webpackNode: "weak",
But sometimes it doesn't work,Here's example
@myNameIsDu
I found that isn't working when module is in node_modules, But it's working in my project when it's in node_modules, I tried to find their difference, But I failed because it was imported in too many places
@myNameIsDu
To reproduce the problem, please click on this link and run 'NPM run build && NPM start', If you could give me some hint, it will be of great help to me. Thank you very much
Brian Jenkins
@brianjenkins94
@myNameIsDu the chat here is quite dead, you probably want to open an issue on the repo: https://github.com/webpack/webpack/issues/new/choose , failing that, I've gotten some help from the reactiflux discord: https://discord.com/invite/reactiflux
@myNameIsDu

yeah, I will open an issue, Thanks

@myNameIsDu the chat here is quite dead, you probably want to open an issue on the repo: https://github.com/webpack/webpack/issues/new/choose , failing that, I've gotten some help from the reactiflux discord: https://discord.com/invite/reactiflux

@myNameIsDu

Hey, guys, I have a requirement to check whether the module exists at runtime and go back.Then i found magic comment Api webpackNode: "weak",
But sometimes it doesn't work,Here's example

I am sorry, this is webpackMode: "weak"

Eddie Cantu
@eddiecantu
With webpack and terser is it possible to get the same chunk filenames on dev and prod mode?
Would I be required to run terser in dev mode with chunkids: "named" ?
Florent Loenix
@loenix:matrix.org
[m]
Hello, I would develop a node package for my webpack project with some JS (Yarn + Webpack Encore + Symfony + Stimulus).
To develop it locally, the package is add by its local path on my file system using "file:", I run yarn watch, this is working properly.
But by developing locally, I would changes to be detected by webpack to compile the new changes.
Using "file:", yarn/node seems to create a copy of my sources, so It won't listen the sources for changes.
For this reason, I am running yarn upgrade @my/package --latest, then webpack is compiling again, ok, good, but nothing has changed in reality.
I have to kill the yarn watch, run yarn upgrade then run yarn watch, it's taking so much time ! (1minute ~)
I tried using link: but webpack is failing to compile.
How to develop webpack package locally ?
Florent Loenix
@loenix:matrix.org
[m]
:point_up: Edit: Hello, I would develop a node package for my webpack project with some JS (Yarn + Webpack Encore + Symfony + Stimulus).
To develop it locally, the package is added by its local path on my file system using "file:", I run yarn watch, this is working properly.
But by developing locally, I would changes to be detected by webpack to compile the new changes.
Using "file:", yarn/node seems to create a copy of my sources, so It won't listen the sources for changes.
For this reason, I am running yarn upgrade @my/package --latest, then webpack is compiling again, ok, good, but nothing has changed in reality.
I have to kill the yarn watch, run yarn upgrade then run yarn watch, it's taking so much time ! (1minute ~)
I tried using link: but webpack is failing to compile.
How to develop webpack package locally ?
Ally
@AllySummers

hia, i have a node module that has .svg files, i.e. @pkg/lib/svg/file.svg and i'm trying to import these as just a string (like the asset/source module rule does), however i can't seem to get anything to work for external/node modules - only relative ones.

how can i tell webpack to treat these as actual svg's, and not js/ts code?

this is the error i'm getting:

chunk (runtime: main) main.js (main) 4.44 KiB [entry] [rendered]
webpack compiled successfully (12dbe2b4c5152ac2)
Debugger listening on ws://localhost:9229/5929d9fa-ea2c-428e-9384-a6ed6ad34c76
Debugger listening on ws://localhost:9229/5929d9fa-ea2c-428e-9384-a6ed6ad34c76
For help, see: https://nodejs.org/en/docs/inspector
C:\Users\Ally\Documents\web\userscripts\node_modules\@material-design-icons\svg\sharp\forward_10.svg:1
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6v4l5-5-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8h-2z"/><path d="M10.9 16v-4.27h-.09l-1.77.63v.69l1.01-.31V16zm3.42-4.22c-.18-.07-.37-.1-.59-.1s-.41.03-.59.1-.33.18-.45.33-.23.34-.29.57-.1.5-.1.82v.74c0 .32.04.6.11.82s.17.42.3.57.28.26.46.33.37.1.59.1.41-.03.59-.1.33-.18.45-.33.22-.34.29-.57.1-.5.1-.82v-.74c0-.32-.04-.6-.11-.82s-.17-.42-.3-.57-.29-.26-.46-.33zm.01 2.57c0 .19-.01.35-.04.48s-.06.24-.11.32-.11.14-.19.17-.16.05-.25.05-.18-.02-.25-.05-.14-.09-.19-.17-.09-.19-.12-.32-.04-.29-.04-.48v-.97c0-.19.01-.35.04-.48s.06-.23.12-.31.11-.14.19-.17.16-.05.25-.05.18.02.25.05.14.09.19.17.09.18.12.31.04.29.04.48v.97z"/></svg>
^

SyntaxError: Unexpected token '<'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.Module._load (C:\Users\Ally\Documents\web\userscripts\packages\node\src\executors\node\node-with-require-overrides.ts:16:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-design-icons/svg/sharp/forward_10.svg (C:\Users\Ally\Documents\web\userscripts\dist\apps\youtube-extras\webpack:\userscripts\external commonjs "@material-design-icons\svg\sharp\forward_10.svg":1:1)

keeping in mind, it works perfectly fine if i import from e.g. ./file.svg, but not a node module.

2 replies
wulin5
@wulin5
我是第一次接觸,完全不懂,只能在旁看看2
vladimirlisovets
@vladimirlisovets
Hello Everyone
tusharmittal74
@tusharmittal74
Hello everyone, i tried to add nonce through attribute approach, in my angular project, but nonce is not adding in style tag, can anyone help, i m using webpack 4.30 version with angular 8
huakui
@huakuiiii
hi everyone
Eising
@allan:automate.network
[m]
Hi. I'm trying to figure out why a dependency of my vue project is throwing a weird webpack error, and I'm suspecting it's because the particular function imported from another dependency isn't part of the module export. The error I get is TypeError: leaflet__WEBPACK_IMPORTED_MODULE_0__.toLatLngBounds is not a function but toLatLngBounds is defined correctly in leafletjs. If anyone has any suggestions on where to look, I would appreciate it.
tusharmittal74
@tusharmittal74
Hi can anyone help me on above this?
davidrenne
@davidrenne

Hi everyone, I have a fairly complex webpack 5 script that works great on mac, and emits the files I expect (been lazy loading 5 years of code bloat now that I upgraded from react 15 to 16.14). Some of the dependencies of our react components were grouped into files automatically when I was lazy loading lots of pages in our app, so I setup various optimization->cacheGroups to accomodate the automatically grouped components that webpack was doing. Most of these worked and renamed to the file I wanted like for example:

        "components-store-misc": {
          chunks: 'all',
          name: 'components-store-misc',
          test(mod) {
            if (!mod.context || !mod.userRequest) {
              return false;
            }
            if (
               mod.userRequest.includes('store/checkbox.js') || 
               mod.userRequest.includes('store/velocityStoreLabel.js') ||
               mod.userRequest.includes('components/infoPopup.js') || 
               mod.userRequest.includes('components/search.js') || 
               mod.userRequest.includes('components/store/label.js') ||
               mod.userRequest.includes('components/components/infoPopup.js')
            ) {
              return true;
            } else {
              return false;
            }
          },
        }

Everything was working like a charm on mac osx (all groups that I specified were correct). But when compiling the same webpack on ubuntu 20.04 (our build server), it was not following the same configurations, so it output things like "430.js" on seemingly arbitrary dependencies (missed components that did not have dedicated lazy loaded files to go to).

My first question would be, why would webpack emit a numerical filename in ubuntu, vs a long name like javascript-components-componentName-ef54s.js. To resolve "javascript-components-componentName-ef54s.js" on the mac, I looked at what files it was wanting to group these dependencies in and created groups for them and things were happy. Several of these worked fine on the ubuntu side, but a few were problematic.

I have fixed my problem entirely and things are compiling properly on ubuntu now, but I wanted to understand more if someone knew about why webpack behaves different on different OSs. They are on the same webpack version too.

I added some email events when we compile our javascript to look for suspicious files because if webpack decides to compile 430.js or any numeric number, then when it hotloads the lazy component via a promise, it wont be there because we have to setup golang controllers to read these dist/ files for each emitted lazy loaded library/cacheGroup we have setup.

Thanks for listening to my long winded rant!

Jonathan
@jipis

More "not my code, code of a sub-dependency...":
The package cypress-react-selector tweaks the require function is used in a way in which dependencies cannot be statically extracted warning. It's not a fatal error, just annoying enough that I'm looking into it. I believe the specific call that's getting in the way is require.hasOwnProperty('resolve') in this

  const file = require.hasOwnProperty('resolve')
    ? require.resolve('resq')
    : 'node_modules/resq/dist/index.js';

Thoughts on a better way to do this, to be able to submit a PR for the maintainer to "fix" this?
Thx

Pasi Hirvonen
@pasih
when using module federation, if the remoteEntry endpoint returns a 301, the file itself is correctly loaded but all the deps loaded from thereon hit the original URL rather than the redirected one. I wonder if a) this is intentional (sounds somewhat bug-ish to me) and/or b) if there's a way to change this behaviour? In my specific case, I have a lambda at URL X which resolves package versions and then returns a redirect to the resolved version in S3 but all the subsequent requests still hit the lambda and I have to do "pass through redirects" which is not great.
Mark Kevin Besinga
@besingamkb
hello.. sorry for this stupid questions. i downloaded a react app from https://createapp.dev/webpack/react--babel--react-hot-loader--typescript and i want to build this to prod but without uglifying it.. is it possible?
Mahajan91
@Mahajan91
Hello, when I upgrade my application from react 16.2.0 to 18.0.2 then I get websocket connection failed issue. Because webpack-dev-server is not able to read the application port (we are using 5080 and it is reading 8080) please tell how to resolve that issue?
voltcode
@voltcode

Hello. I'm on lastest webpack 5. I'm currently moving from old gulp config to new webpack config but have troubles with dependOn functionality.
I'm using multiple entry points, some of which are used by other entries in dependOn lists.
all the bundles are generated, however I don't know how to generate bundle so that the top level entry is glued together with all dependencies pointed out in "dependOn" entries.
The top level entry does not have any exports, it just has dependOn with references to other entries and an empty "import" file - it exists but is entry

I target "web" - I tried the following libraryTargets, and added <script> tag to load the top level bundle (the one that pulls dependencies via dependOn). I also added html export plugin to see what is suggested.

  • var - nothing really happens - the top level file is requested in my HTML, but it doesn't pull the other files. If I copy paste script tags (mulitple ) from generated html to my file then it looks like only the last one is loaded (variable name is the same so it gets ovewrtitten, I guess)
  • assign-properties - - the top level file is requested in my HTML, but it doesn't pull the other files. If I copy paste script tags (mulitple ) from generated html to my file then it is much better - exports are expanded so that resulting object is useful. however, that requires me to manually list all the files as script tags - I really don't want that, because the list should be dynamically managed.
  • amd - I don't know what to use to require the modules. I don't really want to rquire modules at runtime becaause it would be a perfomance killer in my case.
is there a way to stick with dependOn but generate a single bundle?
or should I give up on dependon and use "index" files , define exports there ,etc. ?