webpack/webpack

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

Shirshendu Bhowmick

@shirshendubhowmick

@gingur Seems that its using __webpack_require__.e to import the chunks. But this is inside an eval

Shirshendu Bhowmick

@shirshendubhowmick

The createElement i was talking about, it was used for pre fetching by creating a link tag.

Brian Schlenker

@bschlenk

Can a webpack plugin add dev server middleware? Or is that only possible from the dev server config itself?

mmubasher

@mmubasher

I am trying to use custom webpack config but my already running rxjs code starts throwing errors as
TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

import * as webpack from 'webpack';
export default {
  node: {
    fs: 'empty'
  }
} as webpack.Configuration;

Anyone had such issues when using custom webpack with rxjs or angular?

jwoffenden

@jwoffenden

Heya all.

I'm using webpack with a rails5 app. I'm trying to migrate the app from sprockets because uglifyjs doesn't handle ecma6

So far things are going alright[ish] but I ran into an issue with my .js.erb files

rails-erb-loader seems to be failing on all of them.

It only gives me error code 1, no other info

It happens on all my .js.erb files

Lachee

@Lachee

could I get some help? I am getting a sass error of :
```

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Internal Error: Not enough space

This is when I am trying to import the rm-emoji-picker package.

here is my setup https://i.lu.je/2020/Code_O1SE2hSQpx.png

and screenshot of my webpack.config.js https://i.lu.je/2020/Code_NUgNHyKu5R.png

Lachee

@Lachee

i guess the sass is just too big for this library :\

Andi

@hadl

@Lachee not enough space could also be an encoding issue: sass/node-sass#2281 — only a guess

Lachee

@Lachee

@hadl thanks, I resolved it by using the webpack-copy plugin instead to copy the already included .css files. Also learnt how to use import() so its all broken up more now :)

Lachee

@Lachee

ok another question

This is my output

    output: {
      filename: 'bundle.js',
      chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'public/dist'),
      library: 'app',
    },

As you can see here, my files are going to the public directiory in a folder called dist. So they will be accessible to myapp.com/dist/vendors~emojipicker.js. However, when I run the application, it is trying to get it from myapp.com/vendors~emojipicker.js, ignoring the /dist. How can I fix this?

Andi

@hadl

publicPath: '/dist/‚ https://webpack.js.org/configuration/output/#outputpublicpath

Lachee

@Lachee

oh, thanks

gitcatrat

@gitcatrat

Hey guys, is it possible to mangle/minimize webpack globals?

Few examples: _module1_js__WEBPACK_IMPORTED_MODULE_0__, __webpack_require__, __webpack_exports__

My bundle is extremely size-sensitive and these globals add 9Kb which is ~15% of total bundle size!

gmmkmtgk

@gmmkmtgk

hello I am Keshav Maheshwari want to contribute to this organization how can i have access to the git repository and the issues which we need to solve

oh i got it

https://github.com/webpack/webpack/issues

am I permitted to edit and solve any kind of issue

Kevin,WY

@wangyanmeego

I just use the simplest webpack.config.js to pack ./src/index.cs

i shows :Error: EEXIST: file already exists, mkdir 'F:\WorkingPlace\WebPanorama\ForeApp\webpack.config.js'

My config file is :

const path=require('path');

module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__filename,'dist'),
}
}

webpack version:4.42.1

Aankhen

@Aankhen

@gmmkmtgk, you can contribute by finding an issue you’d like to work on, forking the repository on GitHub, implementing and testing your fix, and opening a pull request against the original repository.

This guide has good explanations, if you’re not familiar with the terms above: https://github.com/susam/gitpr

Troy Rhinehart

@gingur

@wangyanmeego your error looks like a user error, probably in your npm run script, or however you're trying to run the webpack-cli

Nathan Horrigan

@NathHorrigan

I have an issue where a library I'm using dynamically loads modules based on its configuration in userland, This causes issues cause it means webpack doesn't bundle the required reps. Is it possible to manually bundle them through the webpack config?

Nathan Horrigan

@NathHorrigan

notificationsAlerts.ts:38 Error: Module "@svgr/plugin-svgo" missing. Maybe npm install @svgr/plugin-svgo could help!

gitcatrat

@gitcatrat

Hey guys, is it possible to mangle/minimize webpack globals?
Few examples: _module1_js__WEBPACK_IMPORTED_MODULE_0__, __webpack_require__, __webpack_exports__
My bundle is extremely size-sensitive and these globals add 9Kb which is ~15% of total bundle size!

Does anyone know? It's quite urgent, we need to go LIVE tomorrow.

Vecinu

@paradoxministry

Hi folks, I have an issue with our production build, we get "Uncaught SyntaxError: Unexpected token ':' file.map:1" and our config is pretty simple:

{
    mode: 'production',
    devtool: 'source-map',
...
    optimization: {
      minimizer: [
        new TerserPlugin({
          cache: true,
          parallel: true,
          sourceMap: true, // set to true if you want JS source maps
        }),
}

Tried latest version of Webpack and terser-webpack-plugin but it's still happening. The .map file start with

{"version":3,"sources":["webpack:///./app/..

and it complains about the colon after version"

Any ideas?

gitcatrat

@gitcatrat

Is Webpack suitable for running production server that compiles code (on server filesystem) and returns as string?

const config = generateConfig(reqBodyOptions);
const compiler = webpack(config);
compiler.run(...);

Is there something I need to release or tear down later? If I stress-test the server, latency is ~100sec while <10sec locally

Troy Rhinehart

@gingur

you could always thread it

gitcatrat

@gitcatrat

First request latencies 11sec --> 30sec --> 41sec --> 39sec --> 34sec, is it normal?

Something seems off, why it suddenly jumps and fluctuates like this..

If it queued the requests like Node usually does, latency should increase gradually I think

Troy Rhinehart

@gingur

to answer your original question, webpack IMO is not intended for runtime production environments. They do offer a dev runtime, but that obviously doesn't scale the same way production may require. using a thread is my suggestion, since you can spin up/tear down as you see fit, to ensure your worker threads are not maxing out in memory and allowing you to run these expensive operations in parallel off the main thread.

I assume the only reason you'd be running a bundler on a server is because you are generating dynamic bundles, is it possible to pre-build these builds or generate a cache (possibly distributed) to reduce the amount of webpack runs?

gitcatrat

@gitcatrat

Hmm, I get very interesting results when I log stuff out when Webpack runs only on main thread.
Could someone explain this behavior?

request: 1                       // <= when Nodejs recieves a request (number is request id)
before compile: 1: 7.496ms       //   <= just before compiler.run()
request: 2
before compile: 2: 3.590ms

// and other requests 

// then all requests finish at the same time?! (even if 50 requests)

after compile: 1: 12726.134ms      //  <= when compiler.run() callback is called
before response: 1: 12730.299ms     //  <= respond with code
after compile: 4: 12360.211ms
before response: 4: 12364.857ms
after compile: 2: 12426.731ms
before response: 2: 12427.940ms

Vecinu

@paradoxministry

Hi folks, I have an issue with our production build, we get "Uncaught SyntaxError: Unexpected token ':' file.map:1" and our config is pretty simple:
{
    mode: 'production',
    devtool: 'source-map',
...
    optimization: {
      minimizer: [
        new TerserPlugin({
          cache: true,
          parallel: true,
          sourceMap: true, // set to true if you want JS source maps
        }),
}
Tried latest version of Webpack and terser-webpack-plugin but it's still happening. The .map file start with
{"version":3,"sources":["webpack:///./app/..
and it complains about the colon after version"
Any ideas?

Bump on this question if anyone has any leads that I could investigate

Jordan Kintzle

@kintz09

Hi everyone. I'm struggling with an issue with sass-loader and could use some help debugging. I've created a github issue with all the details.

webpack-contrib/sass-loader#822

If anyone else is dealing with the same issue I'd love to hear how you got the project to compile.

Acentera

@ACentera_twitter

ERROR in ../node_modules/vuetify/dist/vuetify.min.css 1:0
dummyssr_1  | Module parse failed: Unexpected character '@' (1:0)

I have this:
 {
        test: /vuetify\/dist\/vuetify\.min\.css/,      
        include: [
          resolve('../node_modules')
        ],
        loaders: [ 'vue-style-loader!css-loader' ],
      },
Why would it fail ?  i know the vuetify.min.css has @charset at 1st line

Where communities thrive

People

Repo info

Activity