Where communities thrive


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

    sokra on main

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

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

    sokra on main

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

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

    sokra on main

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

  • Jul 01 10:18

    sokra on main

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

  • Jul 01 10:18

    sokra on up-enhanced-resolve

    (compare)

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

    sokra on main

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

  • Jul 01 08:39

    sokra on moduleId-prop

    (compare)

  • Jul 01 08:39
    sokra closed #16005
Amit Beckenstein
@amitbeck
Hey guys, I'm experiencing an issue with modules imported for side effects not being included in the bundle. I read the tree shaking docs, added "sideEffects" to my package.json and even tried adding a rule with sideEffects: true but to no avail. Can anyone help? More details in my SO question (https://stackoverflow.com/questions/72390897/why-are-these-modules-imported-for-side-effects-not-included-in-webpack-bundle). I also commented on a similar issue in GitHub asking a webpack team member for help.
codemonkeynorth
@codemonkeynorth
Hi, what are people using to minify/clean SVG please? I'm using @chiiya/laravel-mix-image-minimizer with Laravel Mix because i heard imagemin was no longer being maintained? but i don't think it has svg support? would i just add something like SVGO?
anushka-23g
@anushka-23g
Sharing 5 Developer Productivity Websites Frontend Devs Need to Know- https://javascript.plainenglish.io/5-developer-productivity-websites-frontend-devs-need-to-know-7e1455f0ef0f
Administratordes
@Administratordes
Kindly open this live chat to talk to the customer service directly on your price and wallet issue https://direct.lc.chat/14157678/
Junaid Ramzan
@ajuni880
Hi all, i am having this problem with webpack build. The project is built with react and typescript, and bunlded with ts-loader but somehow it fails on windows. It works fine on mac. I am unable to find a solution.
Any idea what it could be?
./src/webview.tsx 720 bytes [built] [code generated] [1 error]
  ERROR in ./src/webview.tsx 7:12
  Module parse failed: Unexpected token (7:12)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | import { renderWebview, React } from './webview/index';
  | 
  > const config: StaticConfig = {
  |  
  webview (webpack 5.72.1) compiled with 1 error in 3387 ms
Administratordes
@Administratordes
Kindly open the livechat link to rectify that
Ghost
@ghost~6297725e6da037398497bf65
Hi.
Can you please try to help me with this one?
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. ?