Where communities thrive


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

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump terser fr… (compare)

  • 03:10

    dependabot[bot] on npm_and_yarn

    (compare)

  • 03:10
    dependabot[bot] closed #16686
  • 03:10
    webpack-bot labeled #16698
  • 03:10
    dependabot[bot] labeled #16698
  • 03:10
    dependabot[bot] opened #16698
  • Feb 03 16:36
    FadiShawki closed #16694
  • Feb 03 15:57
    webpack-bot labeled #16694
  • Feb 03 15:57
    FadiShawki opened #16694
  • Jan 31 03:02

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump terser fr… (compare)

  • Jan 31 03:02

    dependabot[bot] on npm_and_yarn

    (compare)

  • Jan 31 03:02
    dependabot[bot] closed #16536
  • Jan 31 03:02
    webpack-bot labeled #16686
  • Jan 31 03:02
    dependabot[bot] labeled #16686
  • Jan 31 03:02
    dependabot[bot] opened #16686
  • Jan 31 02:24
    weareoutman edited #16685
  • Jan 31 02:24
    webpack-bot labeled #16685
  • Jan 31 02:24
    weareoutman opened #16685
  • Jan 27 20:06
    thomastay synchronize #16671
  • Jan 27 03:11

    dependabot[bot] on npm_and_yarn

    (compare)

jackthomsoneve
@jackthomsoneve
I can't understand the major things on the .pack files? does it takes more file sizes and got heavy things up. I am delivering https://www.theresearchguardian.com/services/thesis/mphil-thesis-help/ to the students of Mphil and Master who eagerly need for it.
trevorgithub
@trevorgithub

I'm using module federation and promised based dynamic remotes (https://webpack.js.org/concepts/module-federation/#promise-based-dynamic-remotes). Everything is working as I'd like, except I'm seeing the output of my promise function in the build output. Is there any way to suppress that?

Here's partial webpack build output, after using the sample promised based dynamic remote in the docs.

remote app1/Component 6 bytes (remote) 6 bytes (share-init) [built] [code generated]
external "new Promise(resolve => {\n                    const urlParams = new URLSearchParams(window.location.search)\n                    const version = urlParams.get('app1VersionParam')\n
// This part depends on how you plan on hosting and versioning your federated modules\n                    const remoteUrlWithVersion = 'http://localhost:3001/' + version + '/remoteEntry.js'\n
  const script = document.createElement('script')\n                    script.src = remoteUrlWithVersion\n                    script.onload = () => {\n                      // the injected script has loaded and
 is available on window\n                      // we can now resolve this Promise\n                      const proxy = {\n                        get: (request) => window.app1.get(request),\n
     init: (arg) => {\n                          try {\n                            return window.app1.init(arg)\n                          } catch(e) {\n                            console.log('remote containe
r already initialized')\n                          }\n                        }\n                      }\n                      resolve(proxy)\n                    }\n                    // inject this script w
ith the src set to the versioned remoteEntry.js\n                    document.head.appendChild(script);\n                  })\n                  " 42 bytes [built] [code generated]

webpack 5.72.1 compiled with 1 warning in 23906 ms
Done in 27.52s.
1 reply
Emilio Barrientos
@eaemilio
CleanShot 2022-11-14 at 12.49.47.png
Hi y’all, I have an AngularJS application being built with webpack and then being served by an IIS app Pool, I’m upgrading it to angular 14 with a hybrid approach (angular/angularjs), I’m using @ngtools/webpack to compile ts files, but I’m getting this after webpack’s build, any ideas?
Tony Lobbin
@elitesuper
Please help me, Files couldn't upload.
I think getMockSenderEnhancer had some problem.
import React, {useState} from 'react';
import Uploady, {useItemProgressListener, useItemFinishListener} from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";
import UploadButton from "@rpldy/upload-button";
import { getMockSenderEnhancer } from "@rpldy/mock-sender";

const LogProgress = () => {

    const [progress, setProgess] = useState(0);
    const progressData = useItemProgressListener();

    if (progressData && progressData.completed > progress) {
      console.log(progressData);
      setProgess(() => progressData.completed);
    }

    return null;
}
const mockSenderEnhancer = getMockSenderEnhancer({
    delay: 1500
 });

function CollectionUpload(props:any){

    const nativeProps:any = { webkitdirectory: 'true' };

    const customIsSuccess = (xhr:any) => [308, 418].includes(xhr.status);

    return(
        <div className="row">
            <div className="row">
                <Uploady isSuccessfulCall={customIsSuccess} destination={{url: "http://localhost:5000/upload"}} {...nativeProps} enhancer={mockSenderEnhancer}>
                    <UploadDropZone
                      className="collection-upload-field"
                      onDragOverClassName="drag-over"
                      htmlDirContentParams={{ recursive: true, withFullPath: true }}
                    >
                    <div className="upload-drop-zone">
                        <div className="upload-info">
                            <h5>Drag and drop or browse to choose your collection folder</h5>
                            <UploadButton text="Choose files..." className="voomio-btn btn-filled"/>
                        </div>    
                    </div>    
                    </UploadDropZone>
                    <LogProgress />
                </Uploady>
            </div>
        </div>
    )
}

export default CollectionUpload;
Farooq Karimi Zadeh
@farooqkz

Hello. I get this error when trying to compile:

Conflict: Multiple chunks emit assets to the same filename static/js/bundle.js (chunks main and runtime)

Here's my config:
https://pb.vern.cc/?cf421f29efc46fb2#4ZpBAu9Ekquv8o9ceLn5we8t6Euw5NyCvYXXN4cjKZ8x

I need to know why this happens and how to fix it.

Farooq
@farooqkz:mozilla.org
[m]
That problem seems to be solved by using fullhash in filename. However another problem has been found:
Failed to compile.

Module not found: Error: You attempted to import /home/farooqkz/playground/chooj/node_modules/babel-preset-inferno-app/node_modules/@babel/runtime/helpers/esm/classCallCheck which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Farooq
@farooqkz:mozilla.org
[m]

I think that has been solved, too. Now the problem is:

Failed to compile.

Error: [BABEL] /home/farooqkz/playground/chooj/src/index.js: Unknown option: .config. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

Is it related to webpack? or perhaps I must ask in babel community?

anhchangvt1994
@anhchangvt1994

I have issue when use style-loader with experiments.lazyCompilation

index.jsx
import '/style/a.css'
import '/style/b.css'

npm script : webpack --mode development

Normal Case (turn off experiments.lazyCompilation)

Both styles are inserted on page (That OK)

LazyCompilation Case (turn on experiments.lazyCompilation)

  • Just style of "b.css" is inserted
  • Let use styleTagTransform of style-loader to test progress
    (css, style) { 
    if(!window.prevStyle) {window.prevStyle = style} 
    else if(window.prevStyle === style) {
      console.log('current style tag is same prev style tag!')
    } 
    style.innerHTML = `${css}` 
    }
    then I figure out that the style element created in style-loader for both .css files is same (notice that I use injectType: "style tag" not singletonStyleTag), And after I reloaded the page (after first lazy compile) both style worked right -> When I use experiments.lazyCompilation with import 2 styles or more, I must reload the page after first lazy compile to work right
mjnd88
@mjnd88

hello friends

I'm using scapy what is the difference between : padding() and nzpadding() i get the same result from both functions i don't know where the difference is

Nate Von Benken
@nvonbenken

Hi all, I have a quick question on module federation I hope you can help with.

When are modules loaded? Is it done on server side when the makes a request to the site and the whole bundle is pulled down or is the "host" bundle received by the browser and then the modules are fetched? Just trying to determine how many round trips to the server are done.

Matt Russell
@mattrussell-sonocent

Hi, hoping for some advice. I added a dependency (serialize-error) to a Webpack 5 project, and the build now fails:

ERROR in serviceWorker.js from Terser plugin
Minimizer doesn't return result

It's proving complex to try and extract a minimal reproducible example, but I can work on that. In the meantime, can anyone recommend how I might diagnose this further? There's not much to be found by Googling the error. Is it possible to get the minimizer to emit error / logging information?

golombi
@golombi
Harrison Evans
@hevans90
Hey, I just updated a project I am working on and an underlying webpack.config.js got its scriptType changed from 'text/javascript' to 'module'. This appears to have broken web-workers using import.meta.url as I now get Cannot use 'import.meta' outside a module when trying to create a web worker using the recommended webpack 5 syntax... anyone have any idea?
export const worker = new Worker(new URL('./worker.ts', import.meta.url)); <-- this is how the webpack docs say to use workers, and this was working fine until my webpack config got changed as stated
Evan Raffel
@evman182
I'm trying to build an ESM package, and I understand that in theory imports within the package should use .js, but I'm wondering how react-bootstrap gets away without that, because they have an ESM package and the files in there don't use imports with the extensions
Evan Raffel
@evman182
I think the answer is that react-bootstrap didn't build an ESM package, they built a CJS package and put it in a folder named ESM. nvm
George Eracleous
@giorgosera

Hey everyone. I'm getting a compilation error when I try to compile a file which exports modules using the syntax export * as someName. I described the issue here: https://stackoverflow.com/questions/74717884/webpack-compilation-error-using-cypress-and-nx

Can someone please help me?

Alex-1557
@Alex-1557
my project dead more than week. What is sophisticated system? Is really nobody in world can not repair it? How is possible at all don't recognize what is .PNG file and what is .CSS file and how is possible to processing .PNG file as .CSS? Is developer of WebPack still alive?
long76
@long76
hello how setup source map for TS project for stacktrace only? i'm trying hidden-source-map but i got http://localhost/bundle/form.debug.js:202367:17(like if i dont use source map) instead of webpack-internal:///./src/main/tsx/components/filter.tsx:66:17 if use eval-*(in this case eval-nosources-source-map) in tsconfig sourcemap enabled, using ts-loader, webpack 5
9 replies
Amy! (She/They)
@0x41amy:matrix.org
[m]
webpack will always be my oomfie
jack the reaper
@Jak_jaqe_twitter
Hello everyone, sorry to disturb you. I just wanted to let you know that I can be your mentor in programming matters. Feel free to chat privately. Thank you.
timbioz
@timbioz_gitlab

Hi! Can't save generated images in folders relevant to they width with Webpack Imagemin plugin. Trying to generate images to different sizes and formats. Something like this:

<picture>
  <source
    media="(min-width: 576px)"
    srcset="./src/img/slide.jpg?width=540"
    type="image/jpg"
  />
  <source
    media="(min-width: 960px)"
    srcset="./src/img/slide.jpg?width=900"
    type="image/jpg"
  />
  <source
    media="(min-width: 576px)"
    srcset="./src/img/slide.jpg?as=webp&width=540"
    type="image/webp"
  />
  <source
    media="(min-width: 960px)"
    srcset="./src/img/slide.jpg?as=webp&width=900"
    type="image/webp"
  />
  <img src=".src/img/slide.jpg" alt="slideer image" />
</picture>

Images should saved in folders relevant to they width. E.g:

I try to use filename option in plugin settings

const path = require("path");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/index.ts",
  },
  mode: "development",
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
    pathinfo: true,
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: "html-loader",
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: "asset/resource",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 10kb
          },
        },
        // If i don't use this generator option, images saved in root (dist) folder -> dist/6gj86ddgt36jjy78.jpg
        generator: {
          filename: "example/[name]-[hash][ext]",
        },
      },
    ],
  },

  optimization: {
    minimize: true,
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          // Using this option (with filename: in loader above) saves as -> dist/example/generated-slide-540-6gj86ddgt36jjy78.webp
          // --- images/[width] is ignored and folder name comes from loader options
          filename: "images/[width]/generated-[name]-[width][ext]",
          implementation: ImageMinimizerPlugin.sharpMinify,

          options: {
            encodeOptions: {
              // ....
            },
          },
        },
        generator: [
          {
            // Adding this option not worked too..
            // ---
            // filename: "images/[width]/generated-[name]-[width][ext]",
            preset: "webp",
            implementation: ImageMinimizerPlugin.sharpGenerate,
            options: {
              encodeOptions: {
                webp: {
                  // ....
                },
              },
            },
          },
        ],
      }),
    ],
  },
};

What i am doing wrong?

P.S. I don't wont to use Imagemin plugin as Standalone loader because plugin docs

Mohamed Chaabene
@Masked_Face_007_twitter
Hi everyone , what's the difference between <a href="/html/default.asp">HTML tutorial</a> and <a href="html/default.asp">HTML tutorial</a>
Alex-1557
@Alex-1557

This is repository with my Angular frontend (part of full frontent with error) https://github.com/Alex-1557/ErrorModuleParseFailed

When I try to compile this Angular frontend I receive

./src/app/css/img/mini-logo.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile

Can somebody understand how to fix this issue? I have a couple advice, for example to add webpack.config.js (and other advice) but none of them is working.

dimtabu
@taburetkin
guys, how can i tell webpack5 to write all module resolution steps into console when module not found occurs?
is there a way?
gitexp2050
@gitexp2050

How to define hours for this javascript player? Need help......

I want to specify an audio with 08:56:35 => 8 hrs, 56 mins and 34 seconds

The following lyrics has example for minutes, but not sure about hours or how to define.

Can someone help me on how to define for hours?

  1. Javascript: https://github.com/lusaisai/Lyricer/blob/master/lyricer.js
    Source: https://github.com/lusaisai/Lyricer
    Example for minute: https://github.com/lusaisai/Lyricer/blob/master/index.html (03:54.84)

  2. Javascript: https://guoyunhe.github.io/rabbit-lyrics/
    Source: https://github.com/guoyunhe/rabbit-lyrics
    Example for minute: [03:27.19]

