Storybook docs-addon 模块解析失败:意外的标记

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)

如果你有想法?