Storybook fails to launch

[UmarFKhawaja]

Describe the bug

I am trying to make Storybook work with IE11. I am part of a team creating a product to be used in the finance industry and IE11 is an important browser for us to support.

We were previously using Storybook v5.2.6 and things were working fine, except Storybook wouldn't run on IE11. This was due to some ES6 syntax such as rest/spread operators and arrow functions. I decided to use Babel to transpile ES6 code to ES5.

To achieve this, I added a .babelrc, as shown below.

A team mate has also added a webpack.config.js, also shown below.

I understand that this is not a bug, strictly speaking. I seem to be stuck on how to make Storybook use core-js@2.

Any help given will be greatly appreciated.

To Reproduce
Steps to reproduce the behavior:

1. Go to the package folder
2. Type npm run storybook and press
3. See error

Expected behavior
I expect that Storybook will build and launch in Dev mode.

Code snippets

.storybook/.babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

.storybook/webpack.config.js:

module.exports = {
  resolve: {
    mainFields: ['browser', 'main', 'module']
  }
};

package.json:

{
  "name": "core-components",
  "version": "1.0.0",
  "keywords": [
    "components",
    "core",
    "react"
  ],
  "main": "build/index.js",
  "jsnext:main": "build/index.es.js",
  "module": "build/index.es.js",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "build-storybook": "build-storybook",
    "lint": "eslint **/*.{js,ts} -f html -o ./reports/eslint-report.html --ignore-path ../../.eslintignore",
    "postinstall": "npm run build",
    "prepublishOnly": "npm run lint && npm run test && npm run build",
    "scanner": "sonar-scanner",
    "storybook": "start-storybook --port 6006",
    "test": "jest --coverage --no-cache",
    "test:unit": "jest --coverage --no-cache",
    "test:generate-output": "jest --json --outputFile=reports/.jest-test-results.json || true",
    "test:update-snapshots": "jest --update-snapshot"
  },
  "dependencies": {
    "@formatjs/intl-pluralrules": "1.5.2",
    "@storybook/addon-a11y": "5.3.13",
    "@storybook/addon-actions": "5.3.13",
    "@storybook/addon-jest": "5.3.13",
    "@storybook/addon-knobs": "5.3.13",
    "@storybook/addon-links": "5.3.13",
    "@storybook/addon-viewport": "5.3.13",
    "@storybook/addons": "5.3.13",
    "@storybook/react": "5.3.13",
    "eve": "1.0.0",
    "marked": "0.8.0",
    "node-emoji": "1.10.0",
    "prop-types": "15.7.2",
    "react-intl": "3.12.0",
    "react-is": "16.12.0",
    "react-router": "5.1.2",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.4.0",
    "storybook-addon-material-ui": "0.9.0-alpha.20",
    "storybook-components": "1.0.8",
    "storybook-readme": "5.0.8",
    "styled-components": "5.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.4",
    "@babel/plugin-proposal-object-rest-spread": "7.8.3",
    "@babel/plugin-transform-arrow-functions": "7.8.3",
    "@babel/plugin-transform-template-literals": "7.8.3",
    "@babel/preset-env": "7.5.5",
    "@babel/preset-react": "7.0.0",
    "@rollup/plugin-json": "4.0.2",
    "@testing-library/react": "9.5.0",
    "babel-eslint": "10.0.3",
    "babel-jest": "24.9.0",
    "babel-loader": "8.0.6",
    "babel-plugin-module-resolver": "4.0.0",
    "babel-polyfill": "6.26.0",
    "cross-env": "7.0.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "enzyme-to-json": "3.4.3",
    "eslint": "6.8.0",
    "eslint-config-airbnb": "18.0.1",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.18.3",
    "full-icu": "1.3.0",
    "identity-obj-proxy": "3.0.0",
    "intl": "1.2.5",
    "jest": "24.9.0",
    "jest-axe": "3.3.0",
    "jest-canvas-mock": "2.2.0",
    "jest-sonar-reporter": "2.0.0",
    "prismjs": "1.19.0",
    "rollup": "1.29.1",
    "rollup-plugin-babel": "4.3.3",
    "rollup-plugin-commonjs": "10.1.0",
    "rollup-plugin-node-resolve": "5.2.0",
    "rollup-plugin-peer-deps-external": "2.2.0",
    "rollup-plugin-replace": "2.2.0",
    "rollup-plugin-svg": "2.0.0",
    "sinon": "9.0.1",
    "sonar-scanner": "3.1.0"
  },
  "peerDependencies": {
    "@material-ui/core": "4.9.2",
    "@material-ui/icons": "4.9.1",
    "@material-ui/styles": "4.9.0",
    "react": "16.8.0",
    "react-dom": "16.8.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },
  "jestSonar": {
    "reportPath": "reports",
    "reportFile": "test-report.xml",
    "indent": 4
  }
}

Additional context

**$ npx -p @storybook/cli@next sb info**

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0

**$ npm run storybook**

> [email protected] storybook C:\Work\EV\Evergreen\components\core-components
> start-storybook --port 6006

info @storybook/react v5.3.13
info
info => Loading presets
info => Loading presets
info => Loading custom babel config
info => Loading custom babel config
info => Loading custom manager config.
info => Loading config/preview file in "./.storybook".
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading custom webpack config (extending mode).
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading create-react-app config.
10% building 1/1 modules 0 active(node:18136) DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
69% building 2445/2446 modules 1 active ...ore-components\node_modules\react-scripts\node_modules\eslint-loader\dist\cjs.js??ref--10-0!C:\Work\EV\Evergreen\components\core-components\src\methods\get-type\index.js

WARN force closed preview build

ModuleNotFoundError: Module not found: Error: Cannot find module 'babel-runtime/core-js/object/get-prototype-of'
Require stack:
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\corejs-upgrade-webpack-plugin\dist\index.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\manager\manager-webpack.config.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\manager\manager-preset.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\presets.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\config.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\build-static.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\server.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\dist\server\index.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\bin\index.js
    at C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\Compilation.js:925:10
    at C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\NormalModuleFactory.js:390:21
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12
:1)
    at NormalModuleFactory.create (C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\NormalModuleFactory.js:381:28)
    at C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\Compilation.js:897:14
    at Semaphore._continue (C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\util\Semaphore.js:47:5)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
ModuleNotFoundError: Module not found: Error: Cannot find module 'babel-runtime/core-js/object/keys'
Require stack:
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\corejs-upgrade-webpack-plugin\dist\index.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\manager\manager-webpack.config.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\manager\manager-preset.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\presets.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\config.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\build-static.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\@storybook\core\server.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\dist\server\index.js
- C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\bin\index.js
    at C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\Compilation.js:925:10
    at C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\NormalModuleFactory.js:390:21
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12
:1)
    at NormalModuleFactory.create (C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\NormalModuleFactory.js:381:28)
    at C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\Compilation.js:897:14
    at Semaphore._continue (C:\Work\EV\Evergreen\components\core-components\node_modules\@storybook\react\node_modules\webpack\lib\util\Semaphore.js:47:5)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: `start-storybook --port 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\khawajau\AppData\Roaming\npm-cache\_logs\2020-03-19T12_46_42_222Z-debug.log

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

FYI 6.0 alpha should be IE11 compatible now

[daneah]

I'm having trouble launching Storybook 6.0.0-beta.0 web component flavor in either IE11 or a pre-Chromium version of Edge, with the following errors (Edge left, IE11 right):

The IE11 error points at a perhaps-untranspiled usage of class coming from @storybook/api/node_modules/semver/classes/comparator.js. I can't make much of the Edge errors.

This seems tangential to @khawajaumarfarooq's issue, but I also don't want to overwhelm the team with any duplicates—please advise 😄

[daneah]

My comment above appears to be more like a special/new case of #8884, rather.

[tooppaaa]

Is the manager displayed in IE 11 ?
All dependencies should be transpiled in the dll. There's maybe a missing babel plugin.

[daneah]

The manager begins to load but doesn't render a list of components in Edge, and nothing loads in IE11 (this is all for web components specifically).

[BridgeAR]

This is likely fixed by 4c35a21 (#10679)

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!