@ASiD

Webpack добавляет JS-код в CSS. Как исправить?

Есть проект на React, собирается Вебпаком. Заметил, что после сборки бандла, в файле style.css кроме css-кода появляется JS-код.
Например, такой:
.image-gallery-index {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  line-height: 1;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4; }
  @media (max-width: 768px) {
    .image-gallery-index {
      font-size: .8em;
      padding: 5px 10px; } }
var map = {
	"./af": 613,
	"./af.js": 613,
	"./ar": 614,
	"./ar-dz": 615,
	"./ar-dz.js": 615,
	"./ar-kw": 616,
	"./ar-kw.js": 616,
	"./ar-ly": 617,
	"./ar-ly.js": 617,
	"./ar-ma": 618,
	"./ar-ma.js": 618,
	"./ar-sa": 619,
	"./ar-sa.js": 619,
	"./ar-tn": 620,
	"./ar-tn.js": 620,
	"./ar.js": 614,
	"./az": 621,
	"./az.js": 621,
	"./be": 622,
	"./be.js": 622,
	"./bg": 623,
	"./bg.js": 623,
	"./bm": 624,
	"./bm.js": 624,
	"./bn": 625,
	"./bn-bd": 626,
	"./bn-bd.js": 626,
	"./bn.js": 625,
	"./bo": 627,
	"./bo.js": 627,
	"./br": 628,
	"./br.js": 628,
	"./bs": 629,
	"./bs.js": 629,
	"./ca": 630,
	"./ca.js": 630,
	"./cs": 631,
	"./cs.js": 631,
	"./cv": 632,
	"./cv.js": 632,
	"./cy": 633,
	"./cy.js": 633,
	"./da": 634,
	"./da.js": 634,
	"./de": 635,
	"./de-at": 636,
	"./de-at.js": 636,
	"./de-ch": 637,
	"./de-ch.js": 637,
	"./de.js": 635,
	"./dv": 638,
	"./dv.js": 638,
	"./el": 639,
	"./el.js": 639,
	"./en-au": 640,
	"./en-au.js": 640,
	"./en-ca": 641,
	"./en-ca.js": 641,
	"./en-gb": 642,
	"./en-gb.js": 642,
	"./en-ie": 643,
	"./en-ie.js": 643,
	"./en-il": 644,
	"./en-il.js": 644,
	"./en-in": 645,
	"./en-in.js": 645,
	"./en-nz": 646,
	"./en-nz.js": 646,
	"./en-sg": 647,
	"./en-sg.js": 647,
	"./eo": 648,
	"./eo.js": 648,
	"./es": 649,
	"./es-do": 650,
	"./es-do.js": 650,
	"./es-mx": 651,
	"./es-mx.js": 651,
	"./es-us": 652,
	"./es-us.js": 652,
	"./es.js": 649,
	"./et": 653,
	"./et.js": 653,
	"./eu": 654,
	"./eu.js": 654,
	"./fa": 655,
	"./fa.js": 655,
	"./fi": 656,
	"./fi.js": 656,
	"./fil": 657,
	"./fil.js": 657,
	"./fo": 658,
	"./fo.js": 658,
	"./fr": 659,
	"./fr-ca": 660,
	"./fr-ca.js": 660,
	"./fr-ch": 661,
	"./fr-ch.js": 661,
	"./fr.js": 659,
	"./fy": 662,
	"./fy.js": 662,
	"./ga": 663,
	"./ga.js": 663,
	"./gd": 664,
	"./gd.js": 664,
	"./gl": 665,
	"./gl.js": 665,
	"./gom-deva": 666,
	"./gom-deva.js": 666,
	"./gom-latn": 667,
	"./gom-latn.js": 667,
	"./gu": 668,
	"./gu.js": 668,
	"./he": 669,
	"./he.js": 669,
	"./hi": 670,
	"./hi.js": 670,
	"./hr": 671,
	"./hr.js": 671,
	"./hu": 672,
	"./hu.js": 672,
	"./hy-am": 673,
	"./hy-am.js": 673,
	"./id": 674,
	"./id.js": 674,
	"./is": 675,
	"./is.js": 675,
	"./it": 676,
	"./it-ch": 677,
	"./it-ch.js": 677,
	"./it.js": 676,
	"./ja": 678,
	"./ja.js": 678,
	"./jv": 679,
	"./jv.js": 679,
	"./ka": 680,
	"./ka.js": 680,
	"./kk": 681,
	"./kk.js": 681,
	"./km": 682,
	"./km.js": 682,
	"./kn": 683,
	"./kn.js": 683,
	"./ko": 684,
	"./ko.js": 684,
	"./ku": 685,
	"./ku.js": 685,
	"./ky": 686,
	"./ky.js": 686,
	"./lb": 687,
	"./lb.js": 687,
	"./lo": 688,
	"./lo.js": 688,
	"./lt": 689,
	"./lt.js": 689,
	"./lv": 690,
	"./lv.js": 690,
	"./me": 691,
	"./me.js": 691,
	"./mi": 692,
	"./mi.js": 692,
	"./mk": 693,
	"./mk.js": 693,
	"./ml": 694,
	"./ml.js": 694,
	"./mn": 695,
	"./mn.js": 695,
	"./mr": 696,
	"./mr.js": 696,
	"./ms": 697,
	"./ms-my": 698,
	"./ms-my.js": 698,
	"./ms.js": 697,
	"./mt": 699,
	"./mt.js": 699,
	"./my": 700,
	"./my.js": 700,
	"./nb": 701,
	"./nb.js": 701,
	"./ne": 702,
	"./ne.js": 702,
	"./nl": 703,
	"./nl-be": 704,
	"./nl-be.js": 704,
	"./nl.js": 703,
	"./nn": 705,
	"./nn.js": 705,
	"./oc-lnc": 706,
	"./oc-lnc.js": 706,
	"./pa-in": 707,
	"./pa-in.js": 707,
	"./pl": 708,
	"./pl.js": 708,
	"./pt": 709,
	"./pt-br": 710,
	"./pt-br.js": 710,
	"./pt.js": 709,
	"./ro": 711,
	"./ro.js": 711,
	"./ru": 712,
	"./ru.js": 712,
	"./sd": 713,
	"./sd.js": 713,
	"./se": 714,
	"./se.js": 714,
	"./si": 715,
	"./si.js": 715,
	"./sk": 716,
	"./sk.js": 716,
	"./sl": 717,
	"./sl.js": 717,
	"./sq": 718,
	"./sq.js": 718,
	"./sr": 719,
	"./sr-cyrl": 720,
	"./sr-cyrl.js": 720,
	"./sr.js": 719,
	"./ss": 721,
	"./ss.js": 721,
	"./sv": 722,
	"./sv.js": 722,
	"./sw": 723,
	"./sw.js": 723,
	"./ta": 724,
	"./ta.js": 724,
	"./te": 725,
	"./te.js": 725,
	"./tet": 726,
	"./tet.js": 726,
	"./tg": 727,
	"./tg.js": 727,
	"./th": 728,
	"./th.js": 728,
	"./tk": 729,
	"./tk.js": 729,
	"./tl-ph": 730,
	"./tl-ph.js": 730,
	"./tlh": 731,
	"./tlh.js": 731,
	"./tr": 732,
	"./tr.js": 732,
	"./tzl": 733,
	"./tzl.js": 733,
	"./tzm": 734,
	"./tzm-latn": 735,
	"./tzm-latn.js": 735,
	"./tzm.js": 734,
	"./ug-cn": 736,
	"./ug-cn.js": 736,
	"./uk": 737,
	"./uk.js": 737,
	"./ur": 738,
	"./ur.js": 738,
	"./uz": 739,
	"./uz-latn": 740,
	"./uz-latn.js": 740,
	"./uz.js": 739,
	"./vi": 741,
	"./vi.js": 741,
	"./x-pseudo": 742,
	"./x-pseudo.js": 742,
	"./yo": 743,
	"./yo.js": 743,
	"./zh-cn": 744,
	"./zh-cn.js": 744,
	"./zh-hk": 745,
	"./zh-hk.js": 745,
	"./zh-mo": 746,
	"./zh-mo.js": 746,
	"./zh-tw": 747,
	"./zh-tw.js": 747
};


function webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}
function webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = 1099;


.FilesField {}

.FilesField_block {
  max-width: 500px;
}

.FilesField-nofiles {
  font-size: 14px;
  text-align: center;
}

Пробовал отключать модули с css до и после JS кода - не помогло. В чём может быть дело?

Конфиг вебпака:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	entry: {
		main: path.resolve(__dirname, 'src', 'spa.jsx')
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].[chunkhash].js',
	},
	resolve: {
	  extensions: ['.js', '.jsx'],
	  alias: {
		  components: path.resolve(__dirname, 'src', 'components'),
		  containers: path.resolve(__dirname, 'src', 'containers'),
		  actions: path.resolve(__dirname, 'src', 'actions'),
		  reducers: path.resolve(__dirname, 'src', 'reducers'),
	  }
	},
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
				}
			},
			{
				test: /\.css$/,
				exclude: /node_modules/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: ['css-loader'],
				})
			}
		]
	},

	devServer: {
		historyApiFallback: true,
		disableHostCheck: true,
	},
  plugins: [
		new CleanWebpackPlugin(),
		new ExtractTextPlugin({
			filename: 'style.[chunkhash].css',
			allChunks: true
		}),
		new HtmlWebpackPlugin({
				template: path.resolve(__dirname, 'src', 'index.html'),
				filename: 'index.html'
		}),
		new CopyWebpackPlugin({
			patterns: [
				{ from: path.resolve(__dirname, 'src', 'robots.txt'), to: `robots.txt` },
				{ from: path.resolve(__dirname, 'src', 'sw.js'), to: `sw.js` },
				{ from: path.resolve(__dirname, 'src', 'manifest.json'), to: `manifest.json` },
			]
		}),
	]
}

Зависимости:
"devDependencies": {
    "@babel/cli": "^7.13.14",
    "@babel/core": "^7.13.14",
    "@babel/node": "^7.13.13",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-regenerator": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "@babel/register": "^7.13.14",
    "@loadable/babel-plugin": "^5.13.2",
    "@loadable/webpack-plugin": "^5.14.2",
    "babel-loader": "^8.2.2",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^3.6.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "ignore-styles": "^5.0.1",
    "mini-css-extract-plugin": "^0.9.0",
    "null-loader": "^4.0.1",
    "style-loader": "^1.3.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url": "^0.11.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.13.10",
    "@loadable/component": "^5.14.1",
    "@loadable/server": "^5.14.2",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "axios": "^0.21.1",
    "date-fns": "^2.19.0",
    "express": "^4.17.1",
    "material-table": "^1.69.2",
    "moment": "^2.29.1",
    "node-fetch": "^2.6.1",
    "notistack": "^0.9.17",
    "nuka-carousel": "^4.7.7",
    "react": "^16.14.0",
    "react-beautiful-dnd": "^12.2.0",
    "react-dom": "^16.14.0",
    "react-frontload": "^1.1.0",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-input-mask": "^2.0.4",
    "react-is-visible": "^1.1.2",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.1.2",
    "react-sizeme": "^2.6.12",
    "react-string-replace": "^0.4.4",
    "react-yandex-maps": "^4.6.0",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-thunk": "^2.3.0"
  }
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
@ASiD Автор вопроса
Михаил, прав. Проблема в модуле extract-text-webpack-plugin. Заменил на mini-css-extract-plugin - всё работает. Спасибо!
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы