Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 03:04

    dependabot[bot] on npm_and_yarn

    (compare)

  • 03:04
    dependabot[bot] closed #15218
  • 03:04
    webpack-bot labeled #15262
  • 03:04
    dependabot[bot] labeled #15262
  • 03:04
    dependabot[bot] opened #15262
  • 03:04

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump lint-stag… (compare)

  • 03:03

    dependabot[bot] on npm_and_yarn

    (compare)

  • 03:03
    dependabot[bot] closed #15233
  • 03:03
    webpack-bot labeled #15261
  • 03:03

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump simple-gi… (compare)

  • 03:03
    dependabot[bot] labeled #15261
  • 03:03
    dependabot[bot] opened #15261
  • Jan 26 20:02
    webpack-bot labeled #15259
  • Jan 26 20:02
    crodriguez-plitzi opened #15259
  • Jan 26 11:02
    alexander-akait reopened #15198
  • Jan 26 11:02
    alexander-akait closed #15198
  • Jan 26 09:49
    pavelsavara ready_for_review #15246
  • Jan 26 09:48
    pavelsavara synchronize #15246
  • Jan 26 08:36
    pavelsavara converted_to_draft #15246
  • Jan 26 08:27
    pavelsavara ready_for_review #15246
Nicolas Ramirez
@kamatheuska
mmm
I think so
let me try again :D
Nicolas Ramirez
@kamatheuska
shahankit783
@shahankit783
Hi All, having a small doubt . we are having mobile apk which uses webpack which eventually loads resources from localhost(on device) . we are using lighthouse for testing other stuff. but as its coming from local . file path is coming something like "/local/data/......" as its not http/https. I am not able to run light house . on this. So can any one guide how can I measure the rendering and other performance components with/without light house .
donaldmcn
@donaldmcn
I am working on a CreateReactApp based project, and we are upgrading it to version 5.0.0 of react-scripts (from 4.0.3)
In the older version, when running on localhost host, the dev server supported CORS preflight requests (i.e. an OPTIONS HTTP method with no trouble)
With react-scripts version 5.0.0, an OPTIONS HTTP method returns a 404, causing the CORS preflight request to file.
I have reproduced this by just building a default CRA project with both 4.0.3, and 5.0.0
In 4.0.3, I am able to do this: OPTIONS http://localhost:3000/logo192.png, and the response is 200 OK with GET, HEAD in the body.
In 5.0.0 the same request results in a 404 with the response containing the message: Cannot OPTIONS /logo192.png
Any ideas on how to enable this in the latest version of webpack dev server?
Dadakhon
@alisherfez32
57542beec43b8c601976e3c5.png
nuclear1989
@nuclear1989

Hello,

I tried searching around for this but couldn't find anything so i figured i would reachout here. Does anyone know if there is a performance difference below with webpack?

    module: {
        // Rules is an array because we can run more than 1 loader on our files
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
           }
]
    },
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader", "eslint-loader"]
    }
  ]
},
hf
@hf:kde.org
[m]
looks like the same to me... but a different question..
is the exclude: node_modules needed?
Sometimes i read that its automatically excluded with babel-loader, sometimes not
nuclear1989
@nuclear1989

Hey @hf:kde.org ,

I'm asking if there would be a performance difference having 2 rules vs one

Mathieu Savy
@Mathieuu

Hello webpack community, I upgraded my create-react-app from v4 to v5 which also bumped webpack from v4 to v5.

However, I noticed that the recompile time increased a lot after the upgrade and webpack 5 seems to be doing much more work than webpack 4.

When changing the same string in a tsx file:
Webpack 4 recompile logs gives: https://pastebin.com/aLmTNNq0
Webpack 5 recompile logs gives: https://pastebin.com/kJkZs2uQ

Anyone familiar with the main steps of recompilation could tell me if webpack 5 is supposed to do that much?

segetatomas84
@segetatomas84
Paypal
wilsonfurtado2000
@wilsonfurtado2000
can anyone tell if web pack will participate in gsoc 2022??
cartlon flores
@biljiczop_gitlab
we are trying to set up a proxy for cors with webpack, the proxy works for GET requests, but not for POST requests (it throws error 403 Forbidden), what could be the issue ? https://techzpod.com/ https://get-mobdrovip.com
Matt sevenone
@matt7122_gitlab
Hi Everybody. I'm doing my 1st webpack managed site.
I'm stuck on image minimization.
So far, I found one webpack plugin for it, image-minimizer-webpack-plugin
The choices are to use either imagemin*, which is officially unmaintained, or
squoosh, which is broken with image-minimizer-webpack-plugin.
Are there plugins that are better to use? Something that's supported?
This one is a "contrib" plugin. Is there an official project plugin that maybe I missed?
Diego Gullo
@bizmate
@matt7122_gitlab is this the one you are using? https://web.dev/codelab-imagemin-webpack/
Matt sevenone
@matt7122_gitlab
@bizmate No, this one, from "webpack-contrib",
https://github.com/webpack-contrib/image-minimizer-webpack-plugin
Matt sevenone
@matt7122_gitlab

