Usage with Nextjs

[themre]

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!

[themre]

I managed to progress a bit by installing webpack@4.4.0, but now I'm facing limitation of importing global styles by next.js:
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).

[skvark]

I managed to get vanilla-extract working with Next.js partially with these configs. Looks a bit hacky and hot reload does not work (file changes are detected, but new styles are not applied).

.babelrc

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

next.config.js

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

module.exports = {
  // works with webpack 4 also so this can be omitted
  future: {
    webpack5: true,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    });
    config.plugins.push(
      new VanillaExtractPlugin(),
      new MiniCssExtractPlugin({
        // without these Next.js will look for the generated stylesheets from the wrong place
        filename: "static/chunks/[chunkhash].css",
        chunkFilename: "static/chunks/[chunkhash].css",
      })
    );
    return config;
  },
};

To get rid of the Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules). error, you'll need to move all .css.ts files to the components directory (they do not work when located under pages) and import them from there.

[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()();

[atdrago]

I have no idea what I'm doing, but...

If I change the second parameter of getGlobalCssLoader from [] to [() => {}], the warnings go away. Doesn't seem to have any negative impact... 🙈

[essejmclean]

@atdrago What you've done with that second argument is set the PostCSS plugins array to be empty. Digging through the Next.js Webpack configuration files (there's a lot there) you can find that this function is used as the second argument for getGlobalCssLoader when it's called.

What's interesting about this is that you can reintroduce a PostCSS configuration with that second argument in the getGlobalCssLoader function. This is what I wanted to do and what spurred me to look into this.

Here's my comment with the full solution. Also in the main thread just below.

[TheKnarf]

I had to add yarn add --dev css-loader to get next build to work.

[brendanmckenzie]

Slight tweak needed to pass through additional next.config.js parameters (i.e., { images: { domains: [] } }):

