jss-plugin-isolate can't find module for css-initials

[Naspo88]

Hi, I'm bumping react-styleguidist to the latest version (12) and I start to have this warning popping up when I try to lunch the server:

This is how it looks like my configuration:

module.exports = {
  webpackConfig: { ...require('./build/webpack.styleguide.js') },
  assetsDir: './docs/images',
  propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json', {
    savePropValueAsString: true,
  }).parse,
  title: 'Component Library Style Guide',
  pagePerSection: true,
  sections: [
    // list of sections
  ],
  ignore: [
    '**/__tests__/**',
    '**/__snapshots__/**',
    '**/*.test.{js,jsx,ts,tsx}',
    '**/*.spec.{js,jsx,ts,tsx}',
    '**/*.d.ts',
    '**/*.styled.{js,jsx,ts,tsx}',
    '**/Icons.tsx',
    '**/atoms/Gifs/**',
    '**/atoms/Icons/**',
    '**/molecules/Page/PageManager.tsx',
  ],
  skipComponentsWithoutExample: true,
  verbose: false,
  template: {
    head: {
      raw: `
          <style type="text/css">
            @font-face {
              font-family: 'Gotham';
              src: url(./src/fonts/gotham/Gotham-Book.woff2) format('woff2'), url(./src/fonts/gotham/Gotham-Book.woff) format('woff'); /* IE9 Compat Modes */
            }

            @font-face {
              font-family: 'Gotham';
              src: url(./src/fonts/gotham/Gotham-Bold.woff2) format('woff2'), url(./src/fonts/gotham/Gotham-Bold.woff) format('woff'); /* IE9 Compat Modes */
              font-weight: bold;
            }

            @font-face {
              font-family: 'GothamTabular';
              src: url('./src/fonts/gotham/Gotham-Book-tabular.woff') format('woff'); /* font with tabularised numbers */
            }

            @font-face {
              font-family: 'GothamTabular';
              src: url('./src/fonts/gotham/Gotham-Bold.woff2') format('woff2'), url('./src/fonts/gotham/Gotham-Bold.woff') format('woff'); /* IE9 Compat Modes */
              font-weight: bold;
            }

            @font-face {
              font-family: 'GothamTabularBold';
              src: url('./gotham/Gotham-Book-tabular.woff') format('woff'); /* font with tabularised numbers */
            }
          </style>
        `,
    },
  },
};

The weird thing is that I disabled the overlay for warning in my webpack configuration, but it keep appearing.

const TypescriptPlugingForStyledComponent = require('typescript-plugin-styled-components').default;
const path = require('path');
const webpack = require('webpack');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          getCustomTransformers: () => {
            return {
              before: [TypescriptPlugingForStyledComponent()],
            };
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        exclude: [
          /node_modules/,
          path.resolve(__dirname, '../src/components/atoms/Icons/Results'),
          path.resolve(__dirname, '../src/components/atoms/TrevorLoading'),
        ],
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
      {
        test: /\.jpe?g$|\.png$|\.svg$/,
        include: [path.resolve(__dirname, '../src/components/atoms/Icons/Results')],
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/sd/[name].[ext]?[hash]',
          },
        },
      },
      {
        test: /\.(gif)$/i,
        include: [path.resolve(__dirname, '../src/components/atoms/TrevorLoading')],
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]',
          },
        },
      },
      {
        test: /\.(woff|woff2|ttf|otf)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.png', '.gif', '.svg', '.d.ts', '.woff', '.woff2'],
    modules: [path.join(__dirname, '../src'), 'node_modules'],
    plugins: [
      new TsConfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ],
    alias: { '@internal/component-library': path.resolve(__dirname, '../src/index.ts') },
    fallback: {
      url: require.resolve('url'),
    },
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ],
  devServer: {
    allowedHosts: ['host.docker.internal'],
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },
};

What am I doing wrong?

[Naspo88]

I haven't solved the issue described here but I've noticed how the devServer object is not picked up by the new version of the library.

The PR above addresses this bug.