Skip to content

Instantly share code, notes, and snippets.

@bizarre
Last active March 25, 2023 23:53
Show Gist options
  • Save bizarre/825cab8224c28e93ff1a3933642f9271 to your computer and use it in GitHub Desktop.
Save bizarre/825cab8224c28e93ff1a3933642f9271 to your computer and use it in GitHub Desktop.
NextJS 13 app dir + vanilla extract patches
diff --git a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js
index 09e1996..fc27553 100644
--- a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js
+++ b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.dev.js
@@ -43,7 +43,8 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
isServer,
isDevelopment: dev,
future: nextConfig.future || {},
- experimental: nextConfig.experimental || {}
+ experimental: nextConfig.experimental || {},
+ hasAppDir: nextConfig.experimental.appDir
}, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev)), [])
});
config.plugins.push(new webpackPlugin.VanillaExtractPlugin({
diff --git a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js
index 09e1996..fc27553 100644
--- a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js
+++ b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.cjs.prod.js
@@ -43,7 +43,8 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
isServer,
isDevelopment: dev,
future: nextConfig.future || {},
- experimental: nextConfig.experimental || {}
+ experimental: nextConfig.experimental || {},
+ hasAppDir: nextConfig.experimental.appDir
}, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev)), [])
});
config.plugins.push(new webpackPlugin.VanillaExtractPlugin({
diff --git a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.esm.js b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.esm.js
index 83af576..d9237ad 100644
--- a/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.esm.js
+++ b/node_modules/@vanilla-extract/next-plugin/dist/vanilla-extract-next-plugin.esm.js
@@ -35,7 +35,8 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
isServer,
isDevelopment: dev,
future: nextConfig.future || {},
- experimental: nextConfig.experimental || {}
+ experimental: nextConfig.experimental || {},
+ hasAppDir: nextConfig.experimental.appDir
}, () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev)), [])
});
config.plugins.push(new VanillaExtractPlugin({
diff --git a/node_modules/next/dist/build/webpack/loaders/utils.js b/node_modules/next/dist/build/webpack/loaders/utils.js
index 5c3625d..ed39414 100644
--- a/node_modules/next/dist/build/webpack/loaders/utils.js
+++ b/node_modules/next/dist/build/webpack/loaders/utils.js
@@ -18,7 +18,7 @@ function isClientComponentModule(mod) {
const hasClientDirective = ((ref = mod.buildInfo.rsc) == null ? void 0 : ref.type) === _constants.RSC_MODULE_TYPES.client;
return hasClientDirective || imageRegex.test(mod.resource);
}
-const regexCSS = /\.(css|scss|sass)(\?.*)?$/;
+const regexCSS = /\.(css|scss|sass|css\.ts)(\?.*)?$/;
exports.regexCSS = regexCSS;
//# sourceMappingURL=utils.js.map
\ No newline at end of file
diff --git a/node_modules/next/dist/server/app-render.js b/node_modules/next/dist/server/app-render.js
index 6b00cef..982163f 100644
--- a/node_modules/next/dist/server/app-render.js
+++ b/node_modules/next/dist/server/app-render.js
@@ -357,7 +357,7 @@ function patchFetch(ComponentMod) {
// entrypoint.
if (serverCSSForEntries.includes(css) || !/\.module\.css/.test(css)) {
const mod = serverComponentManifest[css];
- if (mod) {
+ if (mod && mod.default) {
for (const chunk of mod.default.chunks){
chunks.add(chunk);
}
diff --git a/node_modules/next/dist/build/webpack/loaders/utils.js b/node_modules/next/dist/build/webpack/loaders/utils.js
index 5c3625d..ed39414 100644
--- a/node_modules/next/dist/build/webpack/loaders/utils.js
+++ b/node_modules/next/dist/build/webpack/loaders/utils.js
@@ -18,7 +18,7 @@ function isClientComponentModule(mod) {
const hasClientDirective = ((ref = mod.buildInfo.rsc) == null ? void 0 : ref.type) === _constants.RSC_MODULE_TYPES.client;
return hasClientDirective || imageRegex.test(mod.resource);
}
-const regexCSS = /\.(css|scss|sass)(\?.*)?$/;
+const regexCSS = /\.(css|scss|sass|css\.ts)(\?.*)?$/;
exports.regexCSS = regexCSS;
//# sourceMappingURL=utils.js.map
\ No newline at end of file
diff --git a/node_modules/next/dist/server/app-render.js b/node_modules/next/dist/server/app-render.js
index bb2fd63..b658482 100644
--- a/node_modules/next/dist/server/app-render.js
+++ b/node_modules/next/dist/server/app-render.js
@@ -427,7 +427,7 @@ function patchFetch(ComponentMod) {
// entrypoint.
if (serverCSSForEntries.includes(css) || !/\.module\.css/.test(css)) {
const mod = serverComponentManifest[css];
- if (mod) {
+ if (mod && mod.default) {
for (const chunk of mod.default.chunks){
chunks.add(chunk);
}
const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
};
module.exports = withVanillaExtract(nextConfig);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment