React Native Reanimated 在 React Native Web 中不起作用，并且在使用 webpack 运行 Web 构建时抛出模块无法解析错误

Question

我在打字稿中有现有的 React-Native 应用程序。我们使用的是 React-native-reanimated 2.14.4。根据文档，这个版本支持网络，我已经按照官方文档中提到的进行了配置。

我正在使用 webpack.config.js 来启动我的应用程序，并且我还有 babel.config.js。在 babel.config.js 中我添加了所需的插件

但是当我从 webpack 运行我的应用程序时，它会抛出错误。我附上配置屏幕截图以供参考。 我还需要 webpack 中的其他东西吗？或任何想法如何解决

Answer 1

对我来说，使用 babel-loader 时它忽略了 node_modules，我添加了包（包括重新启动）来转译它并且它起作用了。

这是我的react-native-web配置

const transpilePackages = [
    'react',
    'react-native',
    'react-redux',
    'react-native-svg',
    'react-native-reanimated',
    'react-native-gesture-handler',
    '@gorhom/bottom-sheet',
];

const resolvedTranspilePackages = transpilePackages.map((p) => {
    return path.resolve(__dirname, '../../node_modules', p);
});

/** @type { import('webpack').Configuration } */
const configs = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: [
                    path.resolve(
                        __dirname,
                        '../../node_modules/react-redux/node_modules/@babel',
                    ), // I got this error with @babel cjs so just ignore it
                ],
                include: [
                    ...resolvedTranspilePackages,
                    path.resolve(__dirname, 'src'),
                ],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['module:metro-react-native-babel-preset'],
                            plugins: ['react-native-web'],
                        },
                    },
                ],
            },
        ],
    },
    resolve: {
        alias: {
            'react-native$': 'react-native-web',
        },
        extensions: assetFileExtensions
            .map((extension) => '.' + extension)
            .concat([
                '.web.js',
                '.web.jsx',
                '.web.ts',
                '.web.tsx',
                '.js',
                '.jsx',
                '.ts',
                '.tsx',
            ]),
    },
    // ...
}

Answer 2

react-native-reanimated 我相信这是一个仅限移动设备的模块，因此您并不真正希望它与网络包一起编译。