electron-webpack doesn't recognize my loader

[MassMessage]

• Version: v13.1.1

• Target: windows 10

I created the settings file electron-webpack.json and webpack.renderer.additions.js as below but when I run electron-webpack dev I still get the error below. What am I missing?

the error:

ERROR in ./src/App.css 1:0 Module parse failed: Unexpected token (1: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

electron-webpack.json

{
  "title": true,
  "main": {
    "sourceDirectory": "src"
  },
  "renderer": {
    "sourceDirectory": "src",
    "template": "public/index.html",
    "webpackConfig": "webpack.renderer.additions.js"
  },
  "commonSourceDirectory": "common",
  "staticSourceDirectory": "static"
}

webpack.renderer.additions.js

const webpack = require("webpack");
const path = require('path');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
      path: path.resolve(__dirname, 'assets'),
      filename: 'bundle.js'
  },
  plugins: [
      new webpack.ExternalsPlugin('commonjs', [
          'electron'
      ])
  ],
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      //{ test: /\.ts$/, use: 'ts-loader' },
      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
              loader: 'babel-loader'
          }
      }
    ],
  }
}

UPDATE 1

Now I'm using an export function like below, it's easiert to debug, I guess. Here's the export function I'm using:

module.exports = function(config) {

  //console.log(JSON.stringify(config, null, 4))

  const styleRules = config.module.rules.filter(rule =>
    rule.test.toString().match(/css|less|s\(\[ac\]\)ss/)
  )

  styleRules.forEach(rule => {

    console.log('rule = ', rule)
  })

  return config
}

the output is:

$ electron-webpack dev
┏ Renderer -------------------

AttachConsole failed with error 6: Identificador inv�lido.

┗ ----------------------------
┏ Main -----------------------

Hash: 3846d72932ec0ff8a5df
Version: webpack 4.44.2
Time: 764ms
Built at: 20/01/2022 15:08:18
Asset Size Chunks Chunk Names
main.js 84.8 KiB main main
Entrypoint main = main.js
[0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js 40 bytes {main} [built]
[./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] 582 bytes {main} [built]
[./node_modules/react-tabs/style/react-tabs.css] 296 bytes {main} [built] [failed] [1 error]
[./src/App.css] 279 bytes {main} [built] [failed] [1 error]
[./src/App.js] 3.56 KiB {main} [built]
[./src/EditorLoaderComponent.js] 1.69 KiB {main} [built]
[./src/MicroFrontend.js] 1.06 KiB {main} [built]
[./src/PropertyGridComponent.js] 266 bytes {main} [built]
[./src/index.css] 338 bytes {main} [built] [failed] [1 error]
[./src/index.js] 542 bytes {main} [built]
[./src/reportWebVitals.js] 395 bytes {main} [built]
[electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {main} [built]
[react] external "react" 42 bytes {main} [built]
[react-dom] external "react-dom" 42 bytes {main} [built]
[source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {main} [built]
+ 8 hidden modules

ERROR in ./src/App.css 1:0
Module parse failed: Unexpected token (1: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

.home {
| margin-top: 10px;
| width: 100%;
@ ./src/App.js 12:0-19
@ ./src/index.js
@ multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js

ERROR in ./node_modules/react-tabs/style/react-tabs.css 1:0
Module parse failed: Unexpected token (1: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

.react-tabs {
| -webkit-tap-highlight-color: transparent;
| }
@ ./src/App.js 11:0-41
@ ./src/index.js
@ multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js

ERROR in ./src/index.css 1:5
Module parse failed: Unexpected token (1:5)
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

body {
| margin: 0;
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@ ./src/index.js 3:0-21
@ multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/index.js

┗ ----------------------------
┏ Renderer -------------------

rule = {
test: /.css$/,
use: [
'css-hot-loader',
'C:\Users\jack\Desktop\merge\Newton\node_modules\electron-webpack\node_modules\mini-css-extract-plugin\dist\loader.js',
{ loader: 'css-loader', options: [Object] }
]
}

┗ ----------------------------
┏ Renderer -------------------

rule = {
test: /.less$/,
use: [
'css-hot-loader',
'C:\Users\jack\Desktop\merge\Newton\node_modules\electron-webpack\node_modules\mini-css-extract-plugin\dist\loader.js',
{ loader: 'css-loader', options: [Object] },
'less-loader'
]
}
rule = {
test: /.s([ac])ss$/,
use: [
'css-hot-loader',
'C:\Users\jack\Desktop\merge\Newton\node_modules\electron-webpack\node_modules\mini-css-extract-plugin\dist\loader.js',
{ loader: 'css-loader', options: [Object] },
'sass-loader'
]
}

┗ ----------------------------
┏ Renderer -------------------

i ｢wds｣: Project is running at http://localhost:53693/

┗ ----------------------------
┏ Renderer -------------------

i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\jack\Desktop\merge\Newton\static, C:\Users\jack\Desktop\merge\Newton\dist\renderer-dll

┗ ----------------------------
┏ Renderer -------------------
[...]

So out this I can see there are some css rules and the associated module of it like:

rule = {
test: /.css$/,
use: [
'css-hot-loader',
'C:\Users\jack\Desktop\merge\Newton\node_modules\electron-webpack\node_modules\mini-css-extract-plugin\dist\loader.js',
{ loader: 'css-loader', options: [Object] }
]
}

┗ ----------------------------
┏ Renderer -------------------

rule = {
test: /.less$/,
use: [
'css-hot-loader',
'C:\Users\jack\Desktop\merge\Newton\node_modules\electron-webpack\node_modules\mini-css-extract-plugin\dist\loader.js',
{ loader: 'css-loader', options: [Object] },
'less-loader'
]
}
rule = {
test: /.s([ac])ss$/,
use: [
'css-hot-loader',
'C:\Users\jack\Desktop\merge\Newton\node_modules\electron-webpack\node_modules\mini-css-extract-plugin\dist\loader.js',
{ loader: 'css-loader', options: [Object] },
'sass-loader'
]
}

but I still getting the css load error. What am I missing?

UPDATE 2:

I've tried define the export function as the below but I still get same error:

module.exports = function(config) {

  config.module.rules.push(
    { test: /\.css$/, use: 'css-loader' }
  )
 
  return config
}

[loopmode]

I can't say what exactly is missing, but normally, there is much more config generated by electron-webpack.

In your config module, export a function instead of an object. That function will receive the prepared config, which you can log to the console for comparison. The function should return the final config.

Normally, you would make changes to that config object and not use a completely new one.

[MassMessage]

Thanks for your reply. See the update in the orignal post. I was just trying to find a better to debug it so I found I could use a export function instead of an object. It seems to have a proper module to load the css file, out the rules I got from the export function but I still got the error. Any idea why?

[loopmode]

Shot in the dark, gut feeling: Are you importing a css file from node_modules from within your App.css? If so, don't do it. Instead, import it from your App module directly. That is: from your JS module, App.js/jsx/ts/tsx.
Basically you could and probably should do it in your entry file, e.g src/renderer/index
I believe that the style loaders explicitly exclude node_modules..