Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Output .js bundle contains everything from node_modules, even not imported

See original GitHub issue

Description

I have this brunch config (listed below), where I’m building 2 output bundles, app.js and admin.js.

app.js is almost empty and does import "phoenix_html", while admin.js does import "react" etc.

Expected behavior

I would expect to have very tiny app.js file as I’m not importing react or anything big there.

Actual behavior

Both files are about 1.3 MB in size (or 350 KB in production build). Both include everything that’s installed in node_modules.

I browsed through existing and closed issues, and people keep saying “only what’s required” gets concatenated. But this is not true. Is “requiring” different from import "...." when using babel?

Environment

Brunch: 2.10.12
Node.js: 6.12
NPM: 3.10.10

`package.json` contents

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-beta",
    "jquery": "^3.2.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "popper.js": "^1.12.6",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-phoenix": "file:../deps/react_phoenix"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-brunch": "6.1.1",
    "brunch": "2.10.12",
    "clean-css-brunch": "2.10.0",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "2.1.1"
  }
}

brunch config contents

      joinTo: {
        "js/app.js": ["js/app.js", /^node_modules/],
        "js/admin.js": ["js/admin.js",
                        /^js\/admin\//,
                        /^js\/components\//,
                        /^node_modules/],

Issue Analytics

State:
Created 6 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

tjomkcommented, Jun 19, 2019

Having a similar issue that Brunch includes all of the React’s development code (~700Kb) in production build.

0reactions

paulmillrcommented, Apr 30, 2020

The option is to include react into app/lib or something like this. Should work until we figure out how to adjust this.

Top Results From Across the Web

Webpack does not import bundles from node_modules (js only)

This problem is not specific only to a specific library but genreally to all libraries. Importing css resources from libraries works fine in ......

Webpack: How to don't bundle node_modules, but use them ...

It will create a file server.js which only contains my server code. Then creates a server.bundle.js which is not used.

Webpack is bundling all of the files in node_modules?

So it it normal for bundle.js to be a 7000 line file even though I've only imported React and ReactDOM ?

How webpack decides what to bundle - Jakob Lind

Webpack builds a dependency graph used internally. Next step for webpack is to check for everything that is imported from those three files....

A Guide to Managing Webpack Dependencies - Toptal

A Guide to Managing Webpack Dependencies ... The Webpack module bundler processes JavaScript code and all static assets, such as stylesheets, images, and...