Always importing from react-native-web

pointersbad commented 1 month ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the issue

The problem is I try to build a fresh ejected project using react-native-web. Somehow, all the imports on native platforms still import react-native-web instead of react-native. I have tried everything and at this point it seems like some kind of voodoo magic to me, because sometimes the imports work properly and sometimes not. Everything works fine on the browser side though.

Expected behavior

Should import react-native on ios/android and react-native-web on web.

Steps to reproduce

babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@components': './src/components',
          '@screens': './src/screens',
        },
      },
    ],
    ['react-native-web'],
  ],
};

package.json:

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "webpack-dev-server --config ./web/webpack.config.js --mode development",
    "web:build": "webpack --config ./web/webpack.config.js --mode production",
    "start": "react-native start",
    "prepare": "husky",
    "format": "prettier --write",
    "lint": "eslint",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npm run lint",
      "npm run format",
      "npm run test"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm test"
    }
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "react": "18.2.0",
    "react-dom": "18.2",
    "react-native": "0.74.4",
    "react-native-safe-area-context": "^4.10.8",
    "react-native-screens": "^3.33.0",
    "react-native-web": "^0.19.12"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.86",
    "@react-native/eslint-config": "0.74.86",
    "@react-native/metro-config": "0.74.86",
    "@react-native/typescript-config": "0.74.86",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.3.0",
    "@types/react-native-web": "^0.19.0",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^9.2.1",
    "babel-plugin-module-resolver": "^5.0.2",
    "babel-plugin-react-native-web": "^0.19.12",
    "eslint": "^8.19.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "husky": "^9.1.4",
    "jest": "^29.6.3",
    "lint-staged": "^15.2.8",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "yarn@3.6.4"
}

The alias for react-native-web is in my webpack.config.js and I even tried deleting the web folder completely but the issue still persists on the native devices.

Test case

N/A

Additional comments

Thanks for looking into it in advance!

necolas commented 1 month ago

Don't add the RNW plugin to the Babel config used to process the RN bundle

pointersbad commented 1 month ago

That's how it's showcased in the docs; of course I tried removing it too, but unfortunately no luck :( Could it be something different?

necolas / react-native-web