node_modules outside of the project directory are not transpiled by Babel (7)

Question

I'm writing an application based on Symfony4 and ReactJS and I'm using the webpack encore to build a bundle. Also the node_modules directory is outside the project and is symlinked - probably this is the main culprit but I need to keep node_modules outside the project directory.

The issue that I have is related with using some npm packages (eg. @foes/react-i18n-routing) that consist of React components / HOCs so they need to be transpiled, but babel not doing this and in the result I'm getting the error similar to this:

error  in ./node_modules/@foes/react-i18n-routing/dist/esm/component/withI18nRouting.js

Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type.
|
| export default Component => props => (
>   <I18nRoutingContext.Consumer>{context => <Component i18nRouting={context} {...props} />}</I18nRoutingContext.Consumer>
| );

As far as I know when I'm using Babel 7 I need to change my .babelrc file to babel.config.js to provide the wide project configuration but this is not enough, I'm still facing with the issue.

Can anyone point me the right direction?

I tried a various of configs and I stopped on setting the babelrcRoots. Maybe this is the key, but I was not able to set this properly.

Here's the directory structure:

ROOT/
├── node_modules/
└── project/
    ├── assets/
    ├── package.json
    ├── babel.config.js
    └── webpack.config.js

Here's the babel.config.js

module.exports = function(api) {
  api.cache(true);

  const presets = ['@babel/preset-env', '@babel/preset-react'];
  const plugins = [
    '@babel/plugin-proposal-class-properties',
    'transform-es2015-modules-commonjs',
    'babel-plugin-dynamic-import-node'
  ];

  // const babelrcRoots = ['.', '../node_modules/*']; ????

  return {
    presets,
    plugins
  };
};

And here's the webpack.config.js

const Encore = require('@symfony/webpack-encore');
const path = require('path');

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/js/app.jsx')
  .splitEntryChunks()
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableLessLoader()
  .enableReactPreset();


let config = Encore.getWebpackConfig();
config.resolve.alias['App'] = path.resolve(__dirname, 'assets/js');
// config.resolve.modules = [path.resolve('./node_modules'), path.resolve('../node_modules')]; here's the another try with no luck

module.exports = config;

And here's the package.json

{
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@symfony/webpack-encore": "^0.27.0",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "core-js": "^3.0.0",
    "less-loader": "^4.1.0",
    "prop-types": "^15.7.2",
    "webpack-notifier": "^1.6.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@foes/react-i18n-routing": "^0.8.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "history": "^4.9.0",
    "lodash.flatmap": "^4.5.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-router-named-routes": "0.0.23"
  }
}

Answer 1

You can try configuring to rootMode:"upward" setting mentioned here like so:

babel --root-mode upward src -d lib

or in webpack

module: {
        rules: [{
            loader: "babel-loader",
            options: {
                rootMode: "upward",
            }
        }]
    }