E.D*_*E.D 7 javascript reactjs webpack storybook
我尝试使用故事书文档插件,但我遇到了这个错误:
ERROR in ./node_modules/react-native/index.js 13:7
Module parse failed: Unexpected token (13:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 'use strict';
|
Run Code Online (Sandbox Code Playgroud)
我尝试了很多方法但没有任何效果,我找不到
这里阻塞的原因是.storybook文件夹中的main.js:
const 路径 = require('路径');
module.exports = {
stories: ['../shared/**/*.stories.tsx'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
{
name: '@storybook/addon-docs',
options: {
configureJSX: true,
},
},
],
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) =>
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
},
},
}
Run Code Online (Sandbox Code Playgroud)
我的Preview.js在.storybook文件夹中:
import React from 'react'
import { addDecorator, addParameters } from '@storybook/react'
import { ThemeProvider, theme } from '../shared/theme'
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
},
});
addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>);
Run Code Online (Sandbox Code Playgroud)
我的webpack.config.js:
module.exports = ({ config }) => {
config.resolve.alias = {
'@components': path.resolve(__dirname, '..', 'shared/'),
},
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
],
})
// config.module.rules.push({
// test: /\.(js|jsx)$/,
// exclude: /node_modules/,
// use: [ {loader: require.resolve('babel-loader')}],
// })
config.resolve.extensions.push('.ts', '.tsx')
return config
}
Run Code Online (Sandbox Code Playgroud)
和我的.babelrc如果它有用的话:
{
"presets": [
["@babel/preset-env", { "targets": { "node": "current" } }],
"@babel/preset-react",
"@babel/preset-typescript",
"babel-preset-const-enum"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"babel-plugin-styled-components",
"const-enum",
"@babel/transform-typescript"
]
}
Run Code Online (Sandbox Code Playgroud)
我还将故事书版本放入package.json中:
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-docs": "^6.0.21",
"@storybook/addon-knobs": "^6.0.21",
"@storybook/addon-links": "^6.0.21",
"@storybook/addons": "^6.0.21",
"@storybook/core": "^6.0.21",
"@storybook/preset-create-react-app": "3.1.4",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.0.21",
Run Code Online (Sandbox Code Playgroud)
如果你有想法?
| 归档时间: |
|
| 查看次数: |
4530 次 |
| 最近记录: |