How to config additional paths for Babel to compile

[yankustefan]

Hi,

I have a custom component library in the node_modules folder (or in .yalc), which I would like to compile together with the nextjs app.

I am using Yalc, to work with yarn/npm packages locally.
Before, I was using create react app, and was able to accomplish that with customize-cra:

module.exports = function (config, env) {
  return Object.assign(config, override(
    disableEsLint(),
    addDecoratorsLegacy(),
    /*Make sure Babel compiles the stuff in these foldersr*/
    babelInclude([
      path.resolve('src'), // don't forget this
      path.resolve('.yalc/my-module/src'),
      path.resolve('node_modules/my-module/src')
    ])
    )(config, env)
  )
}

Without configuration it appears that the libraries' components (located in .yalc/my-module/src) can't find imported components (such as React, or a sibling component in the same library).

Now I would need to do a custom-webpack-config in next.config.js ?

Do I need to modify defaultLoaders.babel directly or add a plugin ?

I would appreciate any input on how to accomplish that.

[Timer]

next-transpile-modules is the go-to module for adding this behavior:

// next.config.js
const withTM = require("next-transpile-modules")(["my-module", "my-module-2"]);

module.exports = withTM();

[yankustefan]

Thank you very much for your help!

[yankustefan]

Wonderful, it works like a charm!