Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 22 23:37
    webpack-bot labeled #13211
  • Apr 22 23:17
    webpack-bot labeled #13203
  • Apr 22 23:17
    webpack-bot unlabeled #13203
  • Apr 22 23:17

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • Apr 22 23:17
    dependabot-preview[bot] closed #13203
  • Apr 22 23:17
    webpack-bot labeled #13211
  • Apr 22 23:17

    dependabot-preview[bot] on npm_and_yarn

    chore(deps-dev): bump ts-loader… (compare)

  • Apr 22 23:17
    dependabot-preview[bot] review_requested #13211
  • Apr 22 23:17
    dependabot-preview[bot] labeled #13211
  • Apr 22 23:17
    dependabot-preview[bot] opened #13211
  • Apr 22 20:07
    webpack-bot labeled #13203
  • Apr 22 19:54
    sokra synchronize #13164
  • Apr 22 19:49
    sokra synchronize #13164
  • Apr 22 19:37

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • Apr 22 19:37
    dependabot-preview[bot] closed #13195
  • Apr 22 19:37
    webpack-bot labeled #13210
  • Apr 22 19:37
    dependabot-preview[bot] review_requested #13210
  • Apr 22 19:37
    dependabot-preview[bot] labeled #13210
  • Apr 22 19:37
    dependabot-preview[bot] opened #13210
  • Apr 22 19:37

    dependabot-preview[bot] on npm_and_yarn

    chore(deps-dev): bump core-js f… (compare)

Michael de Silva
@bsodmike

Hi all, I'm working on a project where webpacker imports a custom npm package; however, that package also has its own dependencies (which are custom). How can I get webpacker to auto reload the main package, when any of its dependencies are updated? The main package loads its dependencies via import myCustomPackage from '<path>/dist/bundle' (as an example).

At the moment, I'm having to run yard add file: <path> every time I update one of the child dependencies and this takes a long time (>50 secs)

Luke Abby
@DavidArchibald
I think the problem is that Webpack won't watch nested dependencies. It can already struggle with too many watchers and changing nested dependencies is inadvisable asfik. Does using yarn link on the sub dependency help at all if you're not using it already? I think that may make it more of a top dependency but I haven't tried this.
There might be an option to increase depth etc but it'll probably slow down watches
Oh you might try adding a context dependency on the folder you want. A plugin seems to exist that'll make this easier but the general idea isn't specific to it. See: https://www.npmjs.com/package/filewatcher-webpack-plugin
Michael de Silva
@bsodmike
@DavidArchibald thanks Luke!
Luke Abby
@DavidArchibald
I'd love to hear what worked and what didn't once you've gotten the chance
Michael de Silva
@bsodmike
Sure
James Bromwell
@thw0rted
How are the transitive dependencies referenced? It sounds like this is all through local development. If you use npm link, (not sure if there's a yarn equivalent, I don't use it) then I would expect webpack to pick up on changes anywhere in the tree

because what you actually wind up with is

myproject/
  node_modules/
    mylib/ -> /workspace/mylib/
      dist/
      node_modules/
        sublib/ -> /workspace/sublib/
          dist/

etc

that's assuming you started with cd sublib; npm link, cd mylib; npm link; npm link sublib;, cd myproject; npm link mylib
(and the -> above represents a softlink)
Luke Abby
@DavidArchibald
Yeah yarn has yarn link, that's actually what I was suggesting first but since I hadn't tried it I gave a few alternatives too
Arin
@koreaneggroll

Hello, my name's Arin and I am the creator of TeamLearn. TeamLearn is a website where you can learn how to code. But It's got a very small problem. It isn't done yet. And that's why i'm asking you to join our "call for code" if I can say so myself. We need you to make the world a better place.

