Ошибка при установке начальной загрузки с помощью webpack: сбой сборки модуля (из ./node_modules/postcss-loader/dist/cjs.js ):

ProgramBox

Ошибка при установке начальной загрузки с помощью webpack: сбой сборки модуля (из ./node_modules/postcss-loader/dist/cjs.js ):

Post author:admin
Запись опубликована:25 октября, 2022
Post category:Вопросы по программированию

#javascript #node.js #npm #webpack #bootstrap-4

Вопрос:

Дело в том, что я пытался установить bootstrap в свой проект webpack, но у меня следующая ошибка:

 [webpack-cli] Compilation finished
asset ./dist/bundle.js 560 KiB [emitted] (name: index)
asset index.html 415 bytes [compared for emit]
runtime modules 1.13 KiB 5 modules
cacheable modules 508 KiB
  modules by path ./node_modules/ 508 KiB
    ./node_modules/bootstrap/dist/js/bootstrap.js 140 KiB [built] [code generated]
    ./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
    ./node_modules/popper.js/dist/esm/popper.js 86.4 KiB [built] [code generated]
  modules by path ./src/ 117 bytes
    ./src/js/index.js 78 bytes [built] [code generated]
    ./src/index.scss 39 bytes [built] [code generated] [1 error]

ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.entries(...).flatMap is not a function
    at flattenColorPalette (/home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
    at /home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
    at plugins.forEach.plugin (/home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
    at Array.forEach (<anonymous>)
    at _default (/home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
    at /home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/processTailwindFeatures.js:60:54
    at LazyResult.runOnRoot (/home/beicker/by_pampa/landing_page/node_modules/postcss/lib/lazy-result.js:303:16)
    at LazyResult.runAsync (/home/beicker/by_pampa/landing_page/node_modules/postcss/lib/lazy-result.js:355:26)
    at processResult (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:583:19)
    at runLoaders (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:676:5)
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:397:11
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/beicker/by_pampa/landing_page/node_modules/postcss-loader/dist/index.js:103:7)
 @ ./src/js/index.js 2:0-22

1 ERROR in child compilations
webpack 5.10.0 compiled with 2 errors in 6147 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! by-pampa@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the by-pampa@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/beicker/.npm/_logs/2020-12-07T22_42_18_618Z-debug.log
(node:140616) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hook.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /dist
ℹ ｢wds｣: Content not from webpack is served from /home/beicker/by_pampa/landing_page
✖ ｢wdm｣: assets by status 846 KiB [cached] 1 asset
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 837 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 57.9 KiB 4 modules
  modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
modules by path ./src/ 117 bytes
  ./src/js/index.js 78 bytes [built] [code generated]
  ./src/index.scss 39 bytes [built] [code generated] [1 error]

ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.entries(...).flatMap is not a function
    at flattenColorPalette (/home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
    at /home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
    at plugins.forEach.plugin (/home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
    at Array.forEach (<anonymous>)
    at _default (/home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
    at /home/beicker/by_pampa/landing_page/node_modules/tailwindcss/lib/processTailwindFeatures.js:60:54
    at LazyResult.runOnRoot (/home/beicker/by_pampa/landing_page/node_modules/postcss/lib/lazy-result.js:303:16)
    at LazyResult.runAsync (/home/beicker/by_pampa/landing_page/node_modules/postcss/lib/lazy-result.js:355:26)
    at processResult (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:583:19)
    at runLoaders (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:676:5)
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:397:11
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/beicker/by_pampa/landing_page/node_modules/postcss-loader/dist/index.js:103:7)
 @ ./src/js/index.js 2:0-22

1 ERROR in child compilations
webpack 5.10.0 compiled with 2 errors in 2156 ms
ℹ ｢wdm｣: Failed to compile.

Мой webpack.config.js:

 const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const htmlWebpack = new htmlWebpackPlugin({
  template: path.resolve(__dirname, "src", "index.template.html"),
  filename: "index.html",
  minify: "auto",
});

module.exports = {
  entry: { index: path.resolve(__dirname, "src/js", "index.js") },
  output: {
    path: __dirname,
    publicPath: path.join(__dirname, "src"),
    filename: "./dist/bundle.js",
  },
  plugins: [
    htmlWebpack,
    new MiniCssExtractPlugin({
      filename: "./dist/[name].css",
    }),
  ],
  optimization: {
    minimizer: [new OptimizeCssAssetsPlugin({})],
  },
  module: {
    rules: [
      {
        test: /.(scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader", // Run post css actions
            options: {
              postcssOptions: {
                plugins: function () {
                  // post css plugins, can be exported to postcss.config.js
                  [require("autoprefixer")];
                },
              },
            },
          },
          {
            loader: "sass-loader", // compiles Sass to CSS
          },
        ],
      },
      {
        test: /.(jpg|png|gif)$/,
        use: "url-loader",
      },
    ],
  },

  devServer: {
    publicPath: "/dist",
    contentBase: __dirname,
    compress: true,
    open: true,
  },
};

мой index.js:

 import "bootstrap"
import "../index.scss"
console.log("Building the project")

мой index.scss:

 @import "node_modules/bootstrap/scss/bootstrap";

body{
    font-size: 16px;
}

Я думаю, что это проблема с загрузчиком postcss, но я не знаю. Без импорта файла index.scss в index.js все в порядке. И всегда ошибки говорят о postcss-загрузчике или мини-извлечении css-плагина. Я прочитал много вопросов и комментариев, но я не могу понять, что это за ошибка. Также я удалил и установил node_modelues.

ОТРЕДАКТИРОВАНО

Я сделал то, что сказал ptothep, но у меня просто другая ошибка:

 [webpack-cli] Compilation finished
asset ./dist/bundle.js 700 KiB [emitted] (name: index)
asset index.html 415 bytes [compared for emit]
runtime modules 1.13 KiB 5 modules
modules by path ./node_modules/array.prototype.flatmap/ 41.5 KiB 56 modules
modules by path ./node_modules/object-keys/*.js 4.36 KiB 3 modules
modules by path ./src/ 225 bytes 2 modules
modules by path ./node_modules/function-bind/*.js 1.55 KiB
  ./node_modules/function-bind/index.js 126 bytes [built] [code generated]
  ./node_modules/function-bind/implementation.js 1.43 KiB [built] [code generated]
modules by path ./node_modules/has-symbols/*.js 2.08 KiB
  ./node_modules/has-symbols/index.js 394 bytes [built] [code generated]
  ./node_modules/has-symbols/shams.js 1.7 KiB [built] [code generated]
modules by path ./node_modules/es-to-primitive/ 2.24 KiB
  ./node_modules/es-to-primitive/es2015.js 2.09 KiB [built] [code generated]
  ./node_modules/es-to-primitive/helpers/isPrimitive.js 151 bytes [built] [code generated]
13 modules

ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'functions'
  in [
    /home/beicker/by_pampa/landing_page/node_modules/bootstrap/scss
  ]
    at resolveModule.catch.catch (/home/beicker/by_pampa/landing_page/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at processResult (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:583:19)
    at runLoaders (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:676:5)
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:397:11
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/beicker/by_pampa/landing_page/node_modules/postcss-loader/dist/index.js:103:7)
 @ ./src/js/index.js 5:0-22

1 ERROR in child compilations
webpack 5.10.0 compiled with 2 errors in 1128 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! by-pampa@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the by-pampa@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/beicker/.npm/_logs/2020-12-07T23_44_45_705Z-debug.log
(node:154826) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hook.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /dist
ℹ ｢wds｣: Content not from webpack is served from /home/beicker/by_pampa/landing_page
ℹ ｢wdm｣: wait until bundle finished: /dist/index.css
✖ ｢wdm｣: assets by status 935 KiB [cached] 1 asset
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 920 KiB 88 modules
modules by path ./src/ 225 bytes
  ./src/js/index.js 186 bytes [built] [code generated]
  ./src/index.scss 39 bytes [built] [code generated] [1 error]
./util.inspect (ignored) 15 bytes [built] [code generated]

ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'functions'
  in [
    /home/beicker/by_pampa/landing_page/node_modules/bootstrap/scss
  ]
    at resolveModule.catch.catch (/home/beicker/by_pampa/landing_page/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at processResult (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:583:19)
    at runLoaders (/home/beicker/by_pampa/landing_page/node_modules/webpack/lib/NormalModule.js:676:5)
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:397:11
    at /home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/home/beicker/by_pampa/landing_page/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/beicker/by_pampa/landing_page/node_modules/postcss-loader/dist/index.js:103:7)
 @ ./src/js/index.js 5:0-22

1 ERROR in child compilations
webpack 5.10.0 compiled with 2 errors in 1794 ms
ℹ ｢wdm｣: Failed to compile.

1. Похоже, что в нем отсутствует flatMap. вы можете попробовать установить npm install --save array.prototype.flatmap и потребовать его в верхней части вашего конфигурационного файла var flatMap = require('array.prototype.flatmap'); delete Array.prototype.flatMap; flatMap.getPolyfill();

2. Последняя строка должна быть Array.prototype.flatMap = flatMap.getPolyfill();

Вопрос:

ОТРЕДАКТИРОВАНО

Комментарии:

Вам также может понравиться

В моем listview с пользовательским адаптером sql данные не отображаются

Список функций пакета инструментов анализа — VBA

выбор альфа-цвета для наслоения для получения наибольшей гаммы