Error when trying to setup twin.macro Next.js TypeScript Styled Components

[leodevbro]

Hello, I tried those two repos:
1] https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript
2] https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion-typescript

They both work fine if I just use them as they are. But I want to manually do such setup for my existing Next.js 13 project. I follow the exact instructions of the README, but when I import tw and try to use tw notation, this error occurs:

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

Both examples (Styled components and Emotion) show the same error. I am not using any kind of outdated packages. I even tried yesterday creating totally new Next.js 13 app with the instructions, but the same error happens. I guess the SWC (Speedy Web Compiler) is problematic but I don't want to disable SWC.

Full error:

PS D:\dev-work-5-re\project-1\l2e-frontend> yarn run dev
yarn run v1.22.19
warning package.json: "dependencies" has dependency "@types/react-dom" with range "18.0.9" that collides with a dependency in "devDependencies" of the same name with version "18.0.8"
warning package.json: "dependencies" has dependency "typescript" with range "4.9.3" that collides with a dependency in "devDependencies" of the same name with version "4.8.4"
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - automatically enabled Fast Refresh for 1 custom loader
event - compiled client and server successfully in 768 ms (322 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 217 ms (323 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
TypeError: Cannot read properties of null (reading 'length')
    at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55)
wait  - compiling /landing (client and server)...
warn  - ./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
warn  - ./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
warn  - ./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
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. 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
    at macroWrapper (D:\dev-work-5-re\project-1\l2e-frontend\node_modules\babel-plugin-macros\dist\index.js:54:13)
    at eval (webpack-internal:///./src/pages/landing.tsx:23:56)
    at __webpack_require__.a (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/pages/landing.tsx:1:21)
    at ./src/pages/landing.tsx (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:92:1)
    at __webpack_require__ (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\webpack-runtime.js:33:42)
    at __webpack_exec__ (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:192:39)
    at D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:193:28
    at Object.<anonymous> (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:196:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14) {
  page: '/landing'
}
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
TypeError: Cannot read properties of null (reading 'length')
    at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55)
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. 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
    at macroWrapper (D:\dev-work-5-re\project-1\l2e-frontend\node_modules\babel-plugin-macros\dist\index.js:54:13)
    at eval (webpack-internal:///./src/pages/landing.tsx:23:56)
    at __webpack_require__.a (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/pages/landing.tsx:1:21)
    at ./src/pages/landing.tsx (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:92:1)
    at __webpack_require__ (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\webpack-runtime.js:33:42)
    at __webpack_exec__ (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:192:39)
    at D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:193:28
    at Object.<anonymous> (D:\dev-work-5-re\project-1\l2e-frontend\.next\server\pages\landing.js:196:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14) {
  page: '/landing'
}
Terminate batch job (Y/N)?
^C
PS D:\dev-work-5-re\project-1\l2e-frontend>

[leodevbro]

My bad, Here I found the solution:

#516 (reply in thread)

"you can adjust your directories in withTwin.js - so it doesn't box you in to a folder structure."

My project has src folder, and I added path.resolve(__dirname, 'src'), in includedDirs array in the withTwin.js file and now everything seems working.

[fredrivett]

Thanks so much for this @leodevbro, I faced the exact same issue and had no idea what was going wrong, but like you I realised I'd set up the directories wrong and needed to use src in includedDirs, and now it works as expected.