...
  return (nextConfig = {}) => {
    return {
      // For Webpack 4, you'll need to install it seperately
      future: {
        webpack5: true,
      },
      ...nextConfig, // <-- this
      webpack(config, options) {
...

[ejkkan]

Any chance we could have a NextJs example in the docs from someone who's got it running? :)

[danielberndt]

Not sure whether anything has changed in the meantime, but as soon as I add a .babelrc with

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

it yields Module parse failed: Unexpected token errors when encountering jsx syntax.

I just set up a fresh project via yarn create next-app and only added yarn add -D @vanilla-extract/babel-plugin and the .babelrc file above and it failed with

Module parse failed: Unexpected token (8:9)
File was processed with these loaders:
 * ./node_modules/@next/react-refresh-utils/loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
|   pageProps
| }) {
>   return <Component {...pageProps} __self={this} __source={{
|     fileName: _jsxFileName,
|     lineNumber: 4,

[LekoArts]

@danielberndt See #40

[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

[themre]

I tried with clean NextJS project and new 1.0.0 release, and I get this error (tried also various options above):

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

My config is:

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

module.exports = {
  webpack: (config) => {
    config.plugins.push(new MiniCssExtractPlugin());
    config.plugins.push(new VanillaExtractPlugin());
    config.plugins.push(new HtmlWebpackPlugin());

    config.module.rules.push({
      test: /\.css$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    });

    return config;
  },
};

[sakit0]

I tried this by Nextjs v11.
#89 (comment)

Nextjs v11 needed some ingenuity.

// old
const {
  default: MiniCssExtractPlugin,
} = require('next/dist/build/webpack/plugins/mini-css-extract-plugin/src');

// new
const {
  default: MiniCssExtractPlugin,
} = require('next/dist/build/webpack/plugins/mini-css-extract-plugin.js');

But next build gives an error.

info  - Creating an optimized production build  
Failed to compile.

frontend/pages/style.css.ts.vanilla.css!=!./node_modules/virtual-resource-loader/dist/virtual-resource-loader.cjs.js?{"source":"Ll8xNmhyejJpMCB7CiAgY29sb3I6IHJlZDsKfQ=="}!./node_modules/@vanilla-extract/webpack-plugin/extracted/dist/vanilla-extract-webpack-plugin-extracted.cjs.js
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started


> Build error occurred
Error: > Build failed because of webpack errors

I want a example of Nextjs.

[ancashoria]

I got it to kinda work by following the docs. It seems to only work at runtime because after I disable JS it doesn't apply the styles anymore. I don't see any .vanilla.css files in my build folder.

[LukasBombach]

This minimal next.config.js already seems to work, although I had to add a couple of dependencies:

yarn add -E mini-css-extract-plugin webpack css-loader

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

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    });

    config.plugins.push(
      new VanillaExtractPlugin(),
      new MiniCssExtractPlugin({
        filename: "static/css/[contenthash].css",
        chunkFilename: "static/css/[contenthash].css",
      })
    );

    return config;
  },
};

[ancashoria]

Yep, this one works for me. Thanks 👍

[atdrago]

With the solution above I've got everything working, except for createTheme. On first load when using next dev, and somewhat intermittently, I get this error in the browser console:

Warning: Prop className did not match. Server: "theme_themeClass__1e63k7t0" Client: "theme__createTheme__1e63k7t0"

It doesn't happen when using next build.

Has anyone else run into this and been able to come up with a solution?

[atdrago]

For those who are running into this issue. I think I figured out the root cause.

Workaround

This does not work:

export const [themeClass, vars] = createTheme({ ... });

This works:

const theme = createTheme({ ... });

export const themeClass = theme[0];
export const vars = theme[1];

Explanation

It looks like it actually has nothing to do with SSR like I originally thought, but might actually be a bug in @vanilla-extra/babel-plugin. Something is going wrong here in this extractName function: https://github.com/seek-oss/vanilla-extract/blob/e41529e50efe22e1429e3b60f6df83e299dea6c0/packages/babel-plugin/src/index.ts#L55-L72

I don't totally understand what's going on, but for some reason, when exporting a destructured Array, on the first pass, _createTheme is identified as the "export", and on the second pass, themeClass is identified as the "export", thus causing the mismatch issue we see in Next. The bug only occurs because of the destructured array export. Exporting constants fixes the issue. I'm not sure if this is a true "bug" or not, but I can create an issue if you think it's worth it, @mattcompiles

[gafemoyano]

I don't know why this happens either, but after scratching my head for a couple of hours as to why my theme vars were undefiend, this did the trick. Thanks for posting!

[essejmclean]

I have a working solution that Hot Module Reloads (HMR) in development and builds successfully while still supporting PostCSS and not throwing any warnings or errors.

In it's most basic form it requires a few dev dependencies in addition to the standard vanilla-extract webpack requirements: yarn add -D webpack mini-css-extract-plugin css-loader postcss postcss-loader

To easily test that PostCSS is working, I include postcss-fluid (yarn add -D postcss-fluid) and assign it to a style with text. For example, fontSize: "fluid(10px, 100px)". I also include Next.js default PostCSS configuration: yarn add -D postcss-flexbugs-fixes postcss-preset-env.

Here's my working code with all of the referenced packages installed.

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

// We have our PostCSS config here to reference the plugins easily. This is an area for improvement.
// Have loose ideas on how to solve but not the time to do it right now.
const postCssPlugins = [
  [
    // Added postcss-fluid to easily test if PostCSS is being used by adding `fontSize: "fluid(10px, 100px)"` on a style with text
    "postcss-fluid",
    {
      min: "320px", // Min media size
      max: "1200px", // Max media size
      functionName: "fluid", // Function name, may be anything
    },
  ],
  // Below PostCSS references Next.js default configuration
  // https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins
  "postcss-flexbugs-fixes",
  [
    "postcss-preset-env",
    {
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
      features: {
        "custom-properties": false,
      },
    },
  ],
];

module.exports = {
  reactStrictMode: true,
  webpack: (config, { dev, isServer }) => {
    config.module.rules.push({
      test: /\.css$/i,
      sideEffects: true,
      use: dev
        ? getGlobalCssLoader(
            {
              isClient: !isServer,
              isDevelopment: dev,
            },
            postCssPlugins
          )
        : [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                url: false,
              },
            },
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: postCssPlugins,
                },
              },
            },
          ],
    });

    const plugins = [];

    plugins.push(new VanillaExtractPlugin());

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

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

    return config;
  },
};

Areas for improvement that I haven't looked into yet and would appreciate help on: reference PostCSS config file at the root of project like a typical postcss.config.js file or similar variant.

EDIT: Got this working with webfonts loading now by adding option for url: false from v-e webpack docs.

[daryawood]

Have spent a lot of time struggling with different errors, e.g. Error: You forgot to add 'mini-css-extract-plugin' plugin, (0 , _identifier.getUndoPath) is not a function.

The config supports HMR and the app can be built for production.

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

module.exports = {
  webpack5: true,
  webpack(config, options) {
    const { dev, isServer } = options;

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

    config.plugins.push(new VanillaExtractPlugin());

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

    return config;
  },
};

Dependencies are:

"dependencies": {
    "@vanilla-extract/css": "1.1.0",
    "next": "11.0.1",
  },
"devDependencies": {
    "@vanilla-extract/babel-plugin": "1.0.1",
    "@vanilla-extract/webpack-plugin": "1.0.3",
    "css-loader": "5.2.7",
  }

[harisraharjo]

This worked for me by replacing "css-loader" with
{ loader: "css-loader", options: { url: false, }, }

Edit: it breaks when trying to build for prod. Break point: when using dynamic import for a component that uses vanilla-extract

[AeonFr]

I published an npm package based on the answer by @mockshit06

# if you're using nextjs 10
npm install --save-dev vanilla-extract-plugin-nextjs@version10
# if using nextjs 11 (@latest right now)
npm install --save-dev vanilla-extract-plugin-nextjs

More info about how to use it in the readme page

[tbergquist-godaddy]

The setup mentioned above has been working for me with "mini-css-extract-plugin": "^1.6.2", however when I try to upgrade to "mini-css-extract-plugin": "^2.2.0", I get the (0 , _identifier.getUndoPath) is not a function error.

Has anyone been able to make it work with that version, I can see that the package @AeonFr has published is still using v1 of mini-css-extract-plugin.

[stefanprobst]

When Next.js switches from babel to swc - what does that mean for vanilla-extract?

[markdalgleish]

We may have to make an swc plugin, but we might also revisit how the webpack plugin works so that it doesn't require the Babel plugin anymore. The other bundler integrations already don't have this requirement.

[markdalgleish]

Even though I don't personally use Next.js at the moment, I wanted to try this integration out for myself. I got it working (thanks to everyone in this thread!) and pushed my example repo to GitHub: https://github.com/markdalgleish/nextjs-vanilla-extract-example

My next.config.js file has a couple of notable changes:

• I'm prepending a rule to the oneOf array of CSS rules targeting .vanilla.css files that vanilla-extract generates internally. This gets rid of Warning: Built-in CSS support is being disabled...
• I'm referencing the version of css-loader that's already bundled with Next rather than forcing it to be installed separately.

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

module.exports = {
  webpack5: true,
  webpack(config, options) {
    const { dev, isServer } = options;

    config.module.rules[config.module.rules.length - 1].oneOf.unshift({
      test: /\.vanilla\.css$/i,
      sideEffects: true,
      use: dev
        ? getGlobalCssLoader(
          {
            assetPrefix: config.assetPrefix,
            future: { webpack5: true },
            isClient: !isServer,
            isServer,
            isDevelopment: dev,
          },
          [],
          []
        )
        : [MiniCssExtractPlugin.loader, require.resolve('next/dist/compiled/css-loader/cjs')],
    });

    config.plugins.push(new VanillaExtractPlugin());

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

    return config;
  },
};

[themre]

Awesome, thanks for taking time in checking this one!

[gafemoyano]

Thanks Mark! I just tried it out on my project and it worked without issues. Do you happen to know how to get around Webpack's warning of:
[webpack.cache.PackFileCacheStrategy] Serializing big strings (548kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)?

It's not terrible, but it does lead to the nodejs development process crashing every now and then.

[mattcompiles]

@gafemoyano it'd be great if you can create a small reproduction and post a new issue.

[essejmclean]

@markdalgleish and you did this all so elegantly. thank you for taking the time to put this example together! this is a game changer. works just fine with postcss plugins as well. very exciting :)

[gafemoyano]

Sure! I'll give it a shot

[markdalgleish]

Realised my Next config doesn't support autoprefixing in production builds, so I just pushed a fix to my example repo—ended up being a lot simpler!

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const { getGlobalCssLoader } = require('next/dist/build/webpack/config/blocks/css/loaders');

module.exports = {
  webpack(config, options) {
    const { dev, isServer } = options;

    config.module.rules[config.module.rules.length - 1].oneOf.unshift({
      test: /\.vanilla\.css$/i,
      sideEffects: true,
      use: getGlobalCssLoader(
        {
          assetPrefix: config.assetPrefix,
          isClient: !isServer,
          isServer,
          isDevelopment: dev,
        },
        [],
        []
      )
    });

    config.plugins.push(new VanillaExtractPlugin());

    return config;
  },
};

[markdalgleish]

Alright, let's do this. Opened a PR to add an official Next.js plugin: #336

[markdalgleish]

Shipped! We now have an official Next.js plugin: https://vanilla-extract.style/documentation/setup/#nextjs

[cpeaustriajc]

Here's an example repository, I wanna add this to the next.js examples repository.

https://github.com/jaycedotbin/vanilla-extract-next-js

[essejmclean]

Here's an example repository, I wanna add this to the next.js examples repository.

https://github.com/jaycedotbin/vanilla-extract-next-js

Hi, I was wondering if anyone else has had a chance to look at @jaycedotbin's example repo above. I'm experiencing the same issues with webpack serialization warnings. They fill up the entire terminal which certainly degrades the development experience. I've looked into this as far as I can with my webpack experience but have struggled to find a solution.

I'm also wondering if this warrants its own issue, which I'm happy to draft if that'd be helpful.

[cpeaustriajc]

I reopened a pull request to add an example repo for vanilla-extract-ts and js I don't know why but it had an issue when I was using Arch. It didn't work on the first run but worked when I modified the styles, I changed to Fedora but haven't tested it yet.

Here's my fork of the next.js repository

Sorry I'm currently in college and I need to focus on it. But I really wanna contribute in this project because I like it and next.js also.