[NextJS] next/font" requires SWC although Babel is being used due to a custom babel config being present

[ebitogu]

I am not sure what maybe wrong as I am basically copying over the existing sample code for NextJS using app router on NextJS 14.

Here is the content of my .babelrc.js file:

const path = require('path');

module.exports = {
    presets: ['next/babel'],
    plugins: [
        [
            '@stylexjs/babel-plugin',
            {
                dev: process.env.NODE_ENV === 'development',
                runtimeInjection: false,
                genConditionalClasses: true,
                treeshakeCompensation: true,
                unstable_moduleResolution: {
                    type: 'commonJS',
                    rootDir: path.join(__dirname, '../..'),
                },
            },
        ],
    ],
};

and here is my next.config.js file

const withNextIntl = require('next-intl/plugin')();
const stylexPlugin = require('@stylexjs/nextjs-plugin');
const babelrc = require('./.babelrc.js');
const plugins = babelrc.plugins;
const [_name, options] = plugins.find(
    (plugin) => Array.isArray(plugin) && plugin[0] === '@stylexjs/babel-plugin',
);
const rootDir = options.unstable_moduleResolution.rootDir ?? __dirname;

module.exports = withNextIntl(stylexPlugin({
    rootDir,
    useCSSLayers: true,
})({}));

Unfortunately, anytime I start the app I keep getting this 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

[nmn]

This is an issue that we cannot fix on our end. StyleX is dependent on a Babel plugin. Using it within NextJS means using Webpack+Babel and not SWC.

next/font only works if you use SWC. Sorry, there's nothing we can do about this.

[ebitogu]

@nmn Thanks for responding. Are there any extra efforts I need to make to completely opt out of SWC? I just wanted to try out stylex on a clean new nextjs project.

I basically created a new nextjs project and copied over the .babelrc file and next.config.js file from the nextjs-example folder and yet I couldn't get it working.

I don't want to use SWC. I want to opt out completely. What do i do?

[nmn]

@ebitogu You have to delete any usages of next/font. You can copy the example next app from the repo.

[ebitogu]

Awesome. I've done that and it's working fine now. Thank you so much for your time.

[bmg02]

Any possible workaround for using next/font while using stylex?

[nmn]

@bmg02 The only workaround would be to do "pre-compilation" as in:

Create a folder called, say, source. Set it up to compile each file using Babel with the StyleX plugin (but nothing else), and the rollup plugin to generate the CSS file and output it all into the src folder.

Then rely on SWC and the normal NextJS process to compile src folder as normal.

The Documentation website currently uses a similar process, if you want to try setting it up. I'm looking into making a CLI for making this kind of process simpler for various projects as a sort of escape hatch. It adds an extra step of compilation, but it should work reliably in almost all scenarios except the ones that rely on custom file formats (Svelte/Vue)

[shawngustaw]

If anyone's curious I think this is the implementation for ☝️ here:

https://github.com/facebook/stylex/blob/main/apps/docs/scripts/make-stylex-sheet.js

[nmn]

@shawngustaw This is a hacky workaround. There will soon be a simpler solution where you will be able to use the Babel CLI to transform a folder like source into app and then use the normal nextjs flow as needed.