gerges
@gerges_twitter
Do any webpack devs hang out in here? Trying to reason about the safety of force resolving webpack-sources to 3.2.3 for webpack v4. As far as I can tell its API compatible, aside from the removal of LineToLineMappedSource
The time savings I see in our build is profound and a v5 upgrade is in the works but it will take a bit. It's mostly from the removal of @mozilla/source-map
Andrei Gladkov
@AndreyGladkov
Hello, who can look at the bugfix?
issue: webpack/webpack#16626
pr: webpack/webpack#16625
It is bugfix in moduleFedirationPlugin.
Вадим Бударин
@budarin

Hi!
I have a babel plugin which inserts import of helpers
After building the project using webpack with babel-loader, there are several original require instructions left in the code

const { something } = require('/path-to-a-module')

Why?
What to do?

Вадим Бударин
@budarin

some of the imports are normally translated into calls

const { aHelper: _h } = __webpack_require__(1930),

and the part remained in the original

Colin Ryan
@ColinRyan
Hi, I'm trying to use lazyCompilation and I'm getting cors errors. I see this PR was merged webpack/webpack#15121 recently. Wondering if there's a way to access a nightly version of webpack or something like that so I can check and see if this fix works for me. Any tips?
Luciano Graziani
@lgraziani2712

Conceptual question here: does webpack interprets each module export as an atomic identity, isolated from other exports, or the module IS the atomic element?
I have this situation:

  • Module A exports 3 functions: X, Y and Z. X is a pure function, and doesn't use any import, but Y and Z are not pure, and they have lot of complexity and imports that make the module enormous.
  • Module B imports X (entrypoint nº1)
  • Module C imports Y (entrypoint nº2)
  • Module D imports Z (entrypoint nº3)

To webpack, this means that module A doesn't have deadcode, so it won't remove anything, but the question is: entry point nº1 will have the entire module A in its chunk and that's OK and expected, right?

deliteser112
@deliteser112:matrix.org
[m]
Hello everyone
I have some issues regarding to add the webpack into meteor project..
Saujan Ghimire
@sookah
Hi guys, I am having issues migrating legacy js files that uses a global declaration (non esModules) into webpack flow. I have managed to bundle all js in the folders and minify, but the global object declaration that the different files were calling seems to be now out of scope. I have looked into shimming but I am not sure if that is the right way to access this global variable for each file. (It is in plan to make the company move to esm eventually but legacy support should be maintained). Any help or article on the topic please.
David Godfrey
@dgodfrey206

