next build does not care for .babelrc presets when a webpack config is given

Bug

next build & export has issues with .babelrc configurations

Describe the bug

I use @emotion/core with @emotion/babel-preset-css-prop and wanted to set up preact alongside, by aliasing react to preact/compat etc. Configuring aliases, and running using npm run dev produces the desired styled result, however running using next build && next start or next export (which I would assume copies from the .next static directory) fails to assign css on the elements giving something that looks like this

<div css="[object Object]"></div>

although the styles are applied in the head. I am guessing this is because the emotion babel preset is not being applied, I can confirm this by adding jsx pragma (/**@jsx jsx*/) on top of components and then running build and export which is correctly able to style the elements.

To Reproduce

I have set up a repo highlighting the issues and the following are the steps that I followed which can be found here: https://github.com/Aaditya-Sahay/nextjs-preact-emotion

1. Set up a next project, I used npm init next-app to do so.
2. In my case I set up preact aliases in next.config.js

module.exports = {
        experimental: {
            modern: true,
            polyfillsOptimization: true
        },
    
        webpack(config, { dev, isServer, defaultLoaders }) {
            const splitChunks = config.optimization && config.optimization.splitChunks
            if (splitChunks) {
                const cacheGroups = splitChunks.cacheGroups;
                const preactModules = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
                if (cacheGroups.framework) {
                    cacheGroups.preact = Object.assign({}, cacheGroups.framework, {
                        test: preactModules
                    });
                    cacheGroups.commons.name = 'framework';
                }
                else {
                    cacheGroups.preact = {
                        name: 'commons',
                        chunks: 'all',
                        test: preactModules
                    };
                }
            }
    
            // Install webpack aliases:
            const aliases = config.resolve.alias || (config.resolve.alias = {});
            aliases.react = aliases['react-dom'] = 'preact/compat';
    
            // inject Preact DevTools
            if (dev && !isServer) {
                const entry = config.entry;
                config.entry = () => entry().then(entries => {
                    entries['main.js'] = ['preact/debug'].concat(entries['main.js'] || []);
                    return entries;
                });
            }
    
            return config;
        }
    }

and set up a .babelrc

{
    "presets": [
        "next/babel",
        "@emotion/babel-preset-css-prop"
    ]
}

1. Modify a few a styles to have emotion.
2. Run npm run dev and see the styles being applied
3. Compare with npm run build && npm start

Expected behavior

The styles should apply correctly on build and export as well, instead of just in dev mode, without needing to use jsx pragma

Screenshots

Screenshots highlighting the difference when between npm run dev and npm run build

System information

• OS: macOS catalina
• Version of Next.js: 9.3.5
• Version of Node.js: 13.7.0

[Aaditya-Sahay]

I will be inclined to agree on the fact that babelrc gets read, next-babel-loader explicitly logs after adding the file to configs set, “> Using external babel configuration” But it still probably has to be an issue on the next side of things, as the dev server works fine, with the same config.

[odensc]

I believe this issue is with either Preact or emotion/styled-components, and has nothing to do with whether a babelrc is present. I have other plugins in my babelrc that continue to work perfectly fine, meaning it is indeed reading the babelrc file.