Webpack adds JS code to CSS. How to fix?

Question

webpack

There is a React project built by Webpack. I noticed that after the bundle is assembled, in the style.css file, in addition to the css code, JS code appears.

For example, like this:

.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;
}

Tried disabling modules with css before and after JS code - didn't help. What can be wrong?

webpack config:

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

Dependencies:

"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"
  }

Answer 1

Michael , right. The problem is with the extract-text-webpack-plugin. Replaced with mini-css-extract-plugin - everything works. Thank you!