v0.28.x fails on project using @vanilla-extract/next-plugin
nayaabkhan opened this issue · 1 comments
nayaabkhan commented
Background
We have a NextJS project using vanilla-extract with playroom v0.27.9 working well. Playroom config is below.
const webpack = require('webpack')
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
module.exports = {
components: './library/components/index.ts',
snippets: './.playroom/snippets.ts',
outputPath: './public/playroom',
frameComponent: './.playroom/FrameComponent.tsx',
scope: './.playroom/useScope.ts',
title: 'Prism System',
baseUrl: '/playroom/',
openBrowser: false,
port: 8082,
widths: [320, 768, 1024, 1280],
typeScriptFiles: ['library/**/*.{ts,tsx}', '!**/node_modules'],
webpackConfig: () => ({
plugins: [
new VanillaExtractPlugin({
identifiers: 'short',
}),
new MiniCssExtractPlugin({
ignoreOrder: true,
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
module: {
rules: [
{
test: /\.tsx?$/,
include: __dirname,
exclude: /node_modules/,
use: {
loader: 'swc-loader',
},
},
{
test: /\.vanilla\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: require.resolve('css-loader'),
options: {
url: false,
},
},
],
},
{
test: /\.svg$/i,
include: __dirname,
exclude: /node_modules/,
use: {
loader: 'file-loader',
},
},
],
},
resolve: {
extensions: ['.js', '.ts', '.tsx'],
plugins: [new TsconfigPathsPlugin()],
},
}),
}
However, upgrading to any v0.28.x causes failure:
-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(4:7) /Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/extracted.js Unknown word
2 | export {};
3 | if(module.hot) {
> 4 | // 1671772239226
| ^
5 | var cssReload = require("../../mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
6 | module.hot.dispose(cssReload);
Generated code for /Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/mini-css-extract-plugin/dist/loader.js!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{"fileName":"node_modules/playroom/src/Playroom/Playroom.css.ts.vanilla.css","source":"aHRtbCB7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiAxMDAlOwogIG92ZXJmbG93OiBoaWRkZW47CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdWlzeDR2MWEpOwp9Cmh0bWxbZGF0YS1wbGF5cm9vbS1kYXJrXSB7CiAgY29sb3Itc2NoZW1lOiBkYXJrOwp9CmJvZHkgewogIG1hcmdpbjogMDsKfQouXzFxOWQ1Ym4zIHsKICBwb3NpdGlvbjogYWJzb2x1dGUgIWltcG9ydGFudDsKfQouXzFxOWQ1Ym42IHsKICBtYXgtd2lkdGg6IDkwdnc7Cn0KLl8xcTlkNWJuNi5fMXE5ZDVibjQgewogIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgxMDAlKTsKfQouXzFxOWQ1Ym44IHsKICBtYXgtaGVpZ2h0OiA5MHZoOwp9Ci5fMXE5ZDVibjguXzFxOWQ1Ym40IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7Cn0KLl8xcTlkNWJuYi5fMXE5ZDVibjkgewogIHdpZHRoOiA2MHB4Owp9Ci5fMXE5ZDVibmQgewogIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50OwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgb3V0bGluZTogbm9uZTsKICBtaW4td2lkdGg6IHZhcigtLXVpc3g0dmUpOwogIGhlaWdodDogdmFyKC0tdWlzeDR2ZSk7Cn0KLl8xcTlkNWJuZDo6YmVmb3JlIHsKICBjb250ZW50OiAiIjsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgdG9wOiAwOwogIGJvdHRvbTogMDsKICBsZWZ0OiAwOwogIHJpZ2h0OiAwOwogIGJhY2tncm91bmQtY29sb3I6IGN1cnJlbnRDb2xvcjsKICBvcGFjaXR5OiAwOwogIHBvaW50ZXItZXZlbnRzOiBub25lOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXVpc3g0dmIpOwogIHRyYW5zaXRpb246IHZhcigtLXVpc3g0dmYpOwp9Ci5fMXE5ZDVibmQ6bm90KDpob3Zlcik6bm90KDpmb2N1cykgewogIG9wYWNpdHk6IDAuMzsKfQouXzFxOWQ1Ym5kOmhvdmVyOjpiZWZvcmUsIC5fMXE5ZDVibmQ6Zm9jdXM6OmJlZm9yZSB7CiAgb3BhY2l0eTogMC4wNTsKfQouXzFxOWQ1Ym5mIHsKICByaWdodDogNjBweDsKfQ=="}!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/extracted.js
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(4:7) /Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/extracted.js Unknown word\n\n \u001b[90m 2 | \u001b[39mexport \u001b[33m{\u001b[39m\u001b[33m}\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 3 | \u001b[39m \u001b[36mif\u001b[39m\u001b[36m(module.hot)\u001b[39m \u001b[33m{\u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 4 | \u001b[39m // 1671772239226\n \u001b[90m | \u001b[39m \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 5 | \u001b[39m var cssReload = \u001b[36mrequire\u001b[39m\u001b[36m(\u001b[39m\u001b[32m\"../../mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\"\u001b[39m\u001b[36m)\u001b[39m\u001b[36m(\u001b[39mmodule.id, \u001b[33m{\u001b[39m\u001b[32m\"locals\"\u001b[39m\u001b[33m:\u001b[39mfalse\u001b[33m}\u001b[39m\u001b[36m)\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 6 | \u001b[39m \u001b[36mmodule.hot.dispose\u001b[39m\u001b[36m(cssReload)\u001b[39m\u001b[33m;\u001b[39m\n");
error in ./node_modules/@vanilla-extract/webpack-plugin/extracted.js
Syntax Error: HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
askoufis commented
This is quite hard to debug without a minimal reproduction. It may also be fixed in newer version of playroom
. Please feel free to re-open with a minimal reproduction if this is still an issue.