webpack/webpack

For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).

Clément Oriol

@clementoriol

I'm struggling with understanding cache for resolvers, could anyone point me to the right direction ?

Peter Kieltyka

@pkieltyka

hi there, it seems a dependency im trying to install must have node support as well as browser support as im getting the polyfill warning, - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' -- do I have to install this polyfill, or can I just specify i don't want any node functionality. Ideally the dependency itself is written at runtime to determine if its running in node or browser and it will execute accordingly so I don't need to include pointless polyfills..? am I thinking about this wrong or what is the right approach? thank you

Peter Kieltyka

@pkieltyka

is there perhaps a dependency out there to help package these polyfills? although i appreciate webpack 5 doesn't do it automagically anymore, its a lot of extra boilerplate to support this in projects. ie. duplotech/create-react-app@d0be703

i found, https://www.npmjs.com/package/node-polyfill-webpack-plugin

im surprised this isn't discussed more in docs / guides..? feels like it would be one of the biggest blockers for anyone upgrading

Peter Kieltyka

@pkieltyka

i blame some of my child dependencies, as I presume they are doing something wrong because I shouldn't need any node polyfills, they should be handling that a the library level. However, in order to solve it I had to add to my webpack config:

new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }), new NodePolyfillPlugin()

.. which feels like should be closer to the core of webpack 5 configuration environments. But if someone has other thoughts or advice on how to think about this problem, i'd be grateful. thanks

ttumzzi

@ttumzzi

Hi! Now I am using webpack v5.4.0 with WDS v3.11.0, and I got '[WDS] disconnected!' error. But when I lower the webpack version to 4.44.2, It works!! Is there anyone who has a same problem like me??

01Kuzma

@01Kuzma

Hi! Can't combine all css assets into one file. Could someone answer how to change the config? All information is provided here: https://stackoverflow.com/questions/64879223/webpack-5-compress-and-minify-js-and-css-assets

Decade

@decadef20

I am using module federation. If remote modules load failed, How do I catch the error?

1 reply

Peter Todd

@xinaesthete

Hi! Can't combine all css assets into one file. Could someone answer how to change the config? All information is provided here: https://stackoverflow.com/questions/64879223/webpack-5-compress-and-minify-js-and-css-assets

Your link doesn't work for me FYI. Not sure how likely it is that I could help (apart from pointing that out).

I can't seem to get librarTarget: 'module' working https://stackoverflow.com/questions/64927708/webpack-librarytarget-module-generates-code-with-return-outside-of-functio - may be a bug? Help appreciated.

Pascal Brewing

@DrMabuse23

i have a questoin i have a porblem with const meta = webpack_require("ba15");

i have to seperated component and two bundles

and bot have this inside const meta = webpack_require("ba15");

but the seconde component get the value from the first one

is it possoble to add something like a prefix ?

using webpack4

and vue-cli

sevor005

@sevor005

Good evening! I have a question. I use exports-loader in my project together with webpack. ProvidePlugin. The thing is, I used to be able to get to PureComponents like this
webpack.ProvidePlugin({ PureComponents: 'exports-loader?React.PureComponents!react', })

now this construction doesn't work. I guess because of the dot? How should I use it now?

Abhay Gupta

@akgupta0777

Hello Everybody I want to contribute to Webpack but got overwhelmed after seeing issues . Is there any guide or anything that might help me understand How Webpack works and understand codebase. I am a MERN Stack Web Developer.

aerialls

@aerialls_gitlab

Hello 👋🏻 I've a question with webpack-cli from v3 to v4. I was using --output-public-pathin the CLI parameter in v3.3.13 and it's not working anymore in the v4 (Unknown argument). I found nothing on the changelog and no issues at all. I'm wondering if I need to use another parameter? Thanks a lot!

john01dav

@john01dav_gitlab

I'm new to frontend development, and the first tool that I worked with was Parcel since it has sane defaults — I just write my code and it more or less works instantly, and I want to be productive. I had to stop using it, however, as it's a buggy mess and there are hintings of incompetent developers (e.g. They broke CI, only one user now has access, and have no idea how to fix it, it seems. I'd be happy to be proven wrong though, if a solution to the bugs that I encountered were provided, since it's otherwise a very nice tool.) As I go through the guides in Webpack's documentation, I'm finding that it is more or less a guide to set it up to do what Parcel does by default. As such, I'm wondering if there's any more automatic way to get this functionality, either through some plugin or something that adds it or a default configuration that I can use to base my projects off of. Of course, an exact replica of parcel's functionality isn't needed, but something reasonably complete wrt the features that it supports is best.

Emanuele Biancardi

@goffreder

Hello :wave: I have a question regarding the upgrade from v3 to v4. After the upgrade, I've started to get a TypeError: Cannot call a class as a functionfor all my react components. I was indeed using components defined as classes as if they were function, but since that check was not failing with webpack v3 (and I haven't changed anything else), I'm wondering why it has started to happen with v4 and if there's a way to keep the old (probably undocumented if not plain wrong) behavior. I'm using babel v6 and babel-loader v7. Thanks! :pray:

1 reply

meer

@mirnumaan

hi i am numaan bashir mir and i am interested for contributing in your open source project based on js and python .So I would like to participate in GSoC 2021 with webpack, can u help me how to start ?

Ronny Ko

@gogo9th

Hi, I wonder if there is a way to use webpack to convert the contents of multiple <script type='module'> tags into contents of a single <script type='text/javascript'> tag. My goal is to run the contents of <script type='module'> tags in a non-strict mode. Because <script type='module'> tags are forced to be in a strict mode, I need to change the type of these script tags from 'module' to 'text/javascript'. However, simply re-writing the script tag's type causes an error, because we cannot use import/export insde a non-module-typed script tag. Therefore, I need to convert the contents of these module-typed script tags into the ones compatible with text/javascript-typed script tags. For example, suppose I have the following webpage:

. . . and suppose I do not know if 'module-entry1.js' and 'module-entry2.js' are the entry points that use 'module.js'. Then, what webpack command should I run to convert this webpage into the following (which converts the type of script tags from 'module' into 'text/javascrip't):

Eric Zarowny

@ezarowny

Hey folks, getting a weird error only on Linux when I try and do a production build with webpack 5. The same build works fine on macOS. I've narrowed it down to including css-minimizer-webpack-plugin.

(node:1988) UnhandledPromiseRejectionWarning: Error: "version" is a required argument.
    at Object.getArg (/home/deploy/everloved/node_modules/source-map/lib/util.js:24:11)
    at new BasicSourceMapConsumer (/home/deploy/everloved/node_modules/source-map/lib/source-map-consumer.js:294:22)
    at new SourceMapConsumer (/home/deploy/everloved/node_modules/source-map/lib/source-map-consumer.js:22:7)
    at SourceMapSource.node (/home/deploy/everloved/node_modules/webpack/node_modules/webpack-sources/lib/SourceMapSource.js:193:4)
    at exports.getSourceAndMap (/home/deploy/everloved/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:20:27)
    at SourceMapSource.sourceAndMap (/home/deploy/everloved/node_modules/webpack/node_modules/webpack-sources/lib/SourceMapSource.js:184:10)
    at getTaskForFile (/home/deploy/everloved/node_modules/webpack/lib/SourceMapDevToolPlugin.js:78:30)
    at /home/deploy/everloved/node_modules/webpack/lib/SourceMapDevToolPlugin.js:265:22
    at /home/deploy/everloved/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/home/deploy/everloved/node_modules/tapable/lib/HookCodeFactory.js:1:1), <anonymous>:6:1)
    at emitUnhandledRejectionWarning (internal/process/promises.js:168:15)
    at processPromiseRejections (internal/process/promises.js:247:11)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)
(node:1988) Error: "version" is a required argument.
    at Object.getArg (/home/deploy/everloved/node_modules/source-map/lib/util.js:24:11)
    at new BasicSourceMapConsumer (/home/deploy/everloved/node_modules/source-map/lib/source-map-consumer.js:294:22)
    at new SourceMapConsumer (/home/deploy/everloved/node_modules/source-map/lib/source-map-consumer.js:22:7)
    at SourceMapSource.node (/home/deploy/everloved/node_modules/webpack/node_modules/webpack-sources/lib/SourceMapSource.js:193:4)
    at exports.getSourceAndMap (/home/deploy/everloved/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:20:27)
    at SourceMapSource.sourceAndMap (/home/deploy/everloved/node_modules/webpack/node_modules/webpack-sources/lib/SourceMapSource.js:184:10)
    at getTaskForFile (/home/deploy/everloved/node_modules/webpack/lib/SourceMapDevToolPlugin.js:78:30)
    at /home/deploy/everloved/node_modules/webpack/lib/SourceMapDevToolPlugin.js:265:22
    at /home/deploy/everloved/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/home/deploy/everloved/node_modules/tapable/lib/HookCodeFactory.js:1:1), <anonymous>:6:1)
(node:1988) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at emitDeprecationWarning (internal/process/promises.js:180:11)
    at processPromiseRejections (internal/process/promises.js:249:13)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)

Emin

@eminvegan

Jeremy Llewellyn

@jeremyll

Hi y'all, i'm having trying to get split chunks working on webpack 5 from 4. It's not respecting the entry points and taking on the name of the splitchunk. I've tried the hint on the docs but that doesn't work either =(

Eric Zarowny

@ezarowny

@jeremyll I had an issue where webpack 4 was giving me the desired main, main~vendors, polyfill, polyfill~vendors and webpack 5 was giving me insane long strings :laughing:

Had to write my own name function

Jeremy Llewellyn

@jeremyll

i've written my own name, but it's not splitting based on the entry names, it's only based on the chunk sections names

