ben-rogerson
commented
1 year ago Hey Fred
Without having quite gotten to the bottom of this, I thought I'd share my findings anyway as someone may be able to help pick this up and find a full solution.
I found there's a setting in the withTwin.js file that's causing the error.
// withTwin.js
config.module.rules.push({
test: /\.(tsx|ts)$/,
include: includedDirs,
use: [
options.defaultLoaders.babel, // < Commenting this line out removes the error
// ...
],
});In the defaultLoaders the hasServerComponents option is causing the error:
{
loader: 'next-swc-loader',
options: {
hasServerComponents: true, // < This set as `true` causes the error,
// ...
}
}Right now I'm unsure why hasServerComponents: true causes the use client; directive to be stripped, but I was able to patch the loader like this:
const path = require("path");
// The folders containing files importing twin.macro
const includedDirs = [path.resolve(__dirname, "src")];
module.exports = function withTwin(nextConfig) {
return {
...nextConfig,
webpack(config, options) {
const { dev, isServer } = options;
config.module = config.module || {};
config.module.rules = config.module.rules || [];
// Make the loader work with the new app directory
// https://github.com/ben-rogerson/twin.macro/issues/788
const patchedDefaultLoaders = options.defaultLoaders.babel;
patchedDefaultLoaders.options.hasServerComponents = false;
config.module.rules.push({
test: /\.(tsx|ts)$/,
include: includedDirs,
use: [
patchedDefaultLoaders,
{
loader: "babel-loader",
options: {
sourceMaps: dev,
plugins: [
require.resolve("babel-plugin-macros"),
[
require.resolve("babel-plugin-styled-components"),
{ ssr: true, displayName: true },
],
[
require.resolve("@babel/plugin-syntax-typescript"),
{ isTSX: true },
],
],
},
},
],
});
if (!isServer) {
config.resolve.fallback = {
...(config.resolve.fallback || {}),
fs: false,
module: false,
path: false,
os: false,
crypto: false,
};
}
if (typeof nextConfig.webpack === "function") {
return nextConfig.webpack(config, options);
}
return config;
},
};
};I'm not sure of the implications of this but the repo you posted now builds and can be served.
fredrivett
macalinao
dzcpy
chrisivo
rdgr
reedwane
mthmcalixto
jay9884
ciokan
tanomsakk
JGJP
0n3byt3
njfix6
I'm currently migrating a Next 13 project from the
/pagesdirectory setup to the new/appdirectory. As part of that it defaults to components being server components, and you must specify"use client"at the top of a file to make it a client side component.As @ben-rogerson helpfully pointed out (🙏), there's a guide on how to use
styled-componentswith this new setup, requiring a/lib/registry.tsfile.I got that working in another project (using the
/pagesdirectory), but when using with the/appsetup the initial"use client"line is stripped out by the build process.To try to get to the bottom of it I've created a fresh next 13 install using
yarn create next-app --typescriptas detailed here.Then I went about following the guidance of integrating
withTwinto allow for both SWC and webpack to run side by side, as shown here.Unfortunately I'm still seeing the build process remove the
"use client"line, producing this error:I'm unsure how to get around this, as this is quite a minimal setup. I'm sure it's a simple config issue but I'm unsure which setting to tweak. With this being reproduced in a pretty vanilla project I thought this might also trip up others, and so an issue here benefit them too.
👉 The project reproducing this issue can be found here: https://github.com/fredrivett/next-13-use-client-issue