Closed nayaabkhan closed 1 month ago
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
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.
playroom
Background
We have a NextJS project using vanilla-extract with playroom v0.27.9 working well. Playroom config is below.
However, upgrading to any v0.28.x causes failure: