2

I am using Android Studio Emulator and configured react-native-web support as per this doc as well. But Whenever I run npm run android it gets the below error:

Error Screenshot

"Could not get BatchedBridge, make sure your bundle is packaged correctly"

I tried many solutions out there like:

  • Delete node_modules and re install
  • Clear cache in react-native start --reset-cache
  • Run react-native start before run-android
  • check .npmrc

But no solution yet. There is no error in metro terminal as well.

Below is my package.json

{
  "name": "shipdemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start --reset-cache",
    "test": "jest",
    "lint": "eslint .",
    "web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
    "build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
  },
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "^17.0.2",
    "react-native": "0.64.2",
    "react-native-web": "^0.16.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.16.5",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.39.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "jest": {
    "preset": "react-native-web"
  }
}

UPDATE:

After enabling Pause on Caught Exception, I got below in the dev tools.

enter image description here

At the same time, Now I got an error in metro as well image

Shivam Sharma
  • 1,277
  • 15
  • 31
  • I followed that same tutorial too, and now get the same error. I'm suspecting that the Babel configuration that aliased `react-native` to `react-native-web` is taking effect in normal `react-native start`. Because it was just working fine before `react-native-web`. I'm gonna play with it and let you know. – KeitelDOG Jun 24 '21 at 17:46
  • I was not able to fix it, but I deleted the emulator device from AVD and created a new device with Play Store API, API 29 and now everything is working fine. I have not posted it here yet as this should not be the only solution. Also, I moved the `.babelrc` config to `webpack.config.js` – Shivam Sharma Jun 24 '21 at 18:29
  • My code was working fine, but suddenly this error began to occur and then I couldn't solve it, So I performed the above steps and it was resolved, but I don't know "how". – Shivam Sharma Jun 24 '21 at 18:32
  • I tested many things, but I think I found the culprit. Playing with the babel and flow configs is provoking that error. Whenever I remove the added values on those configs, and launch with `--reset-cache` it works great. I can't provide an answer yet, because there seem to be a bug too in version 0.64 connected with RN. But I tried removing config from babel and flow for React Native Web, and only keep alias in webpack config, and the web builds normally and works great, native App works great too that way. – KeitelDOG Jun 27 '21 at 15:33
  • 1
    In React Native Web documentation, they provide ways to integrate config with Webpack, Babel and Flow. But they never specify that you had to add them all. So at some points, may be webpack alias does not bother normal React Native, while Babel and/or Flow break the bundle for native App. If we could instead specify our own babel and flow config under web directory along with webpack (if they are really necessary), normal RN configs would remain untouched. – KeitelDOG Jun 27 '21 at 15:37
  • 1
    I can confirm that I don't need any config modification at all outside of webpack when using React-Native-Web. Just setting the presets and plugins direction in webpack `use.options` is enough, so that you don't need them in babel config. I also made it works with NextJS also, with simple webpack overriding in `next.config.js`. This way I can handle lighter multipage website with 90% same React-Native codes. – KeitelDOG Jul 04 '21 at 14:38
  • Thanks for confirming, I'll update the article. But is this the source of error also? – Shivam Sharma Jul 04 '21 at 15:45
  • Yes, I think so, because I never had the error on native again. And I tested it with NextJS also, I only keep the babel react native presets in babel config, that's all. I have the feeling some configs are for like if you import views from react-native or react-native-web in your components, but I don't understand all those configs well enough to know all details. – KeitelDOG Jul 04 '21 at 22:00

2 Answers2

0

I have the fix but the reason behind it, posting this answer for increasing the visibility of the solution which is equivalent to this commit.

So I removed .babelrc file and moved the module resolver settings to the webpack config, updated babel.config.js so now the web related settings will not disturb the App-related babel settings.

I have updated the mentioned article as well.

.babelrc:

<Deleted>

babel.config.js:

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

web/webpack.config.js:

...
...
...

      // 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',
            },
          },
        ],
      ],
...
...
...
Shivam Sharma
  • 1,277
  • 15
  • 31
0

restart your Metro Bundler

  yarn start --reset-cache
Ruslan Ibragimov
  • 41
  • 2