Webpack + React.lazy + вложенная маршрутизация: Отказался от применения стиля из '* / css / main.css', потому что его тип MIME ('text / html') - PullRequest
Новая
       18

Webpack + React.lazy + вложенная маршрутизация: Отказался от применения стиля из '* / css / main.css', потому что его тип MIME ('text / html')

0 голосов
/ 07 ноября 2019

Я использую React.lazy и вложенную маршрутизацию. Когда я перехожу к /items/any, я получаю эту ошибку:

Отказался от применения стиля из 'http://localhost:8000/items/css/main.css', потому что его тип MIME (' text / html ') не поддерживается MIME таблицы стилейтип, и строгая проверка MIME включена.

Проблема в пути, файлы в http://localhost:8000/css/main.css не http://localhost:8000/**items**/css/main.css

Как это исправить? Я не уверен, но я думаю, что с помощью веб-пакета это можно исправить.

навигация 

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
      }),
    ],
    ...
  };
};

1 Ответ

0 голосов
/ 08 ноября 2019

Я нашел решение этой проблемы. Просто нужно добавить publicPath к output в 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
      }),
    ],
    ...
  };
...