Can't transpile a babel macro project

[Kikobeats]

Run next info (available from version 12.0.8 and up)

next info is still not available, but I run npx envinfo --binaries --system:

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 76.88 MB / 32.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.13.1 - ~/.local/share/nvm/v16.13.1/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.local/share/nvm/v16.13.1/bin/npm

What version of Next.js are you using?

12.0.8-canary.16

What version of Node.js are you using?

v16.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

For some reason, Next.js can't transpile .macro files.

The terminal is reporting something related to an uid, looks like an internal thing:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
event - compiled client and server successfully in 152 ms (144 modules)
wait  - compiling / (client and server)...
info  - Using external babel configuration from /Users/kikobeats/Downloads/with-babel-macros-app/.babelrc
error - ./pages/index.js
TypeError: Cannot read properties of undefined (reading 'uid')
(node:13611) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
wait  - compiling /_error (client and server)...
error - ./pages/index.js
TypeError: Cannot read properties of undefined (reading 'uid')

I think what is happening is since the macro file is called *.macro.js, Next.js is wrongly interpreting it instead of leveraging to babel-plugin-macros for doing the job.

Expected Behavior

The macro should be interpreted by the babel plugin, not being interfered with by the Next.js internal compiler.

To Reproduce

just clone with-babel-macros

[benbender]

Related stacktrace of the error:

Uncaught     at Object.statSync (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/@vercel/nft/index.js:1:293416)
    at isDirectory (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/resolve@1.21.0/node_modules/resolve/lib/sync.js:22:23)
    at loadNodeModulesSync (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/resolve@1.21.0/node_modules/resolve/lib/sync.js:191:17)
    at Function.resolveSync [as sync] (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/resolve@1.21.0/node_modules/resolve/lib/sync.js:98:17)
    at nodeResolvePath (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/babel-plugin-macros@3.1.0/node_modules/babel-plugin-macros/dist/index.js:62:18)
    at applyMacros (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/babel-plugin-macros@3.1.0/node_modules/babel-plugin-macros/dist/index.js:203:23)
    at ImportDeclaration (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/babel-plugin-macros@3.1.0/node_modules/babel-plugin-macros/dist/index.js:110:28)
    at NodePath._call (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/babel/bundle.js:1890:292021)
    at NodePath.call (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/babel/bundle.js:1890:291845)
    at NodePath.visit (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/babel/bundle.js:1890:292796)
    at processResult (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/webpack/bundle5.js:53057:19)
    at <unknown> (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/webpack/bundle5.js:53159:5)
    at <unknown> (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/webpack/bundle5.js:138518:11)
    at <unknown> (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/webpack/bundle5.js:138370:18)
    at context.callback (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/compiled/webpack/bundle5.js:138243:13)
    at <unknown> (file:///~/next.js/examples/with-babel-macros/node_modules/.pnpm/next@12.0.0_react-dom@17.0.2+react@17.0.2/node_modules/next/dist/build/babel/loader/index.js:33:61)

[benbender]

The problem originates from the resolve-package. Simply pin it to v1.20.0 to solve the error until a fix is released.

"resolutions": {
    "resolve": "1.20.0"
  }

Related bug there: browserify/resolve#264

[Kikobeats]

@benbender is resolutions a yarn thing?

I added it to with-babel-macros package file, perform a npm install and the error is still there.

[benbender]

@Kikobeats pnpm in this case. Yarn has a similar setting. I'm unsure about the latest npm.

[Kikobeats]

It still doesn't work to me, but closing the issue since it isn't a Next.js thing.

[benbender]

@Kikobeats did you pin it to v1.20.0? (There was a typo above which said v1.21.0, which is, in fact, the broken one)

[y1o1]

I have exact same issue, and i found SWC is the cause.
Currently, v11.1.0 is the latest version w/o SWC and it can be built on my Docker container.

[benbender]

@yoshi49535 not directly, see vercel/nft#257

[styfle]

Please try the latest release v12.0.8-canary.19 using yarn add next@canary or npm install next@canary to confirm that the issue is fixed, thanks!

[benbender]

@styfle yes, I can confirm that the error is absent in canary 💯

[MaxEvan]

@styfle yes, I can confirm that the error is absent in canary 💯

Works I can confirm. Thanks so much, spent so much time on that!

[landsman]

@styfle Can I use this change with npm based project, next v11.1.3, override somehow that dependency?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.