Babel-plugin-module-resolver: Cannot resolve module src/Components

[jerryslaw]

Hi,

I have an issue similiar to #133 . My config file looks like this:

{
  "presets": ["react", "es2015", "stage-2"],
  "env": {
    "dev": {
      "plugins": [
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "Modules": "./modules",
            "Containers": "./containers",
            "Components": "./components",
            "Constants": "./constants",
            "Utils": "./utils",
            "Resources": "./resources"
          },
        }]
      ]
    }
  }
}

and imports:

import SomeComponent from 'Components/SomeComponent'

Then I can see error like that:

Cannot resolve module [.....]/src/Components

It is related with case sensitivity, but no clue how I can (if I can) fix that. In addition: when I make aliases lowercase, everything works fine.

[tleunen]

On what platform you're running this?

@fatfisz Any idea? I can't find the issue by reading the code, and I tested with the specified config and I don't reproduce it :/
Also, from his error, we can see the path seems to be resolved (since we see /src/...), but the case is not correct.

[jerryslaw]

I'm running on OSX 10.11.6. Huh, I forgot about important thing (sorry). I'm using webpack, so this error comes from webpack (case sensitivity plugin):

Module not found: Error: [CaseSensitivePathsPlugin] `([...])/src/Modules/ui/index.js` does not match the corresponding path on disk `modules`.

But it doesn't change case, that I can't use module resolver with uppercase module names.

Edit: Maybe this issue is related to case-insensitivity file system in macOS?

[nickjanssen]

Same problem here, with a very similar setup.

ERROR in ./src/Services/redux.js
Module not found: Error: Can't resolve 'Components/Test/Test.redux' in '/Users/nickjanssen/Documents/docs/test-app/src/Services'
 @ ./src/Services/redux.js 5:0-53
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/index.jsx

For some reason the path gets the capital letters from the alias name. 🤔

My .eslintrc

{
  "env": {
    "test": {
      "presets": [
        "es2015",
        "stage-0",
        "react"
      ]
    }
  },
  "presets": [
    ["es2015", {"modules": false}],
    "stage-0",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "Containers": "./containers",
        "Services": "./services",
      },
    }]    
  ]
}

EDIT: I'm also on macOS Sierra with node v6.9.5

[jerryslaw]

Did you mean .babelrc instead of .eslintrc? :)

[fatfisz]

@jerryslaw @nickjanssen Could one of you publish a PoC repo? I haven't used react-native yet, but I'd like to help debug this.

If you could also make this as small as possible, it would be great - less code/dependencies = smaller surface to check.

[tleunen]

Closing because no updates.

If you still experience the issue, please upgrade to 3.0.0-beta.0 and reply to this issue if it doesn't fix it.

[facuescobar]

Is there any Github repo where I can find this plugin working on a RN app?

Installing 3.0.0-beta.0 version didn't resolve my problem.

I've tried many times to setup this plugin (on new and old projects) but I always get stuck on the same error.

Now I am trying with a new and clean RN app:

Files:

/project
    /app
       app.js
       /components
           com-test.js
    .babelrc
    .eslintrc.json
    package.json

This is my .babelrc

{
  "presets": ["react-native"],
  "plugins": [
      "transform-flow-strip-types",
      [
          "module-resolver", {
              "root": ["./app"],
              "alias": {
                  "com": "./components",
              },
          }
      ]
  ]
}

And my .eslintrc.json file

  "settings": {
    "import/resolver": {
      "babel-module": {
        "extensions": [".js", ".jsx"]
      }
    }
  },

Importing file from app.js:

Using: import ComTest from './components/com-test';

Using: import ComTest from 'com/com-test';

Any idea?
Thanks!