Babel-plugin-module-resolver: Module not found for react, can't get it working.

[joelgb2194]

I have previously used this package before for a react native project, but I can't seem to get it working on a create-react-app project. I've tried on 2 separate occasions. Here is my config:

package.json

{
  "name": "babel-resolver-plugin-test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^9.0.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-react": "^6.24.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.1.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1",
    "prettier": "^1.14.3"
  }
}

.babelrc

{
  "presets": ["react"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "components": "./components",
      }
    }]
  ]
}

No matter what I try, I always get a Module not found error...

[rochapablo]

Same here

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `../../../../src/store` from `C:\...rn-app\src\app.tsx`: The module `../../../../src/store` could not be found from `C:\...rn-app\src\app.tsx`. Indeed, none of these files exist:
  * `C:\src\store(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `C:\src\store\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (C:\...rn-app\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:120:15)
    at ResolutionRequest.resolveDependency (C:\...rn-app\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (C:\...rn-app\node_modules\metro\src\node-haste\DependencyGraph.js:219:16)
    at Object.resolve (C:\...rn-app\node_modules\metro\src\lib\transformHelpers.js:141:30)
    at dependencies.map.result (C:\...rn-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\...rn-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
    at C:\...rn-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (C:\...rn-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "alias": {
          "src": "./src"
        }
      }
    ]
  ]
}

"devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/react": "^16.4.14",
    "@types/react-native": "^0.57.2",
    "@types/react-navigation": "^2.0.24",
    "@types/react-redux": "^6.0.9",
    "babel-jest": "^23.6.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "create-react-class": "^15.6.3",
    "gulp": "^3.9.1",
    "husky": "^1.1.2",
    "jest": "^23.6.0",
    "jest-react-native": "^18.0.0",
    "metro-react-native-babel-preset": "^0.48.3",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "16.3.1",
    "ts-jest": "^23.10.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.3"
  },

[williamnvk]

Same problem here, with React Native 0.57.3 and 0.57.4.

[rochapablo]

Here's what I did... started a new project with RN 0.57.4 and only after that I start to bring all my files (from the old version). It's painful but it worked.

[williamnvk]

I changed React Native to 0.57 and Ok, this problem does not happen. But, not ideal.

[joelgb2194]

I had tried making a whole new project in react but still couldn't get it working. I'll probably try again in a month or so. Just gonna use the default ../../../../../ style for now lol

[Slapbox]

@williamnvk you changed to React Native 0.57.0 and it works?

@rochapablo you got it working on 0.57.4?

I'm trying to solve this now and it's proving quite challenging.

[LinnJS]

My error does not even show .ts, and .tsx as a viable option... react-native 0.55.3

I even tried adding .ts, and .tsx to .babelrc

{
  "presets": [ "react-native" ],
  "plugins": [
    "transform-inline-environment-variables",
    ["module-resolver", {
      "root": ["./src"],
      "extensions": [".ts", ".tsx",".ios.js", ".android.js", ".json" ],
      "alias": {
        "src": "./src/"
      }
    }]
  ]
}

Is this due to my version of RN?

[objHua]

+1

[rodrigo-fonseca]

+1

[luongs3]

+1, but with reactjs product build, not take place on local

[bermann]

I'm heading the same problem, did anyone make it work?

[Slapbox]

If you're not using Webpack as your build system, your best bet is probably to use lerna. I never got this working.

[bermann]

It was a problem with create-react-app, react-scripts doesn't take into account the file .babelrc

[phatNfqAsia]

It was a problem with create-react-app, react-scripts doesn't take into account the file .babelrc

Is this your guessing or is there any document I can read about this

[davidnoguerol]

+1

[nathanmrtns]

It was a problem with create-react-app, react-scripts doesn't take into account the file .babelrc

did you solve it? where did you find this?

[Slapbox]

Moving to lerna will be time better spent than trying to get this working, I still think. That is what we ended up doing. Trying to get this working was a major time sink.

[joelgb2194]

@Slapbox Yeah I gave up on this as well. I'll close the issue since I am not looking into it anymore

[nathanmrtns]

@Slapbox Yeah I gave up on this as well. I'll close the issue since I am not looking into it anymore

Hey @joelgb2194 I got it to work not with babel but with another lib called craco

I suggest you take a look

This way you don't need to eject the react app. It injects in the webpack config when it runs.