Custom module resolution for Bit components


#1

If you use any Custom Module Definition feature, such as:

  • Webpack resolve
  • tsconfig resolving
  • Vue absolute paths
  • Babel module resolver
  • NODE_PATH environment variable

You need to configure Bit to know about the various paths and aliases configured for the project. This is because by default Bit handle absolute import or require statements as package dependencies and relative paths as file dependencies.

Open your project’s bit.json file, and configure a resolveModules object in it. The new object needs to be configured according to the custom module definitions.

  • modulesDirectories is an array that contains a list of paths according to your NODE_PATH environment variable.
  • aliases is a key-value store that contains an alias and the path that it refers to.

Here’s a small example on how to configure a bit.json to use custom module resolution.

"resolveModules": {
    "modulesDirectories": ["src/utils", "src/math"],
    "aliases": {
        "@": "src/components",
        "~": "src/globals"
    }