Jeremy Llewellyn

@jeremyll

do you have to re-reiterate the entry points as seperate splitchunks just for css? this isn't the case for normal splitting of js with webpack

Yasharel Saiedian

@yasharels

Hi, I'm not very familiar with webpack, but I came across something in a Create-React-App project of mine that I don't understand. To my understanding, a bundled js file should contain calls to webpack_require. I see that the only file in my bundle that contains that function is runtime-main.hash.js.map, which I don't think actually gets executed, since it's a sourcemap. So, what's going on here?

soobra

@hyber-code

just a quick question, following is an extract from webpack.config,js, running webpack throws following error (last code block).

const PATHS = {
  src: path.join(__dirname, './src'),
  dist: path.join(__dirname, './dist')
}

plugins:  [
new MiniCssExtractPlugin({
      template: ${PATHS.src}/styles/styles.scss,
      filename: styles/styles.[hash].min.css
    }),

ERROR

ValidationError: Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'template'. These properties are valid:
   object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }

here is the complete paste of webpack config file
https://pastebin.com/raw/ss5hmhJw

soobra

@hyber-code

stackoverflow question https://stackoverflow.com/questions/64984744/webpack-plugin-showin-an-unknown-property

Muhammad Kamal

@mkamalkayani

Hi, need help with this error. Any suggestions?

Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon),Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)
    at /Users/Homeoffice/Documents/toolbox-frontend-clone2/scripts/build.js:136:15
    at Hook.eval [as callAsync] (eval at create (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at onCompiled (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/lib/Compiler.js:402:21)
    at hooks.afterCompile.callAsync.err (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/lib/Compiler.js:1014:17)
    at Hook.eval [as callAsync] (eval at create (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at compilation.seal.err (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/lib/Compiler.js:1010:33)
    at hooks.afterSeal.callAsync.err (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/lib/Compilation.js:2030:10)
    at Hook.eval [as callAsync] (eval at create (/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

I am sorry, if it is not the right place for such questions.

Muhammad Kamal

@mkamalkayani

{ mode: 'production',
  bail: true,
  devtool: 'source-map',
  entry:
   [ '/Users/Homeoffice/Documents/toolbox-frontend-clone2/src/index.js' ],
  output:
   { path: '/Users/Homeoffice/Documents/toolbox-frontend-clone2/build',
     pathinfo: false,
     filename: 'static/js/[name].[contenthash:8].js',
     chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
     publicPath: '/',
     devtoolModuleFilenameTemplate: [Function],
     globalObject: 'this' },
  optimization:
   { minimize: false,
     minimizer: [ [TerserPlugin], [OptimizeCssAssetsWebpackPlugin] ],
     splitChunks: { chunks: 'all', name: false },
     runtimeChunk: { name: [Function: name] } },
  resolve:
   { modules:
      [ 'node_modules',
        '/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules' ],
     extensions:
      [ '.web.mjs', '.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx' ],
     alias: { 'react-native': 'react-native-web' },
     plugins: [ [Object], [ModuleScopePlugin] ] },
  resolveLoader: { plugins: [ [Object] ] },
  module: { strictExportPresence: true, rules: [ [Object] ] },
  plugins:
   [ HtmlWebpackPlugin { userOptions: [Object], version: 5 },
     InlineChunkHtmlPlugin { htmlWebpackPlugin: [Function], tests: [Array] },
     InterpolateHtmlPlugin { htmlWebpackPlugin: [Function], replacements: [Object] },
     ModuleNotFoundPlugin {
       appPath: '/Users/Homeoffice/Documents/toolbox-frontend-clone2',
       yarnLockFile: undefined,
       useYarnCommand: [Function: bound useYarnCommand],
       getRelativePath: [Function: bound getRelativePath],
       prettierError: [Function: bound prettierError] },
     DefinePlugin { definitions: [Object] },
     MiniCssExtractPlugin { options: [Object], runtimeOptions: [Object] },
     ManifestPlugin { opts: [Object] },
     IgnorePlugin {
       options: /^\.\/locale$/,
       checkIgnore: [Function: bound checkIgnore] },
     GenerateSW { config: [Object] },
     [Function] ],
  node: false,
  performance: false }

webpack config.

Muhammad Kamal

@mkamalkayani

The same question on stackoverflow: https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version

CharlieBrown

@testacode

did you read the migration guide? is that happening for you on webpack 5?

https://webpack.js.org/migrate/5/

try importing package.json and then using packageJson.version

@hyber-code seems that you're missing the right configuration object. You are using templateproperty when it's not supported as reading the object example from your excerp

Muhammad Kamal

@mkamalkayani

@testacode Yes, I have read the migration guide. Yes, this error occurs after updating to webpack 5.

CharlieBrown

@testacode

Can you try with the example from the migration guide?

also, anyone had this issue? webpack/webpack#12050

Where communities thrive

People

Repo info

Activity