看起来 at-loader 无法加载所需的所有模块。我该怎么做才能让加载程序知道 react-native 中的“AccessibilityInfo”之类的模块？
例如：
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AccessibilityInfo' in 'app/node_modules/react-native/Libraries/react-native'
npm 运行故事书
$ start-storybook start -p 7007 -c .storybook
info @storybook/react v3.3.9
info
Failed to load ./.env.
info => Loading custom .babelrc
info => Loading custom webpack config (full-control mode).
26% building modules 136/147 modules 11 active ...-v2/node_modules/es5-shim/es5-shim.js
[at-loader] Using typescript@2.5.3 from typescript and "tsconfig.json" from app/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 185 errors
webpack built c763d68b78931e9f2589 in 7072ms
Hash: c763d68b78931e9f2589
Version: webpack 3.10.0
Time: 7072ms
Asset Size Chunks Chunk Names
static/manager.bundle.js 2.63 MB 0 [emitted] [big] manager
static/preview.bundle.js 1.62 MB 1 [emitted] [big] preview
static/manager.bundle.js.map 3.22 MB 0 [emitted] manager
static/preview.bundle.js.map 1.92 MB 1 [emitted] preview
index.html 1.2 kB [emitted]
iframe.html 583 bytes [emitted]
[205] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
[517] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/addons.js ./node_modules/@storybook/react/dist/client/manager/index.js 52 bytes {0} [built]
[518] ./node_modules/@storybook/react/dist/server/addons.js 105 bytes {0} [built]
[519] ./node_modules/@storybook/addon-actions/register.js 30 bytes {0} [built]
[520] ./node_modules/@storybook/addon-links/register.js 30 bytes {0} [built]
[521] ./node_modules/@storybook/react/dist/client/manager/index.js 404 bytes {0} [built]
[729] ./node_modules/@storybook/react/dist/client/manager/provider.js 3.31 kB {0} [built]
[731] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
[732] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
[733] (webpack)-hot-middleware/client.js?reload=true 7.35 kB {1} [built]
[737] ./node_modules/strip-ansi/index.js 161 bytes {1} [built]
[739] (webpack)-hot-middleware/client-overlay.js 2.21 kB {1} [built]
[744] (webpack)-hot-middleware/process-update.js 4.33 kB {1} [built]
[745] ./.storybook/config.js 94 bytes {1} [built]
[817] ./stories/index.js 925 bytes {1} [built]
+ 807 hidden modules
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AccessibilityInfo' in 'app/node_modules/react-native/Libraries/react-native'
@ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 19:35-63
@ ./src/components/Question.tsx
@ ./stories/index.js
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js
/src/components/Question.tsx
1 import * as React from "react"
2 import { StyleProp, StyleSheet, Text, ViewStyle } from "react-native"
3 import { colors } from "../styles/colors"
4 import { fonts } from "../styles/fonts"
5
6 export interface IProps {
7 style?: StyleProp<ViewStyle>
8 onPress?: () => void
9 }
10
11 const styles = StyleSheet.create({
12 title: {
13 color: colors.black,
14 fontFamily: fonts.bold,
15 fontSize: 24,
16 fontWeight: "bold",
17 marginBottom: 10,
18 textAlign: "center",
19 },
20 })
21
22 export const Question: React.SFC<IProps> = ({ style, ...otherProps }) => (
23 <Text style={ [styles.title, style] }> { otherProps.children } </Text >
24 )
babelrc
1 {
2 "presets": [
3 "react-native"
4 ]
5 }
故事/index.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Question from '../src/components/Question';
storiesOf('Question', module)
.add('with text', () => (
<Question onPress={action('clicked')}>Hello Button</Question>
))
.add('with some emoji', () => (
<Question onPress={action('clicked')}> </Question>
));
.storybook/webpack.config.js
// load the default config generator.
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);
// Extend it as you need.
// For example, add typescript loader:
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('awesome-typescript-loader')
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
tsconfig.json
{
"compilerOptions": {
/* Basic Options */
"target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": ["es2017", "dom"], /* Specify library files to be included in the compilation: */
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"outDir": "./lib", /* Redirect output structure to the directory. */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"strictNullChecks": true, /* Enable strict null checks. */
"noImplicitThis": false, /* Raise error on 'this' expressions with an implied 'any' type. */
/* Additional Checks */
/* Module Resolution Options */
"baseUrl": ".", /* Base directory to resolve non-absolute module names. */
"paths": {
"*": ["*", "*.ios", "*.android"]
} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
/* Source Map Options */
/* Experimental Options */
},
"include": ["./src/**/*"],
"exclude": ["./src/node_modules/**/*"]
}