Replies: 25 comments 13 replies
-
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: |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
I've got .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()(); |
Beta Was this translation helpful? Give feedback.
-
I had to add |
Beta Was this translation helpful? Give feedback.
-
Slight tweak needed to pass through additional next.config.js parameters (i.e.,
|
Beta Was this translation helpful? Give feedback.
-
Any chance we could have a NextJs example in the docs from someone who's got it running? :) |
Beta Was this translation helpful? Give feedback.
-
Not sure whether anything has changed in the meantime, but as soon as I add a
it yields I just set up a fresh project via
|
Beta Was this translation helpful? Give feedback.
-
@danielberndt See #40 |
Beta Was this translation helpful? Give feedback.
-
Ah thanks, downgrading to Update: |
Beta Was this translation helpful? Give feedback.
-
I tried with clean NextJS project and new 1.0.0 release, and I get this error (tried also various options above):
My config is:
|
Beta Was this translation helpful? Give feedback.
-
I tried this by Nextjs v11. Nextjs v11 needed some ingenuity.
But 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. |
Beta Was this translation helpful? Give feedback.
-
This minimal
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;
},
}; |
Beta Was this translation helpful? Give feedback.
-
With the solution above I've got everything working, except for
It doesn't happen when using Has anyone else run into this and been able to come up with a solution? |
Beta Was this translation helpful? Give feedback.
-
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: To easily test that PostCSS is working, I include 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. |
Beta Was this translation helpful? Give feedback.
-
Have spent a lot of time struggling with different errors, e.g. 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:
|
Beta Was this translation helpful? Give feedback.
-
I published an npm package based on the answer by @mockshit06
More info about how to use it in the readme page |
Beta Was this translation helpful? Give feedback.
-
The setup mentioned above has been working for me with 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. |
Beta Was this translation helpful? Give feedback.
-
When Next.js switches from |
Beta Was this translation helpful? Give feedback.
-
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
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;
},
}; |
Beta Was this translation helpful? Give feedback.
-
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;
},
}; |
Beta Was this translation helpful? Give feedback.
-
Alright, let's do this. Opened a PR to add an official Next.js plugin: #336 |
Beta Was this translation helpful? Give feedback.
-
Shipped! We now have an official Next.js plugin: https://vanilla-extract.style/documentation/setup/#nextjs |
Beta Was this translation helpful? Give feedback.
-
Here's an example repository, I wanna add this to the next.js examples repository. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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:
.babelrc:
When I try to run
yarn dev
, I get:Do you perhaps an idea how to solve this: Thanks!
Beta Was this translation helpful? Give feedback.
All reactions