Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 03 15:58
    sokra synchronize #14894
  • Dec 03 15:58

    sokra on css-modules

    bugfixes, external assets (compare)

  • Dec 03 12:55

    sokra on main

    Proposed fix to module federati… Added testing for new singleton… Merge pull request #14884 from … (compare)

  • Dec 03 12:55
    webpack-bot labeled #14884
  • Dec 03 12:55
    webpack-bot unlabeled #14884
  • Dec 03 12:55
    sokra closed #14884
  • Dec 03 10:45
    webpack-bot labeled #14896
  • Dec 03 10:45
    Hydrock opened #14896
  • Dec 03 10:40
    alexander-akait edited #14884
  • Dec 03 07:47
    sokra synchronize #14894
  • Dec 03 07:47

    sokra on css-modules

    css generation and hmr add support for url() in css add test case and 5 more (compare)

  • Dec 02 20:38
    webpack-bot unlabeled #14894
  • Dec 02 20:38
    sokra synchronize #14894
  • Dec 02 20:38

    sokra on css-modules

    add css tokenizer css generation and hmr add support for url() in css and 6 more (compare)

  • Dec 02 20:17
    webpack-bot labeled #14894
  • Dec 02 20:17
    webpack-bot labeled #14894
  • Dec 02 20:17
    sokra opened #14894
  • Dec 02 20:12

    sokra on css-modules

    add todo (compare)

  • Dec 02 18:37

    sokra on css-modules

    use comma instead of space test… (compare)

  • Dec 02 18:30

    sokra on css-modules

    resolve todos, nitpicks add support for external css (compare)

Josh Rouwhorst
@joshrouwhorst
So, what I'm trying to do is to have images referenced in the template brought over to the dist/assets folder. And maybe this isn't the right way to do that.
joshrouwhorst@Josh-Rouwhorsts-MacBook-Pro-7 Test % node --trace-deprecation node_modules/webpack/bin/webpack
(node:43540) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/node_modules/html-webpack-plugin/index.js:286:49
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
asset assets/Image.png 2.61 MiB [emitted] [from: src/assets/Image.png]
asset main.c74f277f0931dd2347b7.js 1.18 KiB [emitted] [immutable] (name: main)
asset index.html 954 bytes [emitted]
./src/app.js 1 bytes [built] [code generated]

ERROR in   Error: /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:121
  /******/  __webpack_require__.b = require("url").pathToFileURL(__filename);
                                                                 ^
  ReferenceError: __filename is not defined

  - template.html:121 
    /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:121:65

  - template.html:140 
    /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:140:13

  - template.html:150 
    /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:150:12

  - index.js:327 HtmlWebpackPlugin.evaluateCompilationResult
    [Test]/[html-webpack-plugin]/index.js:327:28

  - index.js:243 
    [Test]/[html-webpack-plugin]/index.js:243:22

  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

  - async Promise.all

  - async Promise.all
That's with trace-deprecation added
Luke Abby
@DavidArchibald
Yup definitely looks like html-loader is out of date as the deprecation is coming from it as well.
let me find you some alternatives
Josh Rouwhorst
@joshrouwhorst
Thank you!
Josh Rouwhorst
@joshrouwhorst
That looks like it works! Thank you for your help, @DavidArchibald! I appreciate it.
Luke Abby
@DavidArchibald
glad it helped
Gabriel Ayham Semaan
@Gabson1
Hey - could someone help me with some issues I am facing while upgrading webpack from 4 to 5?
Luke Abby
@DavidArchibald
sure what're the problems
Gabriel Ayham Semaan
@Gabson1
To keep my problem short, only certain pages render when I run the app in either dev mode or prod mode. For example, an action like logging in will result in Status Code:
{"statusCode":500,"error":"Internal Server Error","message":"An internal server error occurred"}
Luke Abby
@DavidArchibald
is this using some system that works around Webpack?
like create-react-app etc
Gabriel Ayham Semaan
@Gabson1
Here'S a gist of my webpack: https://gist.github.com/Gabson1/8a94f74e696dc052b2397b7d9771244b
no, it's a custom webpack, build from scratch
its a react - hapi app
I first posted my question on stackoverflow, but barely any help there (as always...). It includes some more issues and detail, may I post the link or not?
Luke Abby
@DavidArchibald
sure
Luke Abby
@DavidArchibald
did the commenter's point about polyfilling help at all?
regarding the buffer issue
Also are you able to traceback the error better? An internal server error could happen for many reasons, if you've updated dependencies besides webpack that could do it or if they worked with some other polyfills that suddenly don't exist etc
Gabriel Ayham Semaan
@Gabson1
I wasn't quite sure how to implement the fallback for buffer... my way did not work unfortunately

