描述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
3条答案
按热度按时间v440hwme1#
从文档中复制。
https://storybook.js.org/docs/react/get-started/install
storybook init
不适用于空项目Storybook 需要安装到已经设置了框架的项目中。它无法在空项目上工作。有许多方法可以在给定的框架中引导应用程序,包括:
📦 Create an Angular Workspace
📦 Create React App
📦 Vue CLI
📦 Ember CLI
或者任何其他可用的工具。
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框架,它不是空项目。
uplii1fm3#
我正在看到同样的事情,在一个Gatsby v4项目中。我们的storybook配置在一段时间里被搁置了,现在正在清理它,所以不确定这是否造成了任何问题。