storybook 控制台日志中出现 "__esModule was not supported :( !" 消息,

aiazj4mn  于 3个月前  发布在  其他
关注(0)|答案(3)|浏览(25)

描述bug

在项目上重新安装Storybook后,浏览器控制台出现了以下消息:__esModule was not supported :( !
这来自以下代码:

import { addDecorator, addParameters, addLoader, addArgs, addArgTypes, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '.../node_modules/@storybook/client-api';
import * as config from '.../.storybook/preview.js';
Object.keys(config).forEach(function (key) {
  var value = config[key];

  switch (key) {
    case 'args':
      {
        return addArgs(value);
      }

    case 'argTypes':
      {
        return addArgTypes(value);
      }

    case 'decorators':
      {
        return value.forEach(function (decorator) {
          return addDecorator(decorator, false);
        });
      }

    case 'loaders':
      {
        return value.forEach(function (loader) {
          return addLoader(loader, false);
        });
      }

    case 'parameters':
      {
        return addParameters(_objectSpread({}, value), false);
      }

    case 'argTypesEnhancers':
      {
        return value.forEach(function (enhancer) {
          return addArgTypesEnhancer(enhancer);
        });
      }

    case 'argsEnhancers':
      {
        return value.forEach(function (enhancer) {
          return addArgsEnhancer(enhancer);
        });
      }

    case 'render':
      {
        return setGlobalRender(value);
      }

    case 'globals':
    case 'globalTypes':
      {
        var v = {};
        v[key] = value;
        return addParameters(v, false);
      }

    case '__namedExportsOrder':
    case 'decorateStory':
    case 'renderToDOM':
      {
        return null; // This key is not handled directly in v6 mode.
      }

    default:
      {
        // eslint-disable-next-line prefer-template
        return console.log(key + ' was not supported :( !');
      }
  }
});

在添加任何新内容到preview.js文件之前就发生了这种情况。目前,这看起来像这样:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

无法确切地指出是什么触发了这个问题,但希望能得到一些关于如何移除它的帮助。

系统信息

系统:
操作系统:macOS 12.5
CPU:(10) x64 Apple M1 Pro
二进制文件:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
浏览器:
Chrome: 104.0.5112.79
Firefox: 103.0.1
Safari: 15.6
npm包:
@storybook/addon-actions: ^6.5.10 => 6.5.10
@storybook/addon-essentials: ^6.5.10 => 6.5.10
@storybook/addon-interactions: ^6.5.10 => 6.5.10
@storybook/addon-links: ^6.5.10 => 6.5.10
@storybook/builder-webpack4: ^6.5.10 => 6.5.10
@storybook/manager-webpack4: ^6.5.10 => 6.5.10
@storybook/react: ^6.5.10 => 6.5.10
@storybook/testing-library: ^0.0.13 => 0.0.13

v440hwme

v440hwme1#

从文档中复制。
https://storybook.js.org/docs/react/get-started/install
storybook init 不适用于空项目
Storybook 需要安装到已经设置了框架的项目中。它无法在空项目上工作。有许多方法可以在给定的框架中引导应用程序,包括:
📦 Create an Angular Workspace
📦 Create React App
📦 Vue CLI
📦 Ember CLI
或者任何其他可用的工具。

umuewwlo

umuewwlo2#

从文档中复制。https://storybook.js.org/docs/react/get-started/install
storybook init 不适合空项目
Storybook 需要安装到已经设置了框架的项目中。它无法在空项目上工作。有许多方法可以在给定的框架中引导应用程序,包括:
📦 Create an Angular Workspace
📦 Create React App
📦 Vue CLI
📦 Ember CLI
或者任何其他可用的工具。
抱歉我忘了提到这个项目使用了Gatsby框架,它不是空项目。

uplii1fm

uplii1fm3#

我正在看到同样的事情,在一个Gatsby v4项目中。我们的storybook配置在一段时间里被搁置了,现在正在清理它,所以不确定这是否造成了任何问题。

相关问题