NextJS-具有react-native-elements的React-Native monorepo

问题描述

我正在尝试在本机单反应源中使用本机元素。 它在Native App中工作正常，但在NextJS应用程序中却无法正常工作。

首先，它会成功编译：

> with-react-native-web@ dev <path>\WebApp
> next

ready - started server on http://localhost:3000
info  - automatically enabled Fast Refresh for 1 custom loader
info  - Using external babel configuration from <path>\WebApp\babel.config.js
event - compiled successfully

但是当我尝试访问http：// localhost：3000时，它再次开始编译，但是失败：

<path>\WebApp\node_modules\react-native-elements\src\index.js:7
import Button from './buttons/Button';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:791:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.react-native-elements (<path>\WebApp\.next\server\pages\_app.js:3783:18)
    at __webpack_require__ (<path>\WebApp\.next\server\pages\_app.js:23:31)
    at Module../pages/_app.js (<path>\WebApp\.next\server\pages\_app.js:3640:79)

我认为该错误可能在next.config.js文件中：

const path = require('path');

module.exports = {
  webpack: (config,{ defaultLoaders }) => {
    config.resolve = {
      ...config.resolve,alias: {
        ...config.resolve.alias,'react-native': path.join(__dirname,'node_modules','react-native-web'),},modules: [
        ...config.resolve.modules,path.resolve(__dirname,'node_modules'),],}

    config.module.rules.push({
      test: /\.+(js|jsx)$/,use: defaultLoaders.babel,include: [
        path.resolve(__dirname,'..','shared'),'react-native-elements'),'react-native-vector-icons'),'react-native-ratings'),})

    config.module.rules.push({
      test: /\.(jpe?g|png|gif|svg)$/i,loader: "file-loader?name=/public/icons/[name].[ext]"
    })

    return config;
  }
} 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）