Webpack mentions that not the full error message is being displayed,

1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) 1 warning has detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

however whatever I try, I can't get webpack to spit out some more info

Luke Abby
@DavidArchibald
iirc you have to do this:
module.exports = {
  //...
  stats: {
    children: true,
  },
};
might actually be different
Gabriel Ayham Semaan
@Gabson1
it's exactly what I tried, lemme do it one more time
Webpack still outputs the same message and no more details for my errors
Luke Abby
@DavidArchibald
What's your node version
Gabriel Ayham Semaan
@Gabson1
v14.15.4
npm is 6.14.10 if you want this info as well
Luke Abby
@DavidArchibald
I presume you tried errorDetails as well?
Gabriel Ayham Semaan
@Gabson1
yes
Luke Abby
@DavidArchibald
Yeah not sure what's going wrong with stats.children: webpack/webpack#12653
it's obstensibly fine in this issue and up to date documentation references it
Gabriel Ayham Semaan
@Gabson1
I know, my IDE even suggest all the additional options I have for outputting the stats
Luke Abby
@DavidArchibald
At this point it seems you're partially on the burden of large code and config. Could you strip out as much as you absolutely can from your configs and your code until you've gotten it down to the smallest amount that reproduces the problem? Traceback and everything is being especially tricky so what's superflous and what's not matters, including minimal code etc. This sounds like it's probably an error or several with dependent things. I'd suggest making an actual repo instead of a gist if possible as you'll want to include a package.json etc.
The problem has become a needle in a haystack and you're most well equipped to tear away at superflous stuff until you need help again.
Gabriel Ayham Semaan
@Gabson1
Hmm ok, then I will do just that. I hoped it might be something suer obvious :P
Thanks for your suggestion, I'll do that this evening.
Luke Abby
@DavidArchibald
Doesn't seem to be since it's indirected by several layers of lack of traceability
gotcha
Jonas Schumacher
@jonasmerlin
Hey! Quick question: the https://github.com/webpack-contrib/node-loader README stated that "node-loader only works on the node/electron-main/electron-main targets." Should that second electron-main read electron-renderer?
Luke Abby
@DavidArchibald
most likely. The easiest way to see would be to try if you need to.
James Bromwell
@thw0rted
Does anybody have tips for looking at build performance? I just did a big dep update yesterday, a couple of loaders had major-version updates, and I'm pretty sure my prod build time is roughly double what it was before. How can I tell what's taking so long?
Luke Abby
@DavidArchibald
I'd start with the speed-measure-plugin as a good starting point
From there you'll have to figure out what parts of the plugin are running slower which will be a bit harder
James Bromwell
@thw0rted
I think I looked at that a while back, they were taking a really long time to add Webpack 5 support. The NPM page you linked still says "all versions (1,2,3 and 4)"
James Bromwell
@thw0rted
Am trying it anyway, will see what happens
James Bromwell
@thw0rted

OK, first try failed. I have a webpack.base.js and webpack.prod.js. Prod imports a partial config from base, then uses webpack-merge to export the final combined options. I had export default WebpackMerge(baseConfig, prodConfig). I replaced this with

const merged = WebpackMerge(baseConfig, prodConfig);
const smp = new SpeedMeasurePlugin();
export default smp.wrap(merged);

As far as I can tell, that's supposed to work. Instead, I get errors for all CSS files that look like

Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`)

but of course the prodConfig has that entry in plugins -- otherwise the build without SMP would not work