Strange behavior

[billtlee]

Hi,

I just got a new macbook pro and have migrated over a project that used to work in my old macbook pro. I am experiencing something very strange and wanted to see if someone has any idea how to fix it. Here is the package.json:

  "devDependencies": {
    "babel-jest": "22.4.1",
    "babel-plugin-module-resolver": "3.1.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "3.3.0",
    "enzyme-adapter-react-16": "1.1.1",
    "eslint-config-rallycoding": "3.2.0",
    "jest": "22.4.2",
    "jsdom": "11.6.2",
    "react-native-mock-render": "0.0.19",
    "react-test-renderer": "16.2.0",
    "sinon": "4.4.2"

Here is the .babelrc:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@assets": "./assets",
        "@common": "./src/common",
        "@components": "./src/components"
      }
    }],
    "transform-decorators-legacy"
  ]
}

The project runs fine on android. But when I try to run it on ios, I am getting this error:

error: bundling failed: Error: Unable to resolve module ../../../../node_modules/react-native/src/components/widgets from /Users/Bill/Documents/ethereum-projects/ethereum-wallet/src/components/views/ConfirmMnemonics/index.js: The module ../../../../node_modules/react-native/src/components/widgets could not be found from /Users/Bill/Documents/ethereum-projects/ethereum-wallet/src/components/views/ConfirmMnemonics/index.js.

This: import { Button } from '@components/widgets';

is in /Users/Bill/Documents/ethereum-projects/ethereum-wallet/src/components/views/ConfirmMnemonics/index.js

src/components/widgets is off of the root of the project.

So, for some reason, as far as I can tell module-resolver is trying to look for src/components/widgets in ../../../../node_modules/react-native directory. I can't for the life of me figure out why or how to fix this. Does anyone have any idea at all?

Thanks!

Bill

[tleunen]

Hi Bill,

Indeed. This is a very strange behavior. I've never experienced this kind of things myself. And without a real context, it is hard to see and find the root cause to this issue in your project. Would you be able to reduce the scope and create a repo to easily reproduce the issue?

[billtlee]

Hi Tommy,

Thanks for getting back. How would you like me to reduce the scope and create a repo?

Thanks,

Bill

[tleunen]

If you're able to create a new project reproducing your issue, with the same babelrc example that you provided, it will be very helpful. When I'm saying reducing the scope, it's because I'm guessing your project is big so by having a new project with as less file as possible, it will help narrowing down the potential issue. It's always about removing parts which don't affect the result so that it's easier to focus on the things that are problemtic :)

[abusada]

To continue the weirdness, i had the same issue, then i just changed my .babelrc to babel.config.js and it worked again, why ? i don't know yet, i will investigate and update this thread

[abusada]

which babel version are you on ? https://babeljs.io/docs/en/next/babelconfigjs

[sonbuiGFD]

I have the same issue, @billtlee any luck? FYI, I init a new React Native project config with babel-plugin-module-resolver and get the same error like @billtlee.

[billtlee]

no, not really. I just tried all these different suggestions and it eventually went away. I am not even sure what made it go away. it still happens once in a while. I just make sure I exit all the terminals. reboot my mac, clean the build and rebuild. It just goes away. I think somehow some environment got corrupted. I tried removing node_modules, and reinstall, running this:

watchman watch-del-all && rm -rf node_modules && npm install && rm -fr $TMPDIR/react-* && npm start -- --reset-cache

restart computer

etc. hope it goes away for you. very frustrating for a few days when i ran into this.

[sonbuiGFD]

Thank @billtlee I found a different way. I add a package.json file in my src folder. { "name": "src" } and start import like: import GooglePlaces from 'src/components/GooglePlaces';

[m8ow]

@sonbuiGFD Thank you!! I was just facing same error. Finally, I could't use babel-plugin-module-resolver, and I solve in @sonbuiGFD 's solution add package.json in src/.

Actually, I'm using react-native-web. When I build web, babel-plugin-module-resolver works. So, my solution is ios: add package.json (written { "name": "src" }) in src/ web: use babel-plugin-module-resolver

[billtlee]

Get this project and you should be able to see the problem... git clone https://github.com/fmsouza/ethereum-wallet.git

[billtlee]

I think I found what the issue is for my specific issue. I was letting react-native start the metro bundler, that will set the working directly to node_modules/react-native and hence it's having problem finding the files. If you start the metro bundler first and the do npm start ios or yarn ios, it works for me. Wondering if there is a way to have react-native start the metro bundler and have the working directory be the root of the project.