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

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…

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 9
  • Comments: 20

Most upvoted comments

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

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.

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 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.

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