Doing the examples I was able to track down,
Image minimizing with image-minimizer-webpack-plugin from @alexander-akait , using 'imagemin*'

optimization: {
  minimize,
  minimizer: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            "imagemin-pngquant",
            "imagemin-gifsicle",
            "imagemin-mozjpeg",
            "imagemin-svgo",
          ],
        },
      },

works great. But imagemin is unmaintained and the dev says to start using squoosh.

Image minimizing with 'squoosh'

optimization: {
  minimize,
  minimizer: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.squooshMinify,
        options: {
          encodeOptions: {
            oxipng: { level: 6, },
            mozjpeg: { quality: 100, },
            webp: { lossless: 1, },
            avif: { cqLevel: 0, },
          },
        },
      },

fails with errors like this

92% sealing asset processing TerserPluginfailed to compile wasm module: RangeError: WebAssembly.Instance(): Out of memory: wasm memory
failed to compile wasm module: RangeError: WebAssembly.Instance(): Out of memory: wasm memory
failed to compile wasm module: RangeError: WebAssembly.Instance(): Out of memory: wasm memory
failed to compile wasm module: RangeError: WebAssembly.Instance(): Out of memory: wasm memory
failed to compile wasm module: RangeError: WebAssembly.Instance(): Out of memory: wasm memory

node:internal/event_target:777
  process.nextTick(() => { throw err; });
                           ^
RangeError [Error]: WebAssembly.instantiate(): Out of memory: wasm memory
    at node:internal/deps/cjs-module-lexer/dist/lexer:1:33593
    at async initCJSParse (node:internal/modules/esm/translators:69:5)
    at async ESMLoader.commonjsStrategy (node:internal/modules/esm/translators:176:18)
    at async link (node:internal/modules/esm/module_job:67:21)
Emitted 'error' event on Worker instance at:
    at Worker.[kOnErrorMessage] (node:internal/worker:289:10)
    at Worker.[kOnMessage] (node:internal/worker:300:37)
    at MessagePort.<anonymous> (node:internal/worker:201:57)
    at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:562:20)
    at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)

I'm just looking for something that works AND is maintained.

Trif4
@Trif4
Does anyone use the proxy feature of webpack-dev-server on Node 17? Proxying API requests just gives me ECONNREFUSED. Downgrading to Node 16 works.
Curtis Maloney
@funkybob

So have recently modernised our webpack to the latest versions... and mostly it was smoother and simpler... however HMR isn't quite working any more.

That is, it triggers, and the page remounts (React app) ... but the code itself doesn't update. so I end up having to hit refresh anyway

Curtis Maloney
@funkybob
any hints on where to look or how to debug this?
Yathindra Kodithuwakku
@yathindrakodithuwakku

Hi everyone, I have a react application setup using webpack v5 without using cra. We are in the process of moving out our static content to a CDN including bundle js chunks generated using splitchunk plugin. As we have a plan using multiple cdn urls based on the env(dev, qa, stg, prd etc), tried a demo app using webpack_public_path https://webpack.js.org/guides/public-path/#on-the-fly as mentioned in the doc. But the custom public path is only taken for the lazy loaded js chunks. The initial js chunks and other static content is taken from the inital local path which is the default public path mentioned in the webpack config.

Any suggestions would be highly appreciated. :)

3 replies
Zi莱卷
@iwfan
image.png
Hi everyone, How can I do dynamic require in webpack 5?
image.png
I got this error.
Pls answer anyoner
karlos8
@karlos8
Hi everyone, I have the following webpack configuration and I using webpack 5.66. When I mangle the properties to true, I am getting an error based on gsap. Is it possible to exclude the vendors. js from mangle? Thanks in advance!
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
// terserOptions options will be passed to uglify-js
// Link to options - https://github.com/mishoo/UglifyJS#minify-options
terserOptions: {
compress: true,
mangle: {
properties: true,
},
},
}),
],
//https://dev.to/paulcodes/web-performance-case-study-webpack-splitchunks-3ek3
splitChunks: {
cacheGroups: {
vendors: {
// test: /[\/]node_modules[\/]/,
      test: /[\\/]node_modules[\\/](gsap|locomotive-scroll|lodash|vanilla-lazyload|events)[\\/]/,
      // chunks: 'initial',
      filename: "vendors.js",
      //priority: 1,
      //maxInitialRequests: 2,
      //minChunks: 4, // count of entries
      name: "vendors",
      chunks: "all",
    },
  },
},
karlos8
@karlos8
the error: vendors.js:formatted:2550 Uncaught TypeError: Cannot read properties of undefined (reading 'ge')
mehmetcozdemir
@mehmetcozdemir
hello, I want to copy webpack cache folders (specified with cache.cacheDirectory) between different folders. Our CI runs stuff in parallel on multiple PRs of same repo, so if I can copy cache between them and get it to work, it would reduce build times a lot. As an initial try, I copied my current project to another folder so I have two completely identical projects under different folders. I ran webpack build on one and copied the created cache to other folder. Then, I ran webpack build in other folder but judging from build times, cache did not work at all. I don't have any idea currently how to debug it or if it's supposed to work at all, any help or pointers for me to dive deeper would be appreciated.
Fredrik Gustafsson
@iveqy
hi!
I tried to upgrade webpack, big mistake... I solved all deprecated stuff in my config files and now I get 404 when trying to use webpack dev server:
https://pastebin.com/AT69Tw6A
David Leangen
@dleangen
Are you trying to access a path that does not end with .html?

