问题
I created a project using react native web and I got react native icons working for web and mobile except on storybook. I'm not sure how to tell storybooks webpack config to load FontAwesome fonts. I tried adding FontAwesome in the preview-head.html but Still not showing the icons just a rectangle as a placeholder. What I would like is to have my icons showing up in the storybook webpack server.
.storybook/main.js:
const webpack = require('webpack');
const path = require('path');
const rootDir = path.join(__dirname, '..');
module.exports = {
stories: ['../src/storybook/stories/*.stories.tsx'],
// addons: ['@storybook/addon-docs', '@storybook/addon-viewport', '@storybook/addon-knobs/', '@storybook/addon-links/', '@storybook/addon-actions/'],
webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
options: {
transpileOnly: true
}
}
],
},
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(
__dirname,
'../node_modules/react-native-vector-icons',
),
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules[/\\](?!react-native|react-native-vector-icons|react-color|react-native-gesture-handler|@react-native-community|react-navigation|@react-navigation\/.*)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'module:metro-react-native-babel-preset',
'@babel/preset-env',
'@babel/preset-flow',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
'react-native-web',
],
},
},
},
)
config.plugins.push(
new webpack.DefinePlugin({
__DEV__: process.env.NODE_ENV !== 'production',
}),
);
config.resolve.alias = {
...(config.resolve.alias || {}),
'react-native': 'react-native-web',
'@storybook/react-native': '@storybook/react',
'@sentry/react-native': '@sentry/react',
'react-native-maps': 'react-native-web-maps',
'react-native-gesture-handler/GestureHandler': require.resolve(
'react-native-gesture-handler/GestureHandler',
),
'react-native-gesture-handler/RNGestureHandlerModule': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler/RNGestureHandlerModule.web.js',
),
'./RNGestureHandlerModule': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler/RNGestureHandlerModule.web.js',
),
'./GestureHandlerButton': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler',
'GestureHandlerButton.web.js',
),
'./GestureComponents': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler',
'GestureComponents.web.js',
),
'./PlatformConstants': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler',
'PlatformConstants.web.js',
),
'@utilities': path.resolve(__dirname, '../src/utilities/'),
'@queries': path.resolve(__dirname, '../src/queries'),
'@pages': path.resolve(__dirname, '../src/components/pages'),
'@styled-components': path.resolve(
__dirname,
'../src/types/libraries/styled-components.ts',
),
'@hooks': path.resolve(__dirname, '../src/hooks'),
'@atoms': path.resolve(__dirname, '../src/components/atoms'),
'@molecules': path.resolve(__dirname, '../src/components/molecules'),
'@resources': path.join(__dirname, '../src/resources'),
'@providers': path.resolve(__dirname, '../src/providers'),
'@enums': path.resolve(__dirname, '../src/enums'),
'@common': path.resolve(__dirname, '../src/components/common'),
'@contexts': path.resolve(__dirname, '../src/contexts'),
'@util': path.resolve(__dirname, '../src/components/util'),
'@images': path.resolve(__dirname, '../src/assets/images'),
'@icons': path.resolve(__dirname, '../src/assets/icons'),
'@fonts': path.resolve(__dirname, '../src/assets/fonts'),
};
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
return config;
},
};
.storybook/preview-head.html
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<style type="text/css">
@font-face {
font-family: Quicksand-Bold;
src: url('https://fonts.gstatic.com/s/a/6bb475d143c61221c4ea174d3c51728268e58b12dbc14600d59020ef8deaaead.ttf');
}
@font-face {
font-family: Quicksand-Regular;
src: url('https://fonts.gstatic.com/s/a/0f408f35c3679417b5580701f3ac08830ce36535af5a643a2ef5b59e91c3c6b7.ttf');
}
@font-face {
font-family: Lato-Regular;
src: url('https://fonts.gstatic.com/s/a/a649aaf21573a59079c46db19314fd95648f531e610fa932101f2705616b2882.ttf');
}
@font-face {
font-family: Lato-Bold;
src: url('https://fonts.gstatic.com/s/a/407592da08cb1f6060fbc69262ad33edd0b61ec9160521455eca8f726bbd4353.ttf');
}
</style>
<script>
import FontAwesome from '../node_modules/react-native-vector-icons/FontAwesome.js';
// Generate required css
import {iconFont} from '../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
src: url(${iconFont});
font-family: FontAwesome;
}`;
// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = iconFontStyles;
} else {
style.appendChild(document.createTextNode(iconFontStyles));
}
// Inject stylesheet
document.head.appendChild(style);
try {
FontAwesome.loadFont();
console.log("working!");
} catch (e) {
console.log(e);
}
</script>
package.json
"storybook:web": "start-storybook -p 6006"
I think the problem exist in preview-head.html and I know I can't use import modules in the script tag but not sure where else to load fontAwesome so storybook can pick it up. Thanks!
回答1:
For anyone having problems with this I needed to be specific on which file to be included for the url loader.
This change fixed the error:
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(
__dirname,
'../node_modules/react-native-vector-icons/FontAwesome5.js',
),
},
I also moved the font awesome script into the preview.js file
来源：https://stackoverflow.com/questions/64346044/react-native-web-issue-with-react-native-vector-icons-in-storybook