Styleguidist build with webpack configured to use file-loader not extracting the file

[alqh]

Hello,

I'm trying to work out what is going on with the styleguidist server, it's similar to this issue in that we are using file-loader to extract out the css files etc, but it doesn't seem to be happening.

All the css and font assets data seem to be inlined within the javascript, rather than being extracted out into it's own files, and the javascript will attach the tag for the stylesheets.

Below is my verbose output, it looks legit with the plugin there, can anyone help give some pointers on how to go about debugging this? I run the webpack on it's own, and it does shred those asset files out ok.

Styleguidist config:

{
  assetsDir: undefined,
  tocMode: 'expand',
  compilerConfig: {
    objectAssign: 'Object.assign',
    target: {
      ie: 11
    },
    transforms: {
      modules: false,
      dangerousTaggedTemplateString: true,
      asyncAwait: false
    }
  },
  components: Function components,
  configDir: '/mydirectory/my-project-app',
  context: {},
  contextDependencies: undefined,
  configureServer: undefined,
  dangerouslyUpdateWebpackConfig: undefined,
  defaultExample: false,
  exampleMode: 'collapse',
  getComponentPathLine: componentPath => componentPath,
  getExampleFilename: Function default,
  handlers: componentPath => reactDocgen.defaultHandlers.concat((0, _reactDocgenDisplaynameHandler.createDisplayNameHandler)(componentPath)),
  ignore: [
    '**/__tests__/**',
    '**/*.test.{js,jsx,ts,tsx}',
    '**/*.spec.{js,jsx,ts,tsx}',
    '**/*.d.ts'
  ],
  editorConfig: undefined,
  logger: undefined,
  minimize: true,
  moduleAliases: undefined,
  mountPointId: 'rsg-root',
  pagePerSection: false,
  previewDelay: 500,
  printBuildInstructions: undefined,
  printServerInstructions: undefined,
  propsParser: undefined,
  require: [],
  resolver: Function default,
  ribbon: undefined,
  sections: [
    {
      components: Function components
    }
  ],
  serverHost: '0.0.0.0',
  serverPort: 6060,
  showCode: false,
  showUsage: false,
  showSidebar: true,
  skipComponentsWithoutExample: false,
  sortProps: undefined,
  styleguideComponents: undefined,
  styleguideDir: '/mydirectory/my-project-app/styleguide',
  styles: {},
  template: {},
  theme: {},
  title: 'My Project App Style Guide',
  updateDocs: undefined,
  updateExample: Function default,
  updateWebpackConfig: undefined,
  usageMode: 'collapse',
  verbose: true,
  version: undefined,
  webpackConfig: {
    target: 'web',
    mode: 'development',
    entry: './host/standalone.js',
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-react'
                ],
                babelrc: false
              }
            }
          ]
        },
        {
          test: /\.jsx?$/,
          exclude: /node_modules|dist|build/,
          use: [
            {
              loader: 'eslint-loader',
              options: {
                allowElseIf: true,
                fix: true
              }
            }
          ]
        },
        {
          test: /\.(html)$/,
          use: {
            loader: 'html-loader',
            options: {
              attrs: [
                ':data-src'
              ]
            }
          }
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: {
                injectType: 'linkTag'
              }
            },
            {
              loader: 'file-loader',
              options: {
                name: '[name].[md5:hash:hex:6].[ext]'
              }
            },
            {
              loader: 'extract-loader'
            },
            {
              loader: 'css-loader'
            }
          ]
        },
        {
          test: /\.jpe?g$|\.gif$|\.ico$|\.png$|\.svg|\.woff(2)?|\.eot|\.ttf/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[md5:hash:hex:6].[ext]'
              }
            }
          ]
        },
        {
          test: /\.s[ac]ss$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'style-loader',
              options: {
                injectType: 'linkTag'
              }
            },
            {
              loader: 'file-loader',
              options: {
                name: '[name].[md5:hash:hex:6].css'
              }
            },
            {
              loader: 'extract-loader'
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'postcss-loader'
            },
            {
              loader: 'sass-loader'
            }
          ]
        }
      ]
    },
    plugins: [
      StatsWriterPlugin {
        opts: {
          filename: 'stats.json',
          fields: null,
          stats: {
            all: false,
            assets: true,
            hash: true
          },
          transform: (data) => JSON.stringify(data, null, INDENT)
        }
      },
      ProvidePlugin {
        definitions: {
          $: 'jquery',
          jQuery: 'jquery'
        }
      },
      {
        apply: Function apply
      }
    ],
    resolve: {
      extensions: [
        '.js',
        '.jsx'
      ]
    },
    output: {
      filename: 'my-project-app.standalone.dev.js',
      path: '/mydirectory/my-project-app/dist',
      library: 'my-project-app',
      libraryTarget: 'window'
    },
    devServer: {
      contentBase: [
        'dist',
        'demo',
        'assets'
      ],
      liveReload: false,
      host: '0.0.0.0',
      disableHostCheck: true,
      port: 8118,
      historyApiFallback: true,
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      },
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
      },
      writeToDisk: true
    },
    watch: true
  }
}

