我正在尝试为react native和typescript项目配置我的web故事书。
我正在学习一个教程，也有webpack，直到最后一切都很好。我的故事书似乎是空的，我的控制台中有一个加载程序错误。
Unexpected error while loading ./Test/Test.stories.js: Error: Module parse failed: Unexpected token (8:40)
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
| const buttonStories = storiesOf('Test Folder', module)
|
> buttonStories.add('default view', () => <Test />)
我尝试过更改加载程序，也读过关于webpack加载程序的文章，但都不起作用。这是我的项目文件。
package.json
{
"name": "XXX",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"prestorybook": "rnstl",
"build-react": "webpack --mode production",
"start-react": "webpack serve --config ./webpack.config.js --mode development",
"start-storybook-web": "./node_modules/@storybook/react/bin/index.js",
"build-storybook-web": "./node_modules/@storybook/react/bin/build.js",
"storybook-web": "yarn run start-storybook-web"
},
"config": {
"react-native-storybook-loader": {
"searchDir": [
"./src/components"
],
"pattern": "**/*.stories.js",
"outputFile": "./storybook/storyLoader.js"
}
},
"dependencies": {
"@types/react": "^17.0.4",
"@types/react-native": "^0.64.4",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-web": "^0.16.2",
"ts-loader": "^9.1.2",
"typescript": "^4.2.4"
},
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/preset-env": "^7.14.1",
"@babel/preset-react": "^7.13.13",
"@babel/runtime": "^7.14.0",
"@react-native-community/eslint-config": "^2.0.0",
"@storybook/addon-actions": "^6.2.9",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-knobs": "^5.3",
"@storybook/addon-links": "^6.2.9",
"@storybook/addon-ondevice-actions": "^5.3.23",
"@storybook/addon-ondevice-knobs": "^5.3.25",
"@storybook/react": "^6.2.9",
"@storybook/react-native": "^5.3.25",
"@storybook/react-native-server": "^5.3.23",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"eslint": "^7.25.0",
"html-webpack-plugin": "^5.3.1",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-dom": "^17.0.2",
"react-native-storybook-loader": "^2.0.3",
"react-test-renderer": "17.0.1",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
},
"jest": {
"preset": "react-native"
}
}
webpack.config.js
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: 'index.html',
inject: 'body',
})
module.exports = {
entry: path.join(__dirname, 'index.web.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/build'),
},
resolve: {
alias: {
'react-native$': 'react-native-web',
'@storybook/react-native': '@storybook/react', //<-here
},
modules: [
path.resolve(__dirname, '../../src'),
path.resolve(__dirname, '../../node_modules'),
],
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /.(js|jsx)$/,
exclude: [/bower_components/, /node_modules/, /styles/],
loader: 'babel-loader',
include: path.resolve(__dirname, '../../src'),
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
{
test: /(@?react-(navigation|native)).*.(ts|js)x?$/,
include: /node_modules/,
exclude: [/react-native-web/, /.(native|ios|android).(ts|js)x?$/],
loader: 'babel-loader'
},
],
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
}
测试.tsx
import React from 'react'
import { Text } from 'react-native'
const Test = () => {
return (
<Text>Probando storybook denuevo</Text>
)
}
export default Test
Test.stories.js
import React from 'react'
import { storiesOf } from '@storybook/react-native'
import Test from './Test'
const buttonStories = storiesOf('Test Folder', module)
buttonStories.add('default view', () => <Test />)
在故事书的main.js文件中，您需要添加
module.exports = {
stories: [
...
],
addons: [
"@storybook/react-native",
],
};