[https://github.com/teamlearncoding/teamlearn]

Kevin
@Cavmpt
lol
aka code for me for free so I can profit off my website xD
Arin
@koreaneggroll
yeah sure but it's got a license so
Peter Sutton
@dj-foxxy
I'm in-lining all CSS, so I don't need the bundled JS from style-loader. How do I remove it? Removing style-loader breaks the build.
James Bromwell
@thw0rted
How does it break the build? If you never import any CSS files (or probably use a link rel="style" tag?), never add a rules entry for CSS, don't include any CSS files as entry points... it shouldn't need style-loader, right?
Could some other dependency require it?
Peter Sutton
@dj-foxxy
I use HtmlInlineCSSWebpackPlugin to take all my imported CSS and inject a style tag into the generate index.html. The combination of plugins doesn't work if I remove style-loader and style-loader I think is included the JS in the bundle (which isn't needed by HtmlInline has statically included the CSS).
James Bromwell
@thw0rted
so when you say you "remove" style-loader, do you mean uninstall the node_module, or are you talking about taking it out of the config somewhere?
It's weird because the inline plugin depends on mini-css-extract plugin (which I do use, in prod mode), which says that it must not be used in the same build as style-loader
when you say you "think" style-loader is in the bundle, what's that based on? Have you used e.g. source-map-explorer?
Peter Sutton
@dj-foxxy
@thw0rted Thanks for your suggestions. I think I'm in over my head and will have to pick this up next week, it's only a small bit of JS. I looked at the generated bundle and saw code to with creating style nodes. The project is otherwise empty so didn't come from anywhere else.
Alex Denton
@AlexDenton
I'm sure I'm doing something dumb but I've been fighting with this for days now. I'm trying to use the sass-loader additionalData config to append a dynamic variable to all my scss files. But when I try to build it the build fails because the variable is undefined. I created a slimmed-down project for illustrative purposes here https://github.com/AlexDenton/bootstrap-loader-test. There are definitely some weird things going on with the dependencies but I've been tinkering with it and can't seem to find root cause.
Slaus Blinnikov
@SlausB

Hello! I'm trying to migrate from webpack 2.2.1 to webpack 5+. Output app.js has just ~100 lines of code out of ~50k project has and in the end there is such statement:

// This entry module is referenced by other modules so it can't be inlined
var __webpack_exports__ = __webpack_require__("./src/main.es6");

What could be the reason webpack 5 skips packing certain sources into the final build? How can I force webpack 5 to fail build when it happens?

