babel-plugin-macros: Cannot apply macros when imported from a module outside of default resolution paths

babel-plugin-macros version: 2.4.2
node version: 8.9.4
npm (or yarn) version: npm 5.6.0

Hi, Kent! Macros are super cool. Thanks for building this plugin. lingui-js is a really cool use case that I’ve been integrating lately. It uses macros to identify and extract translatable strings at build time, which simplifies react internationalization a great deal. However, I’ve run into an issue regarding node resolve that I could use your advice on before I try and submit a patch.

Relevant code or config

I have a project that loads modules into my bundle using a webpack alias for a directory outside of my project root. These modules in turn import macros. For example: require("#EXTERNAL_PLUGINS/index.js")

where #EXTERNAL_PLUGINS is a webpack alias for something like “…/external_plugins”

Babel fails to load these modules if they import a macro because of a recent change to applyMacros that adds resolve.sync with a basedir set as the source file directory (which again, is outside my working folder and therefore doesn’t have node_modules)

Here is the change:

https://github.com/kentcdodds/babel-plugin-macros/commit/1785a0fab2c374d1505c49cff1bd38fd541819e2#diff-1fdf421c05c1140f6d71444ea2b27638R155

What happened:

resolve.sync throws an exception because it is unable to locate the macro with the configured basedir. Everything works correctly when using babel-plugin-macros 2.4.1

Reproduction repository:

https://github.com/brandonc/load-macros-outside-package

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 37 (4 by maintainers)

Commits related to this issue

feat(babel): add temporary solution to be able to load macros outside `process.cwd()`; see: https://github.com/kentcdodds/babel-plugin-macros/issues/87 — committed to wintercounter/mhy by deleted user 5 years ago
Add macros per suggestion https://github.com/kentcdodds/babel-plugin-macros/issues/87#issuecomment-440384605 — committed to JackHowa/import-lazy-react-checker by deleted user 3 years ago

Most upvoted comments

I was strugling with the same issue.

My ugly solution until there’s a better option (babel config is dynamically generated for us, added this to that script):

const macrosPluginPath = require.resolve('babel-plugin-macros')
fs.readFile(macrosPluginPath, 'utf8', function(err, data) {
    fs.writeFile(
        macrosPluginPath,
        data.replace(
            'return resolve.sync(source, {',
            `return resolve.sync(source, {
                 paths: [p.resolve(__dirname, '../../'), p.resolve(process.cwd(), 'node_modules')],
            `
        ),
        'utf8',
        () => {}
    )
})

It’s a REALLY, REALLY BAD ~~solution~~. Once support will be added to customize this please allow us to configure this at babelrc at plugins definition, not only through cosmiconfig files.

wintercounter on Aug 7, 2019

I would strongly recommend that you check out the sources for create-react-app if you haven’t already. Github’s search is orders of magnitude worse than what you can do from and IDE pointed at the codebase itself. For example on Github I couldn’t figure out where that dependencies config was used, but locally I discovered that it’s here, which means that one possibility for why you aren’t seeing your changes is the caching.

That said, CRA sounds like a terrible fit for the level of control you want. CRA is made for novices where the primary goal is “don’t let them hurt themselves”. How it ever became a choice for corporate products with arbitrary requirements and advanced interoperability needs beats me.

conartist6 on Jan 23, 2021