Setting up of react-native-reanimated-carousel with react-native-web on Bare React Native

[JavanHuang]

Hi there, this is a really great library and replacement for react-native-snap-carousel. I've been looking through the repository for an example of how to configure react-native-reanimated-carousel but all I was able to see was a setup for expo and I tried using some of the webpack configurations used but I'm still experiencing problems with while on react-native-web

ERROR in ../../node_modules/react-native/Libraries/Alert/Alert.js 1:380-408
Module not found: Error: Can't resolve './RCTAlertManager' in '{project}/node_modules/react-native/Libraries/Alert'

ERROR in ../../node_modules/react-native/Libraries/Components/TextInput/TextInputState.js 1:264-299
Module not found: Error: Can't resolve '../../Utilities/Platform' in '{project}/node_modules/react-native/Libraries/Components/TextInput'

ERROR in ../../node_modules/react-native/Libraries/Network/XMLHttpRequest.js 1:1656-1682
Module not found: Error: Can't resolve './RCTNetworking' in '{project}/node_modules/react-native/Libraries/Network'

ERROR in ../../node_modules/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js 1:902-973
Module not found: Error: Can't resolve '../Components/AccessibilityInfo/legacySendAccessibilityEvent' in '{project}/node_modules/react-native/Libraries/ReactPrivate'

ERROR in ../../node_modules/react-native/Libraries/StyleSheet/normalizeColor.js 1:248-284
Module not found: Error: Can't resolve './PlatformColorValueTypes' in '{project}/node_modules/react-native/Libraries/StyleSheet'

ERROR in ../../node_modules/react-native/Libraries/StyleSheet/processColor.js 1:362-417
Module not found: Error: Can't resolve './PlatformColorValueTypes' in '{project}/node_modules/react-native/Libraries/StyleSheet'

ERROR in ../../node_modules/react-native/Libraries/Utilities/HMRClient.js 1:567-588
Module not found: Error: Can't resolve './Platform' in '{project}/node_modules/react-native/Libraries/Utilities'

This is what I have in my webpack.config.js

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const appDirectory = path.resolve(__dirname);
const isProduction = process.env.NODE_ENV === 'production';
const APP_ENV = process.env.APP_ENV;

const compileNodeModules = [
  'react-native-reanimated',
  'react-native-reanimated-carousel',
  'react-native-web'
].map((moduleName) => path.resolve(appDirectory, `../../node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.js$|tsx?$/,
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'src'),
    ...compileNodeModules
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        'react-native-web',
        [
          'babel-plugin-styled-components',
          {
            displayName: !isProduction,
            pure: true
          }
        ],
        process.env.NODE_ENV !== 'production' && 'react-refresh/babel'
      ].filter(Boolean)
    }
  }
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack'
    }
  ]
};

const ttfLoaderConfiguration = {
  test: /\.ttf$/,
  loader: 'url-loader', // or directly file-loader
  include: [path.resolve(appDirectory, '../../node_modules/react-native-vector-icons')]
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false
    }
  }
};

const cssLoaderConfiguration = {
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'postcss-loader']
};

module.exports = {
  target: 'web',
  entry: [
    path.resolve(appDirectory, 'index.web.js')
  ],
  output: { ... },
  resolve: {
    extensions: ['.web.tsx', '.web.ts', 'web.js', '.tsx', '.ts', '.js', '.json'],
    alias: 
      'react-native$': 'react-native-web',
      locales: path.resolve(__dirname, 'i18n/locales'),
      '../Utilities/Platform': 'react-native-web/dist/exports/Platform'
    }
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      svgLoaderConfiguration,
      ttfLoaderConfiguration,
      imageLoaderConfiguration,
      cssLoaderConfiguration
    ]
  }
};

This is what I have in babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
      }
    ],
    'react-native-reanimated/plugin',
    '@babel/plugin-syntax-dynamic-import'
  ]
};

I'm not exactly sure how to resolve all this errors so I would like to seek help on this. Thank you so much, do let me know if you require more details.

[github-actions[bot]]

---

🔴

👨‍💻 I'm so busy recently, so I'm going away for a little while, but I'll come back by the end of this month.

♥️ Rest assured, I love this project, I will not give up.

2022.11.xx

---

[oliverloops]

Hi @JavanHuang 👋, are you facing this issues through the react native app project or specifically on react native for web?, I'm looking how I can help you with this

[JavanHuang]

@oliverloops Hi there, thanks for the follow-up! Apologies for the late reply.

I'm unsure if I did implemented this correctly because there isn't any mention of how this library is compiled onto the web through react-native-web. So what I wanted was to have some clearer instructions on how to use this library with react-native-web (is there any additional steps to do on babel.config.js or webpack.config.js that I'm missing besides the one I've included).

[pgpankajcapgemini]

Hi @JavanHuang : Did you find any solution for this ?