Usage with Nextjs

Hi, thanks for creating this library! I was eager to try it with Nextjs, but faced some issues. I’m using Nextjs v 10.0.7 and latest vanilla-extract. I have this setup:

next.config.js:

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(new VanillaExtractPlugin({
      // allowRuntime: true
    }));
    config.plugins.push(new MiniCssExtractPlugin())
    return config;
  },
};

.babelrc:

{
  "presets": ["next/babel"],
  "plugins": [
    "@vanilla-extract/babel-plugin"
  ]
}

When I try to run yarn dev, I get:

Error: Cannot find module 'webpack/lib/NormalModule'
Require stack:
- /{projectpath}/node_modules/mini-css-extract-plugin/dist/index.js
- /{projectpath}/node_modules/mini-css-extract-plugin/dist/cjs.js
- /{projectpath}/next.config.js

Do you perhaps an idea how to solve this: Thanks!

[Mokshit06]

I’ve got vanilla-extract working with Next.js with hot reload. This setup works but it shows You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js warning.

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["@vanilla-extract/babel-plugin"]
}

next.config.js

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const {
  getGlobalCssLoader,
} = require('next/dist/build/webpack/config/blocks/css/loaders');
const {
  default: MiniCssExtractPlugin,
} = require('next/dist/build/webpack/plugins/mini-css-extract-plugin/src');

/**
 * @param {ConstructorParameters<typeof VanillaExtractPlugin>[0]} pluginOptions Custom config for vanilla-extract
 */
function withVanillaExtract(pluginOptions = {}) {
  /**
   * @param {any} nextConfig Custom config for Next.js
   */
  return (nextConfig = {}) => {
    return {
      // For Webpack 4, you'll need to install it seperately
      future: {
        webpack5: true,
      },
      webpack(config, options) {
        const { dev, isServer } = options;

        config.module.rules.push({
          test: /\.css$/i,
          sideEffects: true,
          use: dev
            ? getGlobalCssLoader(
                {
                  assetPrefix: options.config.assetPrefix,
                  future: {
                    webpack5: true,
                  },
                  isClient: !isServer,
                  isServer,
                  isDevelopment: dev,
                },
                [],
                []
              )
            : [MiniCssExtractPlugin.loader, 'css-loader'],
        });

        const plugins = [];

        plugins.push(new VanillaExtractPlugin(pluginOptions));

        if (!dev) {
          plugins.push(
            new MiniCssExtractPlugin({
              filename: 'static/css/[contenthash].css',
              chunkFilename: 'static/css/[contenthash].css',
              ignoreOrder: true,
            })
          );
        }

        config.plugins.push(...plugins);

        if (typeof nextConfig.webpack === 'function') {
          return nextConfig.webpack(config, options);
        }

        return config;
      },
    };
  };
}

module.exports = withVanillaExtract()();

[danielberndt]

Ah thanks, downgrading to "@vanilla-extract/babel-plugin": "0.2.1" resolves this issue 👍

Update: "@vanilla-extract/babel-plugin": "0.3.1" now works as well