Webpack + React.lazy + nested routing: Refused to apply style from '*/css/main.css' because its MIME type ('text/html')

Igor Published at Dev

Igor

I use React.lazy and nested routing. When I go to /items/any I get this error:

Refused to apply style from 'http://localhost:8000/items/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

The problem is in the path, the files are in http://localhost:8000/css/main.css not http://localhost:8000/**items**/css/main.css

How to fix it? I'm not sure, but I think somehow using webpack can fix it.

navigation

import React, { Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Loading from '../components/Loading';
// import Item from '../screens/Item'; // working!

const Item = React.lazy(() => import('../screens/Item')); // don't working


const Navigation = () => (
  <BrowserRouter>
    ...
    <Route path="/items/:id">
      <Item />
    </Route>
    ...
  </BrowserRouter>
);

export default Navigation;

webpack.config

module.exports = (env, options) => {
  const isDevMode = options.mode === 'development';
  const dist = path.join(__dirname, 'dist');
  const src = path.join(__dirname, 'src');

  return {
    stats: 'minimal',
    context: src,
    entry: './index.js',
    output: {
      path: dist,
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js',
    },
    devtool: isDevMode && 'source-map',
    devServer: {
      public: 'http://localhost:8000/',
      publicPath: 'http://localhost:8000/',
      contentBase: './',
      historyApiFallback: true,
      port: 8000,
      overlay: true,
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlPlugin({
        template: 'index.html',
      }),
      new MiniCssExtractPlugin({
        filename: 'css/[name].css',
        chunkFilename: 'css/[name].css',
        ignoreOrder: false, // Enable to remove warnings about conflicting order
      }),
    ],
    ...
  };
};

Igor

I found solution this problem. Just need to add publicPath to output into webpack.config

webpack.config

module.exports = (env, options) => {
  const isDevMode = options.mode === 'development';
  const dist = path.join(__dirname, 'dist');
  const src = path.join(__dirname, 'src');

  return {
    stats: 'minimal',
    context: src,
    entry: './index.js',
    output: {
      path: dist,
      publicPath: isDevMode ? 'http://localhost:8000/' : '', // <-- here
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js',
    },
    devtool: isDevMode && 'source-map',
    devServer: {
      historyApiFallback: true,
      port: 8000,
      overlay: true,
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlPlugin({
        template: 'index.html',
      }),
      new MiniCssExtractPlugin({
        filename: 'css/[name].css',
        chunkFilename: 'css/[name].css',
        ignoreOrder: false, // Enable to remove warnings about conflicting order
      }),
    ],
    ...
  };

Collected from the Internet

Please contact [email protected] to delete if infringement.