Alias won't work on webpack-dev-server live reloading if the difference is only a capital letter.

[danbruegge]

On OSX systems, an alias like Components which points to components will not work correctly on webpack-dev-server live reloading. .babelrc

{
    "presets": [ "env", "react" ],
    "plugins": [
        ["babel-plugin-module-resolver", {
            "root": ["./src"],
            "alias": { "Components": "components", }
        }],
        "transform-object-rest-spread",
        "transform-export-extensions",
        "transform-class-properties",
        [ "transform-runtime", { "polyfill": false, "regenerator": true, }, ]
    ]
}

So the initial compiling works. But if changes are made to a file in the Components folder, webpack-dev-server won't reload/recompile.

Our workaround was, using another alias. It looks also like an OSX only problem. On linux it is working with the above .babelrc correctly.

[chrisbull]

Directories with capital letters doesn't work at all:

{
  "presets": ["env", "react-native-stage-0/decorator-support"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./App"],
        "alias": {
          "yup": "./App/Components"
        }
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": ["ignite-ignore-reactotron"]
    },
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

import MyComponent from 'Components/MyComponent' doesn't work. but will work if I use a lower case alias, like: import MyComponent from 'yup/MyComponent'

[danbruegge]

Jep, using another alias would solve it, but that was not the intend. Because with capital letters you can separate for the same folder without introducing new words. You would know, if the import path starts with a capital letter, you using an alias.

[tleunen]

Isn't this a webpack issue? Do you see it reloading, or is the plugin compiling the path incorrectly? I don't have any quick project with webpack dev server to test this issue. Would you be able to setup something?

[pietrofxq]

I'm having a similar weird behavior on my end: I need to set the alias name with capital letter, but when importing it only works with lowercase. All my webpack aliases were using capital letter and I can't seem to get it working with this plugin.

[danbruegge]

@tleunen i'm not an OSX user. We discovered this on a machine of a colleague. Maybe set up a create-react-app and eject it. Then you can add a custom babelrc and test it.