If so...

I had the same problem. So did somebody else, apparently: https://stackoverflow.com/questions/70011373/how-to-configure-webpack-dev-server-to-serve-extensionless-files-as-text-html

Unfortunately it looks like there are not enough people suffering from this issue to care enough about it. 🤷‍♂️

As a workaround (hopefully temporary, but the longer time drags on it is becoming permanent), I just stopped using the webpack-dev-server all together.

CodeBeast
@TopCodeBeast
HI
I've got this error when I run yarn serve.
Module parse failed: Unexpected token (6:27) 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 | export const packageInfo = { | name: '@polkadot/x-ws', > path: new URL('.', import.meta.url).pathname, | type: 'esm', | version: '8.3.2' @ ./node_modules/@polkadot/x-ws/browser.js 4:0-47 4:0-47 @ ./node_modules/@polkadot/rpc-provider/ws/index.js @ ./node_modules/@polkadot/rpc-provider/bundle.js @ ./node_modules/@polkadot/rpc-provider/index.js @ ./node_modules/@polkadot/api/bundle.js @ ./node_modules/@polkadot/api/index.js @ ./src/utils/vue-api2/Api.ts @ ./src/utils/vue-api2/index.ts @ ./src/main.ts @ multi (webpack)-de
Glenn Hope
@MrAwesome
Quick, possibly crazy, question: is there a way to have webpack use code that was just compiled as part of the build as a plugin in a later phase of the build? I have some validation logic in Typescript that I'd like to share between my end code, and a plugin used as part of the build for that code. (Specifically, if certain checks fail, I'd like to fail my build.)
Austin Erlandson
@erlandsona
Hey y'all... having trouble with webpack 5's filesystem caching w/ elm-webpack-loader.
Not sure how to ensure the cache is properly busted for changes to .elm files?

2nd question, currently I have to use a stub javascript file to get the properly compiled output for Elm... EG: src/App.js

import { Elm } from 'src/App.elm'

window.Elm = Elm

I'd like to be able to use the library config for entries but can't seem to get it to be have like the above.

Also even cached builds (even in mode: 'development') seem to take approx 10-20 seconds to complete even with no changed files... is there anything specific I can dig into to improve that?
Uriel Avalos
@frankandrobot
issue: using webpack4 to build a library and excluding redux toolkit via externals: { '@reduxjs/tooklkit': '@reduxjs/toolkit' }. It builds the library just fine but when I try to use it in an app that does have redux-toolkit as a dep, I get the error Invalid or unexpected token. It's failing where the library tries to import redux-toolkit.
1 reply
John Winston
@winston0410
Hi, How can I ignore a LICENSE file in webpack?
ERROR in ./node_modules/next/dist/compiled/@vercel/nft/LICENSE 1:10
Module parse failed: Unexpected token (1:10)
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
> Copyright 2019 Vercel, Inc.
|
| Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 @ ./node_modules/next/dist/compiled/@vercel/nft/ sync ^\.\/.*$ ./LICENSE
 @ ./node_modules/next/dist/compiled/@vercel/nft/index.js 1:832-847 1:3004-3019
 @ ./node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js 8:11-52
 @ ./node_modules/next/dist/build/webpack-config.js 29:34-92
 @ ./node_modules/next/dist/server/dev/hot-reloader.js 13:44-81
 @ ./node_modules/next/dist/server/dev/next-dev-server.js 29:42-67
 @ ./node_modules/next/dist/server/next.js 107:30-70
 @ ./_lambda.js 2:12-27
Should I use a file-loader?
anfrank4444
@anfrank4444
Hello everyone I'm looking to create a html questionnaire form. The first question basically decides the fate of the questionnaire. Basically if you answer yes for question one you get survey 1, if you answer no you get survey 2. Anyone can help me structure this? Looking to use html, css, javascript
Carlos Rodriguez
@crodriguez-plitzi
hi, anyone knows about this webpack/webpack#11811 ?
Eric L. Hepperle
@codewizard13
New to Gitter and don't understand chat rooms very well ... so please bear with me.
Wondering if anyone has had issues with hot module replacement (HMR) not working in webpack-dev-server?
1 reply