Webpack config:

{
  entry: [
    '/mydirectory/my-project-app/node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8118',
    '/mydirectory/my-project-app/node_modules/webpack/hot/dev-server.js',
    '/mydirectory/my-project-app/node_modules/react-styleguidist/lib/client/index',
    '/mydirectory/my-project-app/node_modules/react-dev-utils/webpackHotDevClient.js'
  ],
  mode: 'development',
  output: {
    path: '/mydirectory/my-project-app/styleguide',
    filename: 'build/[name].bundle.js',
    chunkFilename: 'build/[name].js',
    publicPath: '',
    webassemblyModuleFilename: '[modulehash].module.wasm',
    library: '',
    hotUpdateFunction: 'webpackHotUpdate',
    jsonpFunction: 'webpackJsonp',
    chunkCallbackName: 'webpackChunk',
    globalObject: 'window',
    devtoolNamespace: '',
    libraryTarget: 'var',
    pathinfo: true,
    sourceMapFilename: '[file].map[query]',
    hotUpdateChunkFilename: '[id].[hash].hot-update.js',
    hotUpdateMainFilename: '[hash].hot-update.json',
    crossOriginLoading: false,
    jsonpScriptType: false,
    chunkLoadTimeout: 120000,
    hashFunction: 'md4',
    hashDigest: 'hex',
    hashDigestLength: 20,
    devtoolLineToLine: false,
    strictModuleExceptionHandling: false
  },
  resolve: {
    extensions: [
      '.wasm',
      '.mjs',
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
      '.json',
      '.js',
      '.jsx'
    ],
    alias: {
      'rsg-components': '/mydirectory/my-project-app/node_modules/react-styleguidist/lib/client/rsg-components'
    },
    unsafeCache: true,
    modules: [
      'node_modules'
    ],
    mainFiles: [
      'index'
    ],
    aliasFields: [
      'browser'
    ],
    mainFields: [
      'browser',
      'module',
      'main'
    ],
    cacheWithContext: false
  },
  plugins: [
    StyleguidistOptionsPlugin {
      options: Object {49},
      plugin: function () { [native code] }
    },
    MiniHtmlWebpackPlugin {
      options: {
        context: {
          title: 'My Project App Style Guide',
          container: 'rsg-root'
        },
        template: Function template
      },
      plugin: function () { [native code] }
    },
    DefinePlugin {
      definitions: {
        'process.env.NODE_ENV': '"development"',
        'process.env.STYLEGUIDIST_ENV': '"development"'
      }
    },
    HotModuleReplacementPlugin {
      options: {},
      multiStep: undefined,
      fullBuildTimeout: 200,
      requestTimeout: 10000
    },
    StatsWriterPlugin {
      opts: {
        filename: 'stats.json',
        fields: null,
        stats: {
          all: false,
          assets: true,
          hash: true
        },
        transform: (data) => JSON.stringify(data, null, INDENT)
      }
    },
    ProvidePlugin {
      definitions: {
        $: 'jquery',
        jQuery: 'jquery'
      }
    },
    {
      apply: Function apply
    }
  ],
  performance: {
    hints: false,
    maxAssetSize: 250000,
    maxEntrypointSize: 250000
  },
  target: 'web',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react'
              ],
              babelrc: false
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules|dist|build/,
        use: [
          {
            loader: 'eslint-loader',
            options: {
              allowElseIf: true,
              fix: true
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [
              ':data-src'
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'linkTag'
            }
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[md5:hash:hex:6].[ext]'
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.jpe?g$|\.gif$|\.ico$|\.png$|\.svg|\.woff(2)?|\.eot|\.ttf/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[md5:hash:hex:6].[ext]'
            }
          }
        ]
      },
      {
        test: /\.s[ac]ss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'linkTag'
            }
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[md5:hash:hex:6].css'
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ],
    unknownContextRequest: '.',
    unknownContextRegExp: false,
    unknownContextRecursive: true,
    unknownContextCritical: true,
    exprContextRequest: '.',
    exprContextRegExp: false,
    exprContextRecursive: true,
    exprContextCritical: true,
    wrappedContextRegExp: /.*/,
    wrappedContextRecursive: true,
    wrappedContextCritical: false,
    strictExportPresence: false,
    strictThisContextOnImports: false,
    unsafeCache: true,
    defaultRules: [
      {
        type: 'javascript/auto',
        resolve: {}
      },
      {
        test: /\.mjs$/i,
        type: 'javascript/esm',
        resolve: {
          mainFields: [
            'browser',
            'main'
          ]
        }
      },
      {
        test: /\.json$/i,
        type: 'json'
      },
      {
        test: /\.wasm$/i,
        type: 'webassembly/experimental'
      }
    ]
  },
  devServer: {
    contentBase: [
      'dist',
      'demo',
      'assets'
    ],
    liveReload: false,
    host: '0.0.0.0',
    disableHostCheck: true,
    port: 8118,
    historyApiFallback: true,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
    },
    writeToDisk: true
  },
  devtool: 'eval',
  cache: true,
  context: '/mydirectory/my-project-app',
  node: {
    console: false,
    process: true,
    global: true,
    Buffer: true,
    setImmediate: true,
    __filename: 'mock',
    __dirname: 'mock'
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,
    flagIncludedChunks: false,
    occurrenceOrder: false,
    sideEffects: false,
    providedExports: true,
    usedExports: false,
    concatenateModules: false,
    splitChunks: {
      hidePathInfo: false,
      chunks: 'async',
      minSize: 10000,
      minChunks: 1,
      maxAsyncRequests: Infinity,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 109,
      maxInitialRequests: Infinity,
      name: true,
      cacheGroups: {
        default: {
          automaticNamePrefix: '',
          reuseExistingChunk: true,
          minChunks: 2,
          priority: -20
        },
        vendors: {
          automaticNamePrefix: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    },
    runtimeChunk: undefined,
    noEmitOnErrors: false,
    checkWasmTypes: false,
    mangleWasmImports: false,
    namedModules: true,
    hashedModuleIds: false,
    namedChunks: true,
    portableRecords: false,
    minimize: false,
    minimizer: [
      {
        apply: Function apply
      }
    ],
    nodeEnv: 'development'
  },
  resolveLoader: {
    unsafeCache: true,
    mainFields: [
      'loader',
      'main'
    ],
    extensions: [
      '.js',
      '.json'
    ],
    mainFiles: [
      'index'
    ],
    cacheWithContext: false
  },
  infrastructureLogging: {
    level: 'info',
    debug: false
  }
}

ℹ ｢wds｣: Project is running at http://0.0.0.0:6060/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from dist, demo, assets
ℹ ｢wds｣: 404s will fallback to /index.html
You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.20.20.13:6060/

Loading components:
/mydirectory/my-project-app/src/components/configurable-actions.js

[stale[bot]]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.