MacroError in NextJS when used in a package

[maktouch]

• babel-plugin-macros version: 2.7.0
• node version: 10.16.3
• npm (or yarn) version: 1.16.0

Relevant code or config

import React from 'react';
import preval from 'preval.macro';
const one = preval`module.exports = 1 + 2 - 1 - 1`;

export default function Test() {
  return (
    <div>
      {one}
    </div>
  );
}

What you did:

When this is used inside NextJS, it works correctly.

When this is extracted as a package in the monorepo, imported and used, it doesn't, with error:

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.

Reproduction repository:

https://github.com/maktouch/micro-frontends-poc

git clone git@github.com:maktouch/micro-frontends-poc.git
cd micro-frontends-poc
yarn 
cd nextjs
yarn dev

Problem description:

There's something fishy going on with the way Next handles this, because it works pretty much out of the box for CRA and Gatsby. The problem arose when I tried to use a component with Lingui, but it didn't work. I thought it somehow missed some Lingui magic but after investigating for the whole day, it seems like Macro + External package + Next doesn't work.

Suggested solution:

Could it be because of this module? https://github.com/martpie/next-transpile-modules.

[maktouch]

Figured it out, it was a bad babel config =)

[wholenews]

Wow thanks @maktouch, your repository finally lead me to a solution. My issue was fixed by replacing .babelrc containing:

{
  "presets": ["next/babel"],
  "plugins": ["macros"]
}

with babel.config.js containing:

module.exports = {
  presets: [require.resolve('next/babel')],
  plugins: [[require.resolve('babel-plugin-macros')]],
};