Comments (9)
Scipion
commented on May 25, 2024
1
Hi @kon-pas, thanks a lot for trying to fix it.
I've applied both changes, but just with the first one I get the following error:
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
As per what the docs explain how to resolve this new issue:
To address this issue, you should remove your custom Babel configuration (e.g. .babelrc) and instead make use of the Next.js Compiler. This ensures compatibility between your Babel configuration and next/font.
By doing that we're getting back the initial error:
You can find the changes in a branch here:
https://github.com/Scipion/next-app-1/tree/fix/babel-config-n-v8-fallback
from twin.macro.
Scipion
commented on May 25, 2024
1
So the conclusion is that whether we use twin.macro (and babel) or next/font (and swc).
I'm adding here a small research
twin.macro Support SWC discussion (thanks @kon-pas):
#516
"Babel and next/font Conflict" in Next.js:
https://nextjs.org/docs/messages/babel-font-loader-conflict
Closing this issue due twin.macro still can't work with swc, just babel.
from twin.macro.
kon-pas
commented on May 25, 2024
Try adding either macros or babel-plugin-macros to the list of Babel plugins, like so:
// babel.config.js
module.exports = {
presets: ['next/babel'],
plugins: ['macros'],
}from twin.macro.
kon-pas
commented on May 25, 2024
The above resolved the issue for me, but if it still persists, you can also add the v8 module to the Webpack config, like so:
// next.config.js
const withTwin = require('./withTwin.js')
/**
* @type {import('next').NextConfig}
*/
module.exports = withTwin({
reactStrictMode: true,
webpack: (config, { isServer }) => {
if (isServer)
config.resolve.fallback = {
...config.resolve.fallback,
v8: require.resolve('v8'),
}
return config
},
})from twin.macro.
kon-pas
commented on May 25, 2024
Hi @Scipion
Remove next/font from layout.js, like so:
// src/app/layout.js
import GlobalStyles from '../styles/GlobalStyles'
import StyledComponentsRegistry from '../lib/registry'
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<StyledComponentsRegistry>
<GlobalStyles />
{children}
</StyledComponentsRegistry>
</body>
</html>
)
}twin.macro currently only supports Babel, not SWC (#516). We must choose one and if we want to use twin.macro, we have to stick to Babel. Next suggests to remove the Babel config, because some of Next features, like next/font, are intended solely for SWC. You have to get rid of those SWC-only features.
from twin.macro.
anujraghuvanshi
commented on May 25, 2024
What is the possible solution here? to quickly fix ?
from twin.macro.
Scipion
commented on May 25, 2024
What is the possible solution here? to quickly fix ?
It seems there is no solution yet, weather you use twin.macro and babel or next/font and swc.
from twin.macro.
anujraghuvanshi
commented on May 25, 2024
Can you plz help with babel config? I am getting next/font issues if I am trying to configure anything with babel.
from twin.macro.
Scipion
commented on May 25, 2024
next/font won't work with babel as explained here #833 (comment)
from twin.macro.
Related Issues (20)
- NX React - Module '"twin.macro"' has no exported member 'styled' HOT 1
- DaisyUI 3.x Tooltip dynamic variant not working
- `group-x` classes containing `/` aren't working correctly
- Support for @headlessui/tailwindcss prefixes in inner classes HOT 2
- the name `_GlobalStyles` is defined multiple times HOT 1
- Unable to clone and style existing components with Stitches using standard syntax HOT 3
- Doesn't work with CodeSandbox React template HOT 1
- Error when passing props to the css attribute in solid/stitches HOT 3
- CSS `calc` with more than 2 `theme` keywords HOT 1
- Twin Macro Doesn't Work With Next.js (A Working Example Would Solve This) HOT 6
- Dynamic is not working as expected in next-emotion-typescript HOT 2
- Module not found: Can't resolve 'v8' HOT 3
- Property 'cs' is missing in type.... HOT 2
- Next 14 layout shift (maybe css load after render) HOT 2
- Jest testing (typescript) - twin_macro_1.theme is not a function HOT 2
- Errors in vite 5.0.0 HOT 1
- TypeScript type error with TwImportComponent in jest-testing-typescript
- CSS fallback values from Tailwind config `extend` are missing HOT 2
- Props don't get passed down when composing components HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twin.macro.