tw is not defined when using as in a library outside of a nextjs folder

[stevebrowndotco]

I am following the guide for nextjs, and twin.macro works perfectly for when i want to use tailwind within the app folder (i am using the nx apps folder structure)

But I am also using a shared library in a typical nx folder structure. So I update the webpack config like so:

 const includedDirs = [
        path.resolve(__dirname, 'components'),
        path.resolve(__dirname, 'pages'),
        path.resolve(__dirname, 'styles'),
        path.resolve(__dirname, '../../libs/ui-kit'), <-- added this
    ];

When I import tw into components inside "ui-kit" I get "tw is not defined".

I have seen advice here about using rollup to build the library, but I think that is overkill because i am not making it a package, i just want to use it cross various apps within the application.

Any advice appreciated

Disclaimer: I am using module federation but the problem persists if I just run one app in my testing.

Thank you!

[ben-rogerson]

Sounds like a pickle! And I agree pre-building your ui-kit would be overkill here.

I've actually run into this issue before and to solved it by using a plugin called next-transpile-modules which I configured in the next.config.js file.
But taking a look at that package now, it points to the functionality now been rolled into Next.js core under a module-transpilation option.
I haven't tested the feature out but seems to be your best bet here as you should be able to transpile your ui-kit folder living outside your next.js directory.

Hope that helps a tad!

[stevebrowndotco]

Hi @ben-rogerson thanks for this. I solved this by following the example nx repo someone posted on here which does not use the "withTwin.js" webpack config for next.config.js, but uses a babel config. Specifically this one:

{
    "presets": [
        [
            "next/babel",
            {
                "preset-react": {
                    "runtime": "automatic"
                }
            }
        ]
    ],
    "plugins": [
        "babel-plugin-twin",
        "babel-plugin-macros",
        ["styled-components", { "ssr": true }]
    ],
    "babelrcRoots": ["*"]
}

This babel config is put inside my next js project, and importing the components works perfectly.

I'm not sure why this works... but it works.

[stevebrowndotco]

Which leads me to my next question, is this still ok to use this babel config or should i really be using the webpack config?

[ben-rogerson]

The withTwin.js setup is preferred as it allows babel to work alongside SWC - without it, Next.js disables SWC and only uses babel.
This isn't the worst, but there may be some speed improvements you're missing out on with a larger codebase.
Are you seeing a note in your terminal about that when you start the dev process?