I'm trying to add an SSL certificate to my web server. I did it the recommended way. I used a self-signed certificate AND I tried using a certificate from CloudFlare and Let's Encrypted. What happens is that my page doesn't load. I get an error saying that no data was returned. I'm using a webpack config file and I used the https property.

https: {
cert: fs.readFileSync('/etc/letsencrypt/live/mysite/fullchain.pem'),
key: fs.readFileSync('/etc/letsencrypt/live/mysite/privkey.pem')
}

The paths provided are what Let's Encrypt gave me. I start the server and try to connect and I get something like ERR_EMPTY_RESPONSE from Chrome.

I also tried using an origin certificate from Cloudflare. Same thing.

I made sure my server has the right ports open, that I'm using the right address. I have no clue what's wrong.

Any suggestions?

tommypatel
@tommypatel
Hello, I wanted to thank you for sharing this useful material. What is more, some of the tips that are provided here are really great. They will be useful for those who are not so good at programming and coding, like me as an example. From my point of view, I could help you in resume writing. On a behind of my company let us help now in case you need some sort of assistance
dimtabu
@taburetkin
guys, is there a way to send webpack build console output to a file?
Stephen Puthenpurackal
@datfoosteve
Having issues with webpack loaders going from webpack 4 to 5? i think?

const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')

module.exports = withNextra({
pageExtensions: ['jsx', 'js', 'md', 'mdx'],
generateEtags: false,
webpack: (config, options) => {
config.resolve.alias = {
...config.resolve.alias,
}
config.module.rules.push({
test: /.md$/,
use: 'raw-loader',
})
return config
},
env: {
customKey: 'value',
},
})

i checked documentation, and with webpack 5, it says "raw-loader to import a file as a string" i just do not know what im doing,

root ➜ /com.docker.devenvironments.code (main ✗) $ yarn run build
yarn run v1.22.19
$ node ./scripts/gen-rss.js && next build
info - Checking validity of types
warn - No ESLint configuration detected. Run next lint to begin setup
info - Creating an optimized production build
Failed to compile.

./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts%2Fpages&absolutePagePath=private-next-pages%2Fposts%2Fpages.md!
Module not found: Can't resolve 'raw-loader' in '/com.docker.devenvironments.code'

./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts%2Fpassion&absolutePagePath=private-next-pages%2Fposts%2Fpassion.md!
Module not found: Can't resolve 'raw-loader' in '/com.docker.devenvironments.code'

./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts&absolutePagePath=private-next-pages%2Fposts%2Findex.md!
Module not found: Can't resolve 'raw-loader' in '/com.docker.devenvironments.code'

./pages/index.mdx
TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:387:5)
at validateString (node:internal/validators:121:11)
at Object.relative (node:path:1191:5)
at loader (file:///com.docker.devenvironments.code/node_modules/nextra/dist/loader.mjs:85:42)

./pages/photos.mdx
TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:387:5)
at validateString (node:internal/validators:121:11)
at Object.relative (node:path:1191:5)
at loader (file:///com.docker.devenvironments.code/node_modules/nextra/dist/loader.mjs:85:42)

webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

wajeehsf
@wajeehsf

Hello guys.

I am looking for a way to to easily refer HTML modules from within my index.html page. Is that possible using webpack?

For example,

I want to write in my index.html file the following,

<body>
<header/>
<banner/>
<services/>
<clients/>
<footer/>
</body>

where header, banner, services etc. are separate html files .

Is this possible to be done using webpack?

I ve looked at Html loader and Webpack Html plugin, but it does not seem I can use these to achieve what I want.

Can someone help?

noblebright
@noblebright
I just upgraded a working CRA project, and got: BREAKING CHANGE: The request 'react-bootstrap/Table' failed to resolve only because it was resolved as fully specified
The thing is, this isn't a .js or .mjs file, it's a separate package.json coming from node_modules. How the heck do I massage import Table from "react-bootstrap/Table"; so webpack will be happy?