twin.macro
twin.macro copied to clipboard
Dynamic is not working as expected in next-emotion-typescript
I'm using the next-emotion-typescript example, but next dynamic isn't working as expected, and it doesn't render anything.
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() => import('./dynamic-component'), {
ssr: false,
loading: () => <div>Loading...</div>,
})
export default function About() {
return (
<div>
<h1>About</h1>
<DynamicComponent />
</div>
)
}
Expected:
But actually:
I tried commenting out the webpack configuration in the withTwin.js file and the reference to twin.macro, and dynamic worked fine.
// 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('@emotion/babel-plugin'),
// [
// require.resolve('@babel/plugin-syntax-typescript'),
// { isTSX: true },
// ],
// ],
// },
// },
// ],
// })
I'm not sure if it's related to this issue: https://github.com/ben-rogerson/twin.macro/issues/788。
Here is a repository to reproduce the issue: https://github.com/leeonon/next-emotion-typescript-dynamic-issues
It stopped working at https://github.com/vercel/next.js/releases/tag/v13.5.7-canary.26, Works up to .25
I've got same issues but with next 12.2.5 but the project won't compile with
Error:
x next/dynamic options must be an object literal.
| Read more: https://nextjs.org/docs/messages/invalid-dynamic-options-type