Named Imports are not working properly, Storybook adds everything present the folder to the bundle

[sohamnandi77]

Whenever I use named imports, Storybook includes everything in the index file into the build, which eventually increases the bundle size.

main.js

module.exports = {
  stories: ["../src/**/*.stories.@(js|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-a11y",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  features: {
    storyStoreV7: true,
  },
  core: {
    disableTelemetry: true,
  },
};

My package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.2.5",
    "@dnd-kit/core": "^5.0.1",
    "@dnd-kit/modifiers": "^5.0.0",
    "@dnd-kit/sortable": "^6.0.0",
    "@dnd-kit/utilities": "^3.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.3",
    "date-fns": "^2.28.0",
    "date-fns-tz": "^1.1.6",
    "highcharts": "^8.1.2",
    "highcharts-react-official": "^3.0.0",
    "i18next": "^21.6.14",
    "i18next-http-backend": "^1.4.0",
    "lodash": "^4.17.20",
    "react": "^16.13.1",
    "react-bootstrap": "^1.4.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^16.13.1",
    "react-dropzone": "^11.3.2",
    "react-i18next": "^11.16.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-select": "^4.3.1",
    "react-table": "^7.7.0",
    "react-table-sticky": "^1.1.3",
    "react-toastify": "^8.1.0",
    "sass": "^1.33.0",
    "source-map-explorer": "^2.5.2"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "peerDependencies": {
    "babel-loader": "8.1.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-decorators": "^7.12.1",
    "@storybook/addon-a11y": "^6.5.9",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-docs": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/node-logger": "^6.5.9",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "babel-eslint": "^10.1.0",
    "babel-preset-react-app": "^9.1.2",
    "env-cmd": "^10.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "react-error-overlay": "6.0.9"
  }
}

My Folder structure looks like

src/
-images
   index.js
 - svgs/
   - index.js
   ...
   - noGoals/
     - index.js
     - NoGoals.js
     - NoGoals.svg
   - noUsers/
     - index.js
     - NoUsers.js
     - NoUsers.svg
  ...

All the main file in svgs folder, looks like this Ex: images/svgs/noGoals/NoGoals.js

import React from "react";
import NoGoalsImg from "./NoGoals.svg";

const NoGoals = (props) => (
  <img src={NoGoalsImg} alt="NoGoalsImg" {...props} />
);

export default NoGoals;

and then I am exporting the Component in the index file

in index file

export { default } from "./NoGoals";

and in the end, I am export all the files like this in the images/svgs/index.js file

in images/svgs/index.js file

...
export { default as NoGoals } from "./noGoals";
export { default as NoTemplates } from "./noTemplates";
export { default as NoUsers } from "./noUsers";
...

Also, in images/index.js

export * from "svgs";

I have made a .mdx file and I am importing all one of the images using a named import like this

import { NoGoals } from "src/images";

After using this, at the build-storybook step, the storybook is including all the images & their content into the build, which increase the build size

You can notice here that all the bundles generated have the same size. ~3.02MB. it's like all my code is present in all my bundles.

[sohamnandi77]

@tmeasday @ndelangen @shilman Please look into it.

[sohamnandi77]

@shilman Please look into it, and let me know if you need anything from my side

[shilman]

@sohamnandi77 do you have a reproduction repo you can share?

[sohamnandi77]

Hi @shilman, Sorry for the late reply Here is a reproduction repo: https://github.com/sohamnandi77/storybook-issue (it's a small example, but issue still remains in this repo)

So, if you will inspect through "App-stories.cc25eb1d.iframe.bundle.js" file in storybook-static you will find that all I have the code for all the files in src/images folder. like I only imported a single svg in app, but i am seeing all pngs in the bundle. It grows exponentially when there are more components and thus increase the bundle size.

cc: @tmeasday @ndelangen

[ndelangen]

Looks like the repro is for 6.5.

I'd be interested in the results with the 7.0 beta.