Breaking changes in @storybook/polymer from 5.1.3 to 5.1.4

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.

[bennypowers]

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;
};

[ndelangen]

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.