Webpack: No template for dependency: CssDependency

294
22 мая 2022, 10:50

Есть небольшой проект на вебпаке 5.4.0. Его структура:

  • dist
  • node_modules
  • src
    • css
    • fonts
    • images
    • js
    • index.js
    • template.html
  • package.json
  • package-lock.json
  • webpack.config.js

При запуске проекта в dev-режиме появляется следующая ошибка:

ERROR in   Error: Child compilation failed:
  No template for dependency: CssDependency:
  Error: No template for dependency: CssDependency
  CodeGenerationError: No template for dependency: CssDependency
  - Compilation.js:2155
    [project1]/[webpack]/lib/Compilation.js:2155:20
  - CacheFacade.js:51
    [project1]/[webpack]/lib/CacheFacade.js:51:43
  - Cache.js:91
    [project1]/[webpack]/lib/Cache.js:91:34
  - MemoryCachePlugin.js:45 Array.<anonymous>
    [project1]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
  - Cache.js:91
    [project1]/[webpack]/lib/Cache.js:91:19
 
 ...
 
 - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [project1]/[tapable]/lib/Hook.js:18:14
  - Compiler.js:1010
    [project1]/[webpack]/lib/Compiler.js:1010:33
  - Compilation.js:2029
    [project1]/[webpack]/lib/Compilation.js:2029:10

  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [project1]/[tapable]/lib/Hook.js:18:14
  - Compilation.js:2022
    [project1]/[webpack]/lib/Compilation.js:2022:37

webpack 5.4.0 compiled with 1 error in 132 ms
i ｢wdm｣: Failed to compile.

Конфликтующих лоадеров вроде как нет, для sass/css стоят MiniCssExtractPlugin.loader, css-loader, sass-loader. Пробовал разные их комбинации, даже со style-loader'ом (хотя его не рекомендуют использовать для dev-режима). Вот пример вебпак-конфига и package.json:

const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
  },
  mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8008,
    },
  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'webpack Boilerplate',
      template: path.resolve(__dirname, './src/template.html'),
      filename: 'index.html',
    })
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.css'],
    modules: [
      'node_modules'
    ]        
},
  module: {
  
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [          
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: { sourceMap: true }
          }, 
          {
            loader: "sass-loader",
            options: { sourceMap: true }
          }
        ]
      },
     
      {
        test: /\.(ttf|eot|png|img|jpg|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      },
      
    ],
    
  },
  
};

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch",
    "build": "webpack",
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "style-loader": "^2.0.0"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "resolve-url-loader": "^3.1.2",
    "source-map": "^0.7.3"
  }
}

Сборка проекта также валится с похожей ошибкой. Перелопатил весь SO, issues на гитхабе в репозитории вебпака, но ни один метод из предложенных не помог. В чём может быть дело?

Answer 1

Возможно, это не ваш сценарий, но у меня была такая же ошибка при использовании монорепозитория на базе lerna

-- packages
---- packageA
------ webpack.config.js
---- packageB
------ webpack.config.js
-- webpack.utils.js
-- webpack.config.js

Файл webpack.utils.js содержал общий код лоадеров для пакетов, включая MiniCssExtractPlugin.loader. Корневой webpack.config.js импортировал конфиги из каждого пакета и запускал общую сборку.

Проблема возникала, когда один из пакетов имел свою зависимость mini-css-extract-plugin и подключал плагин из своих node_modules. Таким образом, лоадер был импортирован из корневого node_module, а сам плагин - из node_modules конкретного пактета. Решилось удалением зависимости.

Answer 2

In my case, this error was caused by the fact that I mistakenly connected the CSS file to the root index.html using the link tag while also using Webpack with MiniCSSExtractPlugin. There must be no CSS file link in the html file when you're using Webpack.

READ ALSO
Как из url-адреса получить нужные значения?
javascript

Как из url-адреса получить нужные значения?

Получаю urlК примеру он такой:

 149
Шарик следящий за курсором мыши лагает
javascript

Шарик следящий за курсором мыши лагает

У меня есть шарик, который следит за курсором мыши, но проблема состоит в том, что он лагает, когда я скролюКак избавиться от этого? Я еще использую...

 154
Как правильно сверстать страницу?
javascript

Как правильно сверстать страницу?

Создаю приложение и нужно сверстать вот такую страницуМеня интересуют конкретно 3 контейнера: хедер, сайдбар и главный контейнер(как я понял...

 263
React хранение данных пользователя
javascript

React хранение данных пользователя

Мне нужно создать форму на React где пользователь может заполнить поле "О себе" как можно организовать хранение текста пользователя? Чтобы...

 137