Open
Description
My React Native project is written in ReScript, and I'm compiling *.res files into *.mjs files. I configured the addon-react-native-web
to my existing React Native project (native cli) by following the documentation. When I run yarn storybook
, I get an error that there is no loader for all *.res files in the project. I don't understand why storybook is trying to parse *.res files other than the file types it defines. Is there any way to ignore certain file types?
ERROR in ./src/App.resi 1:0
Module parse failed: Unexpected character '@' (1:0)
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
> @react.component
| let make: unit => React.element
|
ERROR in ./src/App.res 1:5
Module parse failed: Unexpected token (1:5)
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
> open ReactNative
| open BottomSheet
...

./storybook/main.js
const path = require('path');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-webpack5-compiler-swc',
'@storybook/addon-onboarding',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
{
name: '@storybook/addon-react-native-web',
options: {
modulesToTranspile: ["@braze/react-native-sdk", "stream-chat-react-native", "react-native-reanimated"],
babelPlugins: [
"@babel/plugin-proposal-export-namespace-from",
"react-native-reanimated/plugin",
],
}
},
],
framework: {
name: '@storybook/react-webpack5',
options: {},
},
core: {
builder: 'webpack5',
},
staticDirs: ['../src/assets'],
webpackFinal: async (config) => {
config.plugins.push(new NodePolyfillPlugin());
const fileLoaderRule = config.module.rules.find(
(rule) => rule.test && rule.test.test('.svg'),
);
if (fileLoaderRule) {
fileLoaderRule.exclude = /\.svg$/;
}
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader'],
});
return config;
},
};
export default config;