babel submodule unexpected token import

Question

I can't find the solution to my problem, here it is:
I use babel to transpile my code from es6 to es5 on my api.
This was working great until I added a submodule, containing shared function between the API and my mobile app (React Native).
Now, when I import something from this common submodule, I have an error "Unexpected token 'import'", so my submodule is not transpiled.
Notice on the mobile app, I have no problem with this submodule.

Here is my structure :
| src
| -- common/ (submodule)
| -- -- graphql/
| -- -- -- user.js (required, writed in es6)
| -- -- package.json
| -- data/
| -- helper/
| -- index.js

my babelrc look like :

{
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": ["@babel/preset-env"]
}

note my submodule doesn't have any .babelrc

and here is the babel error

Did someone already have this issue ? Thanks :)

EDIT : if I delete the submodule package.json, it work

EDIT 2 : Renaming my .babelrc to babel.config.js did the trick ✅

node v8.10.0
babel 7.0.0

Answer 1

This is expected behavior. If you look at https://babeljs.io/docs/en/config-files , the key part is

The "filename" being compiled must be inside of "babelrcRoots" packages, or else searching will be skipped entirely.

The src/common/graphql/user.js is inside the src/common package, but your root package is the root, which is a different package.

If you'd like to use the inner .babelrc you need to opt into that by creating a babel.config.js file in the root that does

module.exports = {
  babelrcRoots: [__dirname, __dirname + "/common"],
};

so that Babel knows that both packages should be considered .babelrc -able packages.