Luke Abby
@DavidArchibald
Perhaps it's because Webpack 5 automatically tree shakes better? You might be doing something like expecting to add a side effect import of jQuery and then using $ all over without doing import $ from "jquery" or doing that but not using most of the library and getting it removed from the build which means Webpack removes all the dependencies it bundled before
Slaus Blinnikov
@SlausB
@DavidArchibald thank you for your answer! Yeah, project has a lot of statically (not through npm package, but as <script>...</script> in html) added libraries - planning to get rid of all of those, but need to start from at least adding my main.es6 into the build ^^. Should I completely remove "tree shaking"? The fact that my whole main (min thing I want to see in my build) doesn't go into the build is kinda weird.
Luke Abby
@DavidArchibald
I'd look into https://webpack.js.org/plugins/html-webpack-plugin/ for removing script tags from your html etc.
I wouldn't remove Tree Shaking, it's one of Webpack's best features for reducing bundle sizes; if you use only a handful of functions from libraries you don't need to keep the entire library around, right? As a stopgap I'd try provide plugin which will essentially import it anywhere you use the identifiers.
Slaus Blinnikov
@SlausB
@DavidArchibald I do use html-webpack-plugin already, but to just insert webpack-generated app.js into index.html.ejs. The problem is that app.js doesn't contain my code from src/main.es6 (and code from 100+ other sources, but that's lesser problem). The whole reason of using webpack in my case is to pack sources into single bundle and I can't understand yet why entry file doesn't go into the bundle.
Luke Abby
@DavidArchibald
could you show the configuration that's causing this problem now?
Slaus Blinnikov
@SlausB
@DavidArchibald here it is:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => ({
    entry: './src/main.es6',
    optimization: {
        minimize: argv.mode == 'production' ? true : false
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(tsx|ts|js|es6)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
                include:[
                    path.join(__dirname, '.'),
                    path.join(__dirname, 'src'),
                ],
            },
        ],
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js', '.es6' ],
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "My game",
            filename: 'index.html',
            template: 'src/index.html.ejs',
            hash: true,
            debug: argv.mode == 'development',
        }),
    ],
});
Luke Abby
@DavidArchibald
what happens when you try to run the output code?
Slaus Blinnikov
@SlausB
@DavidArchibald generated app.js is ~20Kb in size and mostly just contains sourcemap data, so the actual included code is ~100 lines with This entry module is referenced by other modules so it can't be inlined comment in the end. Original project has ~50k lines of code and webpack 2 generates ~1.2Mb app.js
@DavidArchibald it doesn't run, which is no wonder because it doesn't contain most of the code. I actually don't understand the line __webpack_require__("./src/main.es6") because src/main.es6 is not supposed to get uploaded to server - only app.js, so src/main.es6 won't be there when user will access the page (that's my whole purpose of using webpack - to bundle everything into app.js).
Luke Abby
@DavidArchibald
First of all, I believe this is development code generation or an unusual production result -- if Webpack says __webpack_require__("./src/main.es6"); it doesn't really mean it's doing an http request to get the file off of the filesystem. There's a mapping of filenames to portions of code so there should be a function with ./src/main.es6 near it.
Does it not run at all like as in a top level console.log won't appear or what? Could you put together a small repo that I could download? Try to get those as small as possible such that it doesn't seem to work, e.g. a single library and file with a package.json and lock with that config? I'm not sure I can step you through solutions with just this since there's a few layers of problems possible.
Slaus Blinnikov
@SlausB
@DavidArchibald thank you for your help! I'll try to compose min project with the same problem ...
Luke Abby
@DavidArchibald
Thanks! It's hard to get started with so much speculation haha
Slaus Blinnikov
@SlausB
@DavidArchibald okey, I managed to get webpack to pack all the code into app.js. I think problem was with test: /\.(tsx|ts|js|es6)$/, param to ts-loader. I guess typescript doesn't handle .es6 and .js files and was outputting empty results so webpack was packing nothing into the final build. I renamed ALL (.es6, .js) the files to .ts, run tsc on all of them (including webpack.config.js) publishing to ts_dist dir and eventually run webpack from inside ts_dist dir. Now app.js is heavy and juicy ~3Mb! Thanks for your help!
Luke Abby
@DavidArchibald
Ahaha, glad I could sorta be your rubber ducky
I was curious about the es6 in the ts-loader but I definitely didn't think it'd be causing the problem
maybe allowJS would solve it?
or some other compiler config
Slaus Blinnikov
@SlausB
@DavidArchibald yeah, I was having problems with "allowJs" being ignored when tried to run npx tsc ./src/main.ts and googled that tsc ignores tsconfig.js when provided specific list of files, so I guess that's why tsc was ignoring tsconfig.js when invoked from within ts-loader because ts-loader invokes tsc specifically for every matched file? Dunno ... complicated stuff
borisozegovic
@borisozegovic

Hi all!

We are considering a module federation to split our monolith FE. We started playing with a simple federation and we stumbled upon some issues. Our Vue package doesn't work when imported via MF. It works as a standalone application. It works when we dynamically import it also.

  • here is our main app git@github.com:borisozegovic/federation-main.git (npm i; npm run serve)
  • here is our federation app git@github.com:borisozegovic/federation-producer.git (npm i; npm run serve)

Here is the thing, we don't care about this package, we can substitute it, but we don't know why it doesn't work with MF only, and should we expect similar problems down the road. Any ideas? The package works if we remove content inside of <GmapMap> :(

James Bromwell
@thw0rted
@SlausB I use the @ngtools/webpack loader instead of ts-loader, because my project is Angular, but I think it's calling ts-loader under the hood. It takes a tsConfigPath config argument. It looks like for ts-loader, the option is called configFile
but it says that by default, the value is just tsconfig.json so it should in fact be picking up your file
One thing that often confuses new TS users is setting include correctly, if a TS file is imported from one of your sources but isn't covered by the include wildcard, that's an error
You can get more help in the TypeScript channel, where I also lurk