Uncaught ReferenceError: exports is not defined in React Native Web in Windows 10

Viewed 226

I am trying to build react-native-web by using react-native cli code. Initially, I successfully run out in macOS (BigSur), but can't start in the Windows 10. I am using webpack 5.x, babel 7.x, react-native 0.63 now.

webpack.config.js

const _ = require('underscore')
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const platformIndex = _.findIndex(process.argv, arg => arg === '--platform');
const platform = (platformIndex > 0) ? process.argv[platformIndex + 1] : 'web';
// const platformExclude = platform === 'web' ? new RegExp(/\.web\.js$/) : new RegExp(/\.js$/);
// const platformExclude = new RegExp(/\.web\.js$/);
const appDirectory = path.resolve(__dirname, '../');

const includeModules = [
  'react-native-animatable',
  'react-native-reanimated',
  'react-native-picker-select',
  'react-native-web',
  '@react-native-picker',
  'react-native-modal',
  'react-native-gesture-handler',
  'react-native-flipper',
  'react-native-indicators',
  'react-native-vector-icons',
  'react-native/Libraries',
].join('|');

// This is needed for webpack to compile JavaScript.

const babelLoaderConfiguration = {
  test: /\.js$/,
  loader: 'babel-loader',
  /**
   * Exclude node_modules except any packages we need to convert for rendering HTML because they import
   * "react-native" internally and use JSX which we need to convert to JS for the browser.
   *
   * You'll need to add anything in here that needs the alias for "react-native" -> "react-native-web"
   * You can remove something from this list if it doesn't use "react-native" as an import and it doesn't
   * use JSX/JS that needs to be transformed by babel.
   */
  exclude: [
      new RegExp(`node_modules/(?!(${includeModules})/).*|.native.js$`),
  ],
  options: {
    cacheDirectory: true,
    // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
    presets: ['module:metro-react-native-babel-preset'],
    // Re-write paths to import only the modules needed by the app
    plugins: [
      'react-native-web',
      [
        'module-resolver',
        {
          alias: {
            '^react-native$': 'react-native-web',
          },
        },
      ],
    ],
  }
}

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

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

const webpackConfig = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.web.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template: 'web/index.html',
        filename: 'index.html',
        usePolyfillIO: true,
    })
],

  // ...the rest of your config

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration, reactNativeVectorIconConfig],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native-config': 'react-web-config',
      'react-native$': 'react-native-web',
  },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js', '.jsx'],
  },
  devServer: {
    historyApiFallback: true,
  },
};

if(process.env.NODE_ENV === 'desktop') {
  webpackConfig.target = 'electron-renderer'
}


module.exports = webpackConfig

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset']
};

package.json (dev dependencies)

"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.17.5",
    "clean-webpack-plugin": "^4.0.0",
    "concurrently": "^6.5.1",
    "electron": "^16.0.5",
    "electron-builder": "^22.14.5",
    "electron-is-dev": "^2.0.0",
    "electron-reloader": "^1.2.1",
    "eslint": "^7.9.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^25.1.0",
    "jest-fetch-mock": "^3.0.3",
    "metro-react-native-babel-preset": "^0.59.0",
    "portfinder": "^1.0.28",
    "prettier": "^2.1.1",
    "react-test-renderer": "16.13.1",
    "url-loader": "^4.1.1",
    "wait-on": "^6.0.0",
    "wait-port": "^0.2.9",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.1"
  },

When I run it, it shows below error

enter image description here

0 Answers
Related