Configure custom "root" directory with "babel-plugin-module-resolver"?

1.2k views Asked by At

Here is my project structure:

cloudRun
  distApp          // TRANSPILED APP FILES FROM ./src
  distService      // TRANSPILED BACKEND FILES FROM ./cloudRun/src
  src              // SOURCE FILES FOR THE BACKEND CODE
    index.js       // INDEX.JS FOR THE BACKEND CODE
  babel.config.js  // CONFIG FOR THE BABEL TRANSPILE SCRIPT
src                // SOURCE FILES FOR THE APP
  index.js         // INDEX.JS FOR THE APP CODE
package.json       // THIS IS THE MAIN PROJECT package.json

I'll try to be very succinct and clear.

In both of the index.js (app and backend code) I use path aliases in the source code.

For example:

./src/some-folder/some-file.js

import xxx from "@src/hooks/someHoot";

// IN THE TRANSPILED VERSION @src MUST BE CONVERTED TO ./cloudRun/distApp

And also, for example:

./cloudRun/src/some-folder/some-file.js

import xxx from "@src/hooks/someHoot";

// IN THE TRANSPILED VERSION @src MUST BE CONVERTED TO ./cloudRun/distApp

But somehow I'm having trouble when configuring module-resolver on babel.config.js. Either I get it to work correctly with the path aliases present on ./src (and path aliases on ./cloudRun/src are all wrong by 1 level) or vice-versa.

For example:

.cloudRun/babel.config.js

plugins = [
  ["module-resolver", {
    "alias": {
      "@src"   : "./distApp",
      "@hooks" : "./distApp/hooks",
    }
  }]
];

This works for the ./src files. But files from ./cloudRun/src are all wrong by 1 level up.

And if I change to this:

.cloudRun/babel.config.js

plugins = [
  ["module-resolver", {
    "alias": {
      "@src"   : "./cloudRun/distApp",
      "@hooks" : "./cloudRun/distApp/hooks",
    }
  }]
];

Then it works fine for the ./cloudRun/src files. But all files from ./src will be wrong by 1 level down.

I was thinking that I might fix this with the "root" option in the module-resolver config. But I couldn't make it work yet.

Maybe something like this:

.cloudRun/babel.config.js

plugins = [
  ["module-resolver", {
    "root": ["./cloudRun"],               // SET A NEW ROOT HERE
    "alias": {
      "@src"   : "./distApp",
      "@hooks" : "./distApp/hooks",
    }
  }]
];

I've tried many things inside the "root" config. But so far it doesn't seem to make any difference.

Here is how I run babel:

// SCRIPTS FROM ./package.json

babel src --out-dir cloudRun/distApp --config-file ./cloudRun/babel.config.js

babel cloudRun/src --out-dir cloudRun/distService --config-file ./cloudRun/babel.config.js
0

There are 0 answers