I'm getting a .css module parse failed error in Webpack even though I already have a css-loader in module.rules

Question

I'm building my app in Electron and React and want my app to display a Monaco editor. I'm currently working on building out my React Webpack. My app has separate Webpack files for both React and Electron. Very new to Webpack!

I'm getting the following error for what seems to be all the .css files in my monaco-editor Node module.

ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/ui/findinput/findInput.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I've already included a css-loader and style-loader in my webpack.react.config.js file, so I'm quite stuck on what seems to be the problem here. Some things I've already tried:

• I've specified that my css-loader should be specifically for my monaco-editor package, although I don't know if this would be a huge issue since the app currently does not currently have any separate styling.
• I've tried looking into the order of my loaders both for css and the other files listed, but I don't think there are issues there. Unless someone can point out to me otherwise!

My best guess as to what's going on is I am lacking knowledge about Webpack's loaders and I think I'm doing something wrong there. Have been diving deep into the Webpack docs but still quite stuck.

My webpack.react.config.js file

---

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
// Monaco Editor uses CSS imports internally,
// so we need a separate css-loader for app and monaco-editor packages

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx', '.css'],
    mainFields: ['main', 'module', 'browser'],
  },
  entry: './src/index.js',
  target: 'electron-renderer',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\css$/i, include: MONACO_DIR, use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(js|ts|tsx|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist/renderer'),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4000,
    publicPath: '/',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  plugins: [new HtmlWebpackPlugin(), new MonacoWebpackPlugin()],
};

Answer 1

WOW... it's because I didn't install style-loader as a devDependency. Facepalm.