0

我最近决定将 react.js 应用程序迁移到 next.js 框架，但是当我迁移我的聊天页面（我在其中使用 react-web-gifted-chat 包）时遇到了这个问题。问题是包内部使用了 react-native，看起来我们不能在 next.js 网络应用程序中使用 react-native。我们应该做什么？

错误和详细信息：

event - build page: /r/chat
wait  - compiling...
error - ./node_modules/react-native/index.js:14:7
Syntax error: Unexpected token, expected "{"

  12 |
  13 | // Components
> 14 | import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
     |        ^
  15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
  16 | import typeof Button from './Libraries/Components/Button';
  17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';

next.config.js：

const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
    "@persian-tools/persian-mobile-datepicker",
    "react-web-gifted-chat",
    "react-native-web",
    "react-native",
]);
const withImages = require("next-images");
module.exports = withPlugins([withTM], {
    reactStrictMode: true,
    redirects: async () => {
        return [
            {
                source: "/",
                destination: "/r/home",
                permanent: true,
            },
        ];
    },
    images: {
        disableStaticImages: true,
        
    },

    webpack(config, { isServer }) {
        /* adds client-side webpack optimization rules for splitting chunks during build-time */
        if (!isServer) {
            config.optimization.splitChunks.cacheGroups = {
                ...config.optimization.splitChunks.cacheGroups,
                victory: {
                    test: /[\\/]node_modules[\\/](victory-pie|victory-core|victory-pie\/es)[\\/]/,
                    name: "victory",
                    priority: 50,
                    reuseExistingChunk: true,
                },
                recharts: {
                    test: /[\\/]node_modules[\\/](recharts|recharts-scale)[\\/]/,
                    priority: 20,
                    name: "recharts",
                    reuseExistingChunk: true,
                },
                lodash: {
                    test: /[\\/]node_modules[\\/](lodash)[\\/]/,
                    name: "lodash",
                    reuseExistingChunk: true,
                    priority: 40,
                },
            };
        }
        config.resolve.alias = {
            ...(config.resolve.alias || {}),
            // Transform all direct `react-native` imports to `react-native-web`
            "react-native$": "react-native-web",
        };
        config.resolve.extensions = [
            ".web.js",
            ".web.ts",
            ".web.tsx",
            ...config.resolve.extensions,
        ];
        /* return new config to next */
        return config;
    },
    ...withImages(),
});
4

0 回答 0