Storybook: Breaking changes in @storybook/polymer from 5.1.3 to 5.1.4

Created on 13 Jun 2019  ยท  19Comments  ยท  Source: storybookjs/storybook

Describe the bug
Upgrade @storybook/polymer from 5.1.3 to 5.1.4 breaks storybook.

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/core-js/features/symbol/index.js'
Require stack:
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/noop.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js 7:0-34
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

and some 4 more similar errors.

To Reproduce
Steps to reproduce the behavior:

  1. Update to 5.14
  2. Run start-storybook -s .
  3. See error

Expected behavior
Build the storybook project

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
-
System:

  • OS: MacOS
  • Device: Macbook Pro 2018
  • Browser: -
  • Framework: Polymer (WebComponents - LitElement)
  • Addons: -
  • Version: 5.1.4

Additional context
Add any other context about the problem here.

polymer dependencies question / support todo

Most helpful comment

I was finally able to get 5.1.11 to build, using the following webpack.config.js:

const and = require('crocks/logic/and');
const isString = require('crocks/predicates/isString');
const compose = require('crocks/helpers/compose');
const propOr = require('crocks/helpers/propOr');

const includes = x => xs => xs.includes(x);
const some = p => xs => xs.some(p);

const getUse = propOr(null, 'use');

const isStyleLoader = and(isString, includes('style-loader'));

const usesStyleLoader = compose(some(isStyleLoader), getUse);

const LIT_CSS_REGEXP = /src\/(.*)\.css$/

const options = require('../.babelrc');

const LIT_CSS_RULE = {
  test: LIT_CSS_REGEXP,
  loader: 'lit-css-loader',
}

const transpilePackages = [
  'lit-html',
  'lit-element',
  '@open-wc',
  'crocks'
]

// this is a separate config for only those packages
// the main storybook will use the .babelrc which is needed so storybook itself works in IE
const TRANSPILE_PACKAGES_RULE = {
  test: /\.js$/,
  include: transpilePackages.map(package => new RegExp(`node_modules(\\/|\\\\)(${package})(.*)\\.js$`)) ,
  exclude: [/@babel\/runtime/, /core-js/, /axe-core/, /@storybook/],
  loader: 'babel-loader',
  options: {
    plugins: [
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-proposal-object-rest-spread',
    ],
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'entry',
          corejs: '3',
        },
      ],
    ],
    babelrc: false,
  }
}

const BABEL_LOADER_RULE = {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: [/@babel\/runtime/, /core-js/, /axe-core/],
  options
}

module.exports = ({ config }) => {
  config.module.rules = [
    ...config.module.rules,
    BABEL_LOADER_RULE,
    LIT_CSS_RULE,
    TRANSPILE_PACKAGES_RULE,
  ];

  config.module.rules
    .find(usesStyleLoader)
    .exclude = LIT_CSS_REGEXP;

  return config;
};

All 19 comments

I'd have to look at a full reproduction of the issue, but this may be related to @open-wc/demoing-storybook having /@storybook/addon-storysource as a runtime dependency instead of a peerDependency. There may be a version mismatch between the version that you upgraded to and the one they're managing as a dep.

Can you try upgrading to 5.1.7? We've done a bunch of core-js related fixes in the past few releases and it's possible that this is already fixed.

I'm getting these with 5.1.8 and with 5.2.0-alpha.26

ERROR in ./packages/button/node_modules/@scope/helpers/functions/sleep.js
Module not found: Error: Cannot find module '/Users/bennyp/Documents/web-components/node_modules/babel-loader/lib/index.js??ref--10!/Users/bennyp/Documents/web-components/node_modules/core-js/modules/web.timers.js'
Require stack:
- /Users/bennyp/Documents/web-components/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/core/dist/server/presets.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/core/dist/server/config.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/core/dist/server/build-static.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/core/server.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/polymer/dist/server/index.js
- /Users/bennyp/Documents/web-components/node_modules/@storybook/polymer/bin/index.js
 @ ./packages/button/node_modules/@scope/helpers/functions/sleep.js 3:0-36
 @ ./packages/button/node_modules/@scope/helpers/index.js
 @ ./packages/button/stories/button.stories.js
 @ ./packages sync ^((?![\\\/]node_modules[\\\/]).)*\.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Could be related.

This is after patching @open-wc/demoing-storybook's webpack config to set corejs.version to 3 with this patch file

diff --git a/node_modules/@open-wc/demoing-storybook/default-storybook-webpack-config.js b/node_modules/@open-wc/demoing-storybook/default-storybook-webpack-config.js
index ceef170..1c325d4 100644
--- a/node_modules/@open-wc/demoing-storybook/default-storybook-webpack-config.js
+++ b/node_modules/@open-wc/demoing-storybook/default-storybook-webpack-config.js
@@ -21,7 +21,7 @@ module.exports = ({ config, transpilePackages = ['lit-html', 'lit-element', '@op
             '@babel/preset-env',
             {
               useBuiltIns: 'entry',
-              corejs: '2',
+              corejs: '3',
             },
           ],
         ],

cc @daKmoR

I have the sense this is not open-wc related. I removed my dependencies on open-wc packages with some deft copypasting, and got the same errors.

cc @ndelangen

@bennypowers do you have a repo somewhere to take a look?

Just to clarify, when you say you removed the dependencies on open-wc packages, do you mean you essentially replicated the entire @open-wc/demoing-storybook setup with a clean storybook install?

@bennypowers do you have a repo somewhere to take a look?

Unfortunately nothing I can share at the moment.

... essentially replicated the entire @open-wc/demoing-storybook setup with a clean storybook install?

Yes, specifically, reimplemented defaultConfig inside my local storybook webpack config

Same error after upgrading to 5.1.8 using React. I do not believe it's Polymer specific based on that (just wanted to clarify).

Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/core-js/modules/es.symbol.js'

This suddenly began to work after I updated my .storybook/webpack.config.js from

config.module.rules.push({
  test: /\.(js|jsx)$/,
  loaders: [require.resolve('@storybook/addon-storysource/loader')],
  enforce: 'pre',
})

to be more specific to where my stories live

config.module.rules.push({
  test: /story.(js|jsx|ts|tsx)$|stories\/*.(js|jsx|ts|tsx)/,
  loaders: [require.resolve('@storybook/addon-storysource/loader')],
  enforce: 'pre',
})

Hi! Sorry if this is "too many cooks", but I am also having this issue with 5.1.8 and React. I get a ton of these errors while building webpack:

ERROR in ./node_modules/@storybook/client-api/dist/story_store.js
Module not found: Error: Cannot find module '/Users/tyler/Development/pagedip-ui/node_modules/source-map-loader/index.js!/Users/tyler/Development/pagedip-ui/node_modules/core-js/modules/web.timers.js'
Require stack:
- /Users/tyler/Development/pagedip-ui/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/core/dist/server/presets.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/core/dist/server/config.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/core/dist/server/build-static.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/core/server.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/react/dist/server/index.js
- /Users/tyler/Development/pagedip-ui/node_modules/@storybook/react/bin/index.js
 @ ./node_modules/@storybook/client-api/dist/story_store.js 63:0-37
 @ ./node_modules/@storybook/client-api/dist/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/KnobManager.js
 @ ./node_modules/@storybook/addon-knobs/dist/registerKnobs.js
 @ ./node_modules/@storybook/addon-knobs/dist/index.js
 @ ./component/tab-panel/__stories__/tab-panel.stories.tsx
 @ ./component/tab-panel sync ^\.\/((?!node_modules\/).)*\.stories\.(t|j)sx?$/
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

If I downgrade to 5.1.3, things continue to work again. Happy to share more about my repo if asked!

I did some repo spelunking today and noted the following, I hope it helps:

$ yarn list --pattern=babel-loader 
yarn list v1.16.0
โ””โ”€ [email protected]
โœจ  Done in 2.18s.
$ yarn list --pattern=core-js 
yarn list v1.16.0
โ”œโ”€ @babel/[email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”œโ”€ [email protected]
โ”œโ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ””โ”€ [email protected]
   โ””โ”€ [email protected]
โœจ  Done in 1.22s.
$ yarn why babel-polyfill  
yarn why v1.16.0
[1/4] ๐Ÿค”  Why do we have the module "babel-polyfill"...?
[2/4] ๐Ÿšš  Initialising dependency graph...
[3/4] ๐Ÿ”  Finding dependency...
[4/4] ๐Ÿšก  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#@commitlint#cli" depends on it
   - Hoisted from "_project_#@commitlint#cli#babel-polyfill"
โœจ  Done in 1.82s.

and here are my dependencies:

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-private-methods": "^7.4.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/register": "^7.4.4",
    "@commitlint/cli": "^7.6.1",
    "@commitlint/config-conventional": "^7.6.0",
    "@forter/eslint-config": "^1.0.0",
    "@open-wc/demoing-storybook": "^0.2.2",
    "@open-wc/testing": "^0.11.4",
    "@open-wc/testing-karma": "^1.1.1",
    "@storybook/addon-a11y": "^5.2.0-alpha.28",
    "@storybook/addon-actions": "^5.2.0-alpha.28",
    "@storybook/addon-backgrounds": "^5.2.0-alpha.28",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-knobs": "^5.2.0-alpha.28",
    "@storybook/addon-links": "^5.2.0-alpha.28",
    "@storybook/addon-notes": "^5.2.0-alpha.28",
    "@storybook/addon-options": "^5.2.0-alpha.28",
    "@storybook/addon-storysource": "^5.2.0-alpha.28",
    "@storybook/addon-viewport": "^5.2.0-alpha.28",
    "@storybook/addons": "^5.2.0-alpha.28",
    "@storybook/channels": "^5.2.0-alpha.28",
    "@storybook/cli": "^5.2.0-alpha.28",
    "@storybook/components": "^5.2.0-alpha.28",
    "@storybook/core": "^5.2.0-alpha.28",
    "@storybook/core-events": "^5.2.0-alpha.28",
    "@storybook/polymer": "^5.2.0-alpha.28",
    "@storybook/router": "^5.2.0-alpha.28",
    "@storybook/theming": "^5.2.0-alpha.28",
    "@storybook/ui": "^5.2.0-alpha.28",
    "@types/graphql": "^14.0.5",
    "@types/sinon-chai": "^3.2.2",
    "babel-eslint": "^10.0.1",
    "babel-plugin-transform-dynamic-import": "^2.1.0",
    "chai": "^4.2.0",
    "codecov": "^3.5.0",
    "commitizen": "^3.1.1",
    "crocks": "^0.11.1",
    "cz-lerna-changelog": "^2.0.2",
    "eslint": "^5.15.3",
    "eslint-config-google": "^0.13.0",
    "eslint-config-recommended": "^4.0.0",
    "eslint-plugin-html": "^5.0.5",
    "eslint-plugin-json": "^1.4.0",
    "eslint-plugin-no-loops": "^0.3.0",
    "eslint-plugin-wc": "^1.1.0",
    "esm": "^3.2.25",
    "husky": "^2.3.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "karma": "^4.0.1",
    "karma-mocha": "^1.3.0",
    "karma-sinon-chai": "^2.0.2",
    "karma-webpack": "^5.0.0-alpha.3.0",
    "lerna": "^3.14.1",
    "lerna-update-wizard": "^0.14.0",
    "lint-staged": "^8.1.7",
    "lit-css-loader": "0.0.3",
    "lit-element": "^2.1.0",
    "lit-html": "^1.1.0",
    "mocha": "^6.1.4",
    "npm-run-all": "^4.1.5",
    "patch-package": "^6.1.2",
    "puppeteer": "^1.16.0",
    "rimraf": "^2.6.3",
    "rollup": "^1.12.3",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-lit-css": "^2.0.0",
    "rollup-plugin-lit-html-svg": "^0.1.5",
    "rollup-plugin-multi-entry": "^2.1.0",
    "rollup-plugin-node-resolve": "^5.0.0",
    "semantic-release": "^15.13.12",
    "sinon": "^7.3.2",
    "sinon-chai": "^3.3.0",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.2.0"
  },
  "dependencies": {
    "bound-decorator": "^1.1.0"
  }

applying @jonkwheeler 's solution to the open-wc defaultConfig did not help
removing @commitlint/cli, with it's dependency on babel-polyfill did not help
removing @storybook/addon-storysource did not help
adding peerDependencies react react-dom webpack babel-loader prop-types polymer-webpack-loader did not help

Errors persist with 5.1.9

I tried with last version 5.1.9 and I'm getting this errors:

ERROR in [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/array-includes.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/to-absolute-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/array-includes.js 3:22-63
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/object-keys-internal.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/object-get-own-property-names.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/own-keys.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/copy-constructor-properties.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/internals/export.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/node_modules/core-js/modules/web.immediate.js
 @ [PROJECT_PATH]/node_modules/@storybook/channels/dist/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/channel-postmessage/dist/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/preview/start.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/array-includes.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/to-absolute-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/array-includes.js 3:22-63
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/object-keys-internal.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/object-get-own-property-names.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/own-keys.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/copy-constructor-properties.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/internals/export.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/node_modules/core-js/modules/web.timers.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/dist/config_api.js
 @ [PROJECT_PATH]/node_modules/@storybook/client-api/dist/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/features/symbol/index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js 7:0-34
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.string.split.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/advance-string-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.string.split.js 7:25-69
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/@storybook/router/dist/utils.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/@storybook/router/utils.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.string.replace.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/advance-string-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.string.replace.js 8:25-69
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/@storybook/router/dist/utils.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/@storybook/router/utils.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.string.match.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/advance-string-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.string.match.js 6:25-69
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/@storybook/router/dist/utils.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/@storybook/router/utils.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/array-includes.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/to-absolute-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/array-includes.js 3:22-63
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/object-keys-internal.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/object-get-own-property-names.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/own-keys.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/copy-constructor-properties.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/export.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.object.define-property.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.array.slice.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/internals/to-absolute-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/core/node_modules/core-js/modules/es.array.slice.js 5:22-63
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/render.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/polymer/dist/client/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/core-js/modules/es6.regexp.match.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/core-js/modules/_advance-string-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/core-js/modules/es6.regexp.match.js 5:25-59
 @ [PROJECT_PATH]/node_modules/@storybook/addon-actions/dist/preview/withActions.js
 @ [PROJECT_PATH]/node_modules/@storybook/addon-actions/dist/preview/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/addon-actions/dist/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/addon-console/dist/index.js
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/core-js/modules/es6.regexp.split.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/core-js/modules/_advance-string-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/core-js/modules/es6.regexp.split.js 6:25-59
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/client-api/dist/story_store.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/client-api/dist/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/polymer/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/index.js
 @ ./stories/lava-typography.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/core-js/modules/es6.regexp.replace.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/core-js/modules/_advance-string-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/core-js/modules/es6.regexp.replace.js 7:25-59
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/client-api/dist/story_store.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/client-api/dist/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/core/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/core/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/core/client.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/polymer/dist/client/preview/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/polymer/dist/client/index.js
 @ [PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/index.js
 @ ./stories/lava-typography.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [PROJECT_PATH]/node_modules/core-js/modules/_array-includes.js
Module not found: Error: Cannot find module '[PROJECT_PATH]/node_modules/@open-wc/demoing-storybook/node_modules/@storybook/addon-storysource/loader.js![PROJECT_PATH]/node_modules/core-js/modules/_to-absolute-index.js'
Require stack:
- [PROJECT_PATH]/node_modules/corejs-upgrade-webpack-plugin/dist/index.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/manager/manager-preset.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/presets.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/config.js
- [PROJECT_PATH]/node_modules/@storybook/core/dist/server/build-static.js
- [PROJECT_PATH]/node_modules/@storybook/core/server.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/dist/server/index.js
- [PROJECT_PATH]/node_modules/@storybook/polymer/bin/index.js
 @ [PROJECT_PATH]/node_modules/core-js/modules/_array-includes.js 5:22-53
 @ [PROJECT_PATH]/node_modules/core-js/modules/_object-keys-internal.js
 @ [PROJECT_PATH]/node_modules/core-js/modules/_object-keys.js
 @ [PROJECT_PATH]/node_modules/core-js/modules/es6.object.keys.js
 @ [PROJECT_PATH]/node_modules/@storybook/addon-storysource/node_modules/@storybook/addons/dist/index.js
 @ [PROJECT_PATH]/node_modules/@storybook/addon-storysource/dist/preview.js
 @ [PROJECT_PATH]/node_modules/@storybook/addon-storysource/dist/index.js
 @ ./stories/lava-typography.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi [PROJECT_PATH]/node_modules/@storybook/core/dist/server/common/polyfills.js [PROJECT_PATH]/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

And where is the dependency versions:

    "@open-wc/demoing-storybook": "^0.2.5",
    "@open-wc/storybook": "^0.2.8",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/polymer": "^5.1.9",

Dear Stale,

Your enthusiasm, though appreciated in its own right, is in this instance misplaced. We sincerely wish you the best going forward, but please give our issue a chance.

Yours,

-- some devs

With that out of the way, I'm here to confirm that this issue is still relevant to 5.2.0-beta.7

@pksunkara we might need to give the lazy-universal-dotenv an upgrade to core-js v3?

Yeah, looks like it

lazy-universal-dotenv already depends on core-js 3?

    "core-js": "^3.0.4",

I was able to build storybook successfully with 5.2.0-beta.18 and this command start-storybook -p 9001 -s storybook-static

However, once the page loaded, I got these console errors:

TypeError: "_ref4.edition is undefined"
    listener http://localhost:9001/vendors~main.2cb63c2e1c49303b369e.bundle.js:10670
    handleEvent http://localhost:9001/vendors~main.2cb63c2e1c49303b369e.bundle.js:17555
    handleEvent http://localhost:9001/vendors~main.2cb63c2e1c49303b369e.bundle.js:17554
    Channel http://localhost:9001/vendors~main.2cb63c2e1c49303b369e.bundle.js:17445
    handler http://localhost:9001/vendors~main.2cb63c2e1c49303b369e.bundle.js:16852
    handleEvent http://localhost:9001/vendors~main.2cb63c2e1c49303b369e.bundle.js:16950
vendors~main.2cb63c2e1c49303b369e.bundle.js:19745:26
TypeError: "storyStore.setPath is not a function"
    start start.js:262
    handleEvent index.js:195
    handleEvent index.js:194
    Channel index.js:85
    handler index.js:109
    handleEvent index.js:207

I get this in FF only, but in chromium (edgium) it works. I will file a separate issue.

I was finally able to get 5.1.11 to build, using the following webpack.config.js:

const and = require('crocks/logic/and');
const isString = require('crocks/predicates/isString');
const compose = require('crocks/helpers/compose');
const propOr = require('crocks/helpers/propOr');

const includes = x => xs => xs.includes(x);
const some = p => xs => xs.some(p);

const getUse = propOr(null, 'use');

const isStyleLoader = and(isString, includes('style-loader'));

const usesStyleLoader = compose(some(isStyleLoader), getUse);

const LIT_CSS_REGEXP = /src\/(.*)\.css$/

const options = require('../.babelrc');

const LIT_CSS_RULE = {
  test: LIT_CSS_REGEXP,
  loader: 'lit-css-loader',
}

const transpilePackages = [
  'lit-html',
  'lit-element',
  '@open-wc',
  'crocks'
]

// this is a separate config for only those packages
// the main storybook will use the .babelrc which is needed so storybook itself works in IE
const TRANSPILE_PACKAGES_RULE = {
  test: /\.js$/,
  include: transpilePackages.map(package => new RegExp(`node_modules(\\/|\\\\)(${package})(.*)\\.js$`)) ,
  exclude: [/@babel\/runtime/, /core-js/, /axe-core/, /@storybook/],
  loader: 'babel-loader',
  options: {
    plugins: [
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-proposal-object-rest-spread',
    ],
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'entry',
          corejs: '3',
        },
      ],
    ],
    babelrc: false,
  }
}

const BABEL_LOADER_RULE = {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: [/@babel\/runtime/, /core-js/, /axe-core/],
  options
}

module.exports = ({ config }) => {
  config.module.rules = [
    ...config.module.rules,
    BABEL_LOADER_RULE,
    LIT_CSS_RULE,
    TRANSPILE_PACKAGES_RULE,
  ];

  config.module.rules
    .find(usesStyleLoader)
    .exclude = LIT_CSS_REGEXP;

  return config;
};

If someone wants that commit be make it into @storybook/polymer, they'd have to open a PR here https://github.com/storybookjs/storybook/tree/master/app/polymer

FYI we're dropping support for storybook for polymer and focussing on supporting plain web-components instead.

Was this page helpful?
0 / 5 - 0 ratings