panzacoder
commented
10 months ago đź‘‹ You very much may want to solve this in a different way. After finding this I was able to equally solve the problem by updating my babelPlugins config like this:
{
name: getAbsolutePath('@storybook/addon-react-native-web'),
options: {
projectRoot,
modulesToTranspile: [
'app', // this is my local monorepo package
'react-native',
'react-native-web',
'solito',
'moti',
'react-native-reanimated',
'react-native-css-interop',
'nativewind',
'react-native-gesture-handler',
],
babelPlugins: [
'react-native-reanimated/plugin',
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
importSource: 'nativewind',
},
],
],
},
},The key line being the change to the @babel/plugin-transform-react-jsx. I tried MANY ways of configuring this for babel otherwise, but this is the only method that would work in order to make the transformation keep the NativeWind classNames intact.
dannyhw
socket-security[bot]
Added an option to pass in custom options for
babel/preset-react, which is required in order to set theimportSourcefor Nativewind v4.I believe this is the root of these issues: