Cannot apply macros when imported from a module outside of default resolution paths

[brandonc]

• 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:

1785a0f#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

Suggested solution:

I took a stab at a fix but was unable to find a suitable basedir to use with resolve.sync. This is a hard problem with zero configuration. Looking for ideas from you for a suitable change.

[audiolion]

I am not sure if this is related, but I am trying to go from CRA 2.0-alpha to 2.0 and they dropped support for .graphql imports and monorepo support. As a result my monorepo is now trying to use babel-plugin-macros with graphql-tag.macro and I am finding that macros aren't compiling when imported from symlinked packages, this might just be CRA though

e.g.
import usersQuery from '@monorepo/common/queries/users';

where that file is

import gql from 'graphql-tag.macro';

export default gql`
  query users {
    id
  }
`;

[almilo]

@kentcdodds I am trying to do exactly the same (allowing macros to be loaded from custom directories) and had a look at the plugin code to send a PR.
My solution would be to add a moduleDirectory option to the plugin and extend the resolve configuration here: https://github.com/kentcdodds/babel-plugin-macros/blob/master/src/index.js#L155 so that resolve takes those directories into consideration.
That would require loading the configuration eagerly for the plugin instead of lazily for the macros. Is that ok / makes sense? If so, I would be happy with sending a PR.

[kentcdodds]

That's an interesting idea @almilo! I think we may be able to solve @Andarist's issue as well.

I'm ok with eagerly resolving the config.

What if the config looked like:

// babel-plugin-macros.config.js
module.exports = {
  options: {
    moduleDirectories: ['node_modules', 'shared'],
    alias: {
      'pipeline.macro': require.resolve('./index.js'),
    }
  }
}

The moduleDirectories could just be passed as the moduleDirectory option to resolve (and would default to 'node_modules'), but the alias one may be a little more tricky, but not too difficult I think. Would you be interested in doing that?

[wintercounter]

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.

[topaxi]

I just ran into this issue, this makes it pretty hard to use macros within a project, unless using relative imports everywhere.

[Darmody]

How's this going ? ran into this issue too.

[wintercounter]

I'm using my own patched version, will make a PR next week.

…

On Sun, Nov 24, 2019, 10:56 Cai Huanyu ***@***.***> wrote: how's this going ? ran into this issue too. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#87?email_source=notifications&email_token=AAHLJQDVZXYWXRMPXAXBMPLQVJFWNA5CNFSM4F7HRG7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFAHTWQ#issuecomment-557873626>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHLJQGLOXVTOBSVULABBJDQVJFWNANCNFSM4F7HRG7A> .

[jsphstls]

I might be seeing this same issue. I am happy to open a new issue otherwise. I am trying to use relay in a monorepo with yarn workspaces. My relay implementation, graphql schema, and the queries live in one package that is compiled by Typescript and then imported into a sibling package. The sibling is a react app that render the wrapped relay component and refers to the queries by a key.

In the relay wrapper package:

 "devDependencies": {
    "babel-plugin-relay": "^9.1.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-relay": "^9.1.0",
    "react-scripts": "3.4.0",
    "relay-compiler": "^9.1.0",
    "relay-compiler-language-typescript": "^12.0.3",
    "relay-config": "^9.1.0",
    "relay-runtime": "^9.1.0",
    "typescript": "^3.9.5",

react-scripts start works just fine in the relay wrapper.

In the sibling, I see this terminal output:

Compiled with warnings.

/node_modules/babel-plugin-macros/dist/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

/node_modules/import-fresh/index.js
Critical dependency: the request of a dependency is an expression

In the browser:

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

  1 | import graphql from 'babel-plugin-relay/macro';
  2 | export const someQuery = graphql `
> 3 |   query someQuery {

Since the macro works in its local package, but not when imported into another, I suspect it is related to this issue.

[wintercounter]

Is it possible that it's not the latest version of babel-plugin-macros? Because I created a PR to fix this before and it was merged some time ago.

…

On Fri, Jul 10, 2020, 06:31 Vincze Viktor ***@***.***> wrote: No, the problem here is that you don't have babel-plugin-macros in your Babel config. Because of being missing, Webpack will simply compile macros into your bundle whereas they are supposed to be a build time script only. Adding babel-plugin-macros to your .babelrc should solve your problem. On Fri, Jul 10, 2020, 03:35 Joseph Stiles ***@***.***> wrote: > I might be seeing this same issue. I am happy to open a new issue > otherwise. I am trying to use relay in a monorepo with yarn workspaces. > My relay implementation, graphql schema, and the queries live in one > package that is compiled by Typescript and then imported into a sibling > package. The sibling is a react app that render the wrapped relay component > and refers to the queries by a key. > > In the relay wrapper package: > > "devDependencies": { > "babel-plugin-relay": "^9.1.0", > "react": "16.13.1", > "react-dom": "16.13.1", > "react-relay": "^9.1.0", > "react-scripts": "3.4.0", > "relay-compiler": "^9.1.0", > "relay-compiler-language-typescript": "^12.0.3", > "relay-config": "^9.1.0", > "relay-runtime": "^9.1.0", > "typescript": "^3.9.5", > > react-scripts start works just fine in the relay wrapper. > > In the sibling, I see this terminal output: > > Compiled with warnings. > > /node_modules/babel-plugin-macros/dist/index.js > Critical dependency: require function is used in a way in which dependencies cannot be statically extracted > > /node_modules/import-fresh/index.js > Critical dependency: the request of a dependency is an expression > > In the browser: > > MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md > > Since the macro works in its local package, but not when imported into > another, I suspect it is related to this issue. > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#87 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAHLJQERWJPUF2AEBOPAY33R2ZV5XANCNFSM4F7HRG7A> > . >