[solved] Usage with Playroom

[bartekczyz]

Hello, I would like to ask for some help with configuring Playroom for the lib I'm creating.

Here's my playroom.config.js

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

module.exports = {
  components: '../src/index.ts',
  baseUrl: '/playroom/',
  outputPath: 'out',
  typeScriptFiles: ['../src/**/*.{ts,tsx}'],
  widths: [320, 768, 1280, 1920],
  openBrowser: true,
  port: 8082,
  iframeSandbox: 'allow-scripts allow-same-origin',

  webpackConfig: () => ({
    plugins: [
      new VanillaExtractPlugin(),
      new MiniCssExtractPlugin({
        ignoreOrder: true,
      }),
    ],
    module: {
      rules: [
        {
          test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: require.resolve('css-loader'),
              options: {
                url: false, // Required as image imports should be handled via JS/TS import statements
              },
            },
          ],
        },
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-typescript',
                '@babel/preset-react',
              ],
              plugins: ['@vanilla-extract/babel-plugin'],
            },
          },
        },
      ],
    },
  }),
};

But I'm getting errors when starting playroom:

 error  in ./node_modules/@vanilla-extract/webpack-plugin/extracted.js

Syntax Error: CssSyntaxError

(4:7) /Users/bartlomiejczyz/IdeaProjects/project/packages/package-name/node_modules/@vanilla-extract/webpack-plugin/extracted.js Unknown word

  2 | export {};
  3 |     if(module.hot) {
> 4 |       // 1666079078817
    |       ^
  5 |       var cssReload = require("../../mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
  6 |       module.hot.dispose(cssReload);

However building and serving works fine. Any ideas?

[bartekczyz]

Seems like loaders were targeting source codes, I had to exclude node modules. Here's updated rule:

{
          test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
          exclude: /node_modules/, // <- this fixed the problem
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: require.resolve('css-loader'),
              options: {
                url: false, // Required as image imports should be handled via JS/TS import statements
              },
            },
          ],
        },