Babel-plugin-module-resolver: Use @ prefix on alias

[hungps]

This is my folder structure:

/
|-- src
|   |-- models
|   |-- configs
|   |-- ...many more
|-- .babelrc

And I'd like to use the @models, @configs syntax

The question is: What regex pattern will work on this scenario (because I have more than just models and configs). I tried:

1. "^@(.+)": "./src/\\1" and got Unable to resolve module './babel/runtime/helpers/classCallCheck'
2. "@(.+)": "./src/\\1" and got Unable to resolve module @navigators
3. "^\\@(.+)": "./src/\\1" same with 1
4. "\\@(.+)": "./src/\\1" same with 2

[fatfisz]

Something like '^@(.+)': './src/\\1', should work perfectly, we have it tested: https://github.com/tleunen/babel-plugin-module-resolver/blob/master/test/index.test.js#L479

I suggest clearing the Babel cache after chaning your config, it's often a source of the problems.

[fatfisz]

So in your case it's option 1. Look at the error: Unable to resolve module './babel/runtime/helpers/classCallCheck' - it suggests something wrong with the built-ins configuration (see help for Babel's useBuiltIns option).

[hungps]

@fatfisz can you be more specific about useBuildIns (any link would help)?. This is my .babelrc config:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "^@(.+)": "./src/\\1"
        }
      }
    ]
  ]
}

[fatfisz]

I can only suggest you ask somewhere else; there are several options listed on Babel's page:

• Stack Overflow
• Slack Channel
• Twitter

I don't think this is a problem with the babel-plugin-module-resolver, and I don't know the answer from the top of my head, so I won't help you there.

[hungps]

I find elsewhere but cannot found the solution. But anyway, thanks

[hungps]

@fatfisz Hi, I figured out. The problem was the @babel/core and @babel/runtime use the same prefix as I do. So now how can I exclude the node_modules folder or just resolve the src folder only?

[fatfisz]

If it's only for that simple case, then use a negative lookahead: ^@(?!babel)(.+)$. But if you'll be using other scoped packages, then the best way to handle that would be to use a custom resolver function instead: https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md#resolvepath

Inside that function just check if the path matches your desired format and if it doesn't point to an existing file in node_modules - then just resolve the path yourself.

But frankly, since @ is already used for scoped packages, I'd just choose another character, or even drop it altogether. I just don't think it's worth the work you'll need to put into that.

[hungps]

Thanks!

[fariasmateuss]

@fatfisz can you be more specific about useBuildIns (any link would help)?. This is my .babelrc config:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "^@(.+)": "./src/\\1"
        }
      }
    ]
  ]
}

It's working fine!