storybook: @storybook/react 4.0.0-alpha.18 alias to @babel/runtime breaks build with some libs

Bug

There are some structural changes between stable @babel/runtime@7.0.0 and @babel/runtime@7.0.0-beta.42 (or other beta versions, where @babel/runtime contained more helpers).

In default config we have an alias:

https://github.com/storybooks/storybook/blob/v4.0.0-alpha.18/lib/core/src/server/config/webpack.config.js#L107-L109

In case, when we have some dependencies, that rely on older babel version (react-swipeable-views in my case), current storybook configuration will break the build with similar to the following errors:

ERROR in ./node_modules/react-swipeable-views-utils/lib/bindKeyboard.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/builtin/possibleConstructorReturn' in '/home/danilenko/htdocs/fc-app/node_modules/react-swipeable-views-utils/lib'
 @ ./node_modules/react-swipeable-views-utils/lib/bindKeyboard.js 18:57-124
 @ ./node_modules/react-swipeable-views-utils/lib/index.js
 @ ./packages/app/search/components/PerformersListContainer.js
 @ ./packages/app/search/components/TopPerformersList.js
 @ ./packages/app/search/index.js
 @ ./packages/app/shell/App.js
 @ ./packages/app/shell/index.js
 @ ./packages/app/dev-tools/storybook/ContextProvider.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in ./node_modules/react-swipeable-views/lib/SwipeableViews.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/builtin/possibleConstructorReturn' in '/home/danilenko/htdocs/fc-app/node_modules/react-swipeable-views/lib'
 @ ./node_modules/react-swipeable-views/lib/SwipeableViews.js 20:57-124
 @ ./node_modules/react-swipeable-views/lib/index.js
 @ ./packages/app/search/components/PerformersListContainer.js
 @ ./packages/app/search/components/TopPerformersList.js
 @ ./packages/app/search/index.js
 @ ./packages/app/shell/App.js
 @ ./packages/app/shell/index.js
 @ ./packages/app/dev-tools/storybook/ContextProvider.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in ./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/builtin/typeof' in '/home/danilenko/htdocs/fc-app/node_modules/react-event-listener/dist'
 @ ./node_modules/react-event-listener/dist/react-event-listener.cjs.js 11:30-78
 @ ./node_modules/react-swipeable-views-utils/lib/bindKeyboard.js
 @ ./node_modules/react-swipeable-views-utils/lib/index.js
 @ ./packages/app/search/components/PerformersListContainer.js
 @ ./packages/app/search/components/TopPerformersList.js
 @ ./packages/app/search/index.js
 @ ./packages/app/shell/App.js
 @ ./packages/app/shell/index.js
 @ ./packages/app/dev-tools/storybook/ContextProvider.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

If you remove an alias — everything works like a charm. Is there any reason to have a hardcoded alias?

More details

Here is an example of the code, that will break the build with current storybook config:

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/builtin/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getDomTreeShapes = getDomTreeShapes;
exports.findNativeHandler = findNativeHandler;
exports.default = void 0;

// ...

resolve.alias will force to use the top-level node_modules/@babel/runtime module, instead of local module with correct version, e.g. node_modules/react-swipeable-views/node_modules/@babel/runtime/helpers

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 23 (6 by maintainers)

Most upvoted comments

react-powerplug is also broken by this

https://github.com/renatorib/react-powerplug/issues/166#issuecomment-417783881

cheapsteak on Oct 29, 2018

As a temporary fix you can use NormalModuleReplacementPlugin:

    new webpack.NormalModuleReplacementPlugin(
      /@babel\/runtime\/helpers\/builtin/,
      resource => {
        resource.request = resource.request.replace(
          '@babel/runtime/helpers/builtin',
          'react-swipeable-views/node_modules/@babel/runtime/helpers/builtin',
        );
      },
    ),

replace react-swipeable-views with the name of one of the modules, that failing to build

SleepWalker on Aug 28, 2018

@SleepWalker @Hypnosphi When using the “Full control mode + default”:

module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.resolve = {
    ...defaultConfig.resolve,
    alias: {
      ...defaultConfig.resolve.alias,
      "@babel/runtime": "@babel/runtime"
    }
  }

  // more code here

  return defaultConfig
}

chikalaka on Dec 1, 2018

another one lib, that breaks due to this alias is material-ui

SleepWalker on Oct 20, 2018