3

I'm trying to extract the Webpack styles into a .css file using the mini-css-extract-plugin. I'm getting an error stating that it cannot find the module.

ERROR in ./Common/Login/login.min.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Cannot find module '../../node_modules/css-loader/dist/runtime/api.js' at webpackMissingModule (C:@Code\node_modules\css-loader\dist\cjs.js!C:@Code\Common\Login\login.min.css:108:92)

It seems like the module location is a relative path ../../node_modules that appears to be wrong if it is trying navigate from node_modules/css-loader/dist/cjs.js. It seems like it should be ../../../.

I have no idea where or why those relative paths are like that or if that is even the problem. Here is the relevant Webpack configuration options:

partialConfig = : webpack.Configuration = {
    mode: "development",    
    entry,
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname),
        ],
        extensions: [".ts", ".js", ".css"]
    },
    module: {
        rules: [
            {
                test: /\.(bmp|gif|jpe?g|png|svg)$/,
                exclude: /node_modules/,
                use: "file-loader?name=images/[name].[ext]"
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                exclude: /node_modules/,
                use: "file-loader?name=fonts/[name].[ext]"
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name]"
        })
    ],
}

Any idea why the mini-css-extract-plugin is bombing out like this? If I just use the style-loader, then everything compiles correctly, but obviously the output is JavaScript instead of a cacheable CSS stylesheet file.

jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • What's your directory structure? This seems like a simple location problem. – Adam Jul 13 '19 at 22:22
  • Hey @Adam, the structure of the app is kind of all over the place, but for the most part, the webpack config is in the root (`/`), npm modules are in (`/node_modules`) and then the files i'm trying to bundle are scattered throughout directories off of the root (e.g. `/Common/Login/login.css`). – jeffjenx Jul 13 '19 at 23:13
  • I'm trying to recreate the problem locally, but so far I'm not getting errors. What is the value of `entry` in your base configuration? And is the entry file importing everything from the correct locations? – Adam Jul 14 '19 at 00:07
  • The entry is an object with multiple bundles that I'm generating from some XML .bundle file that my company created. The bundle file basically lists a bunch of files they want bundled, so I loop through each of the .bundle files and create an entry point for it, e.g. `entry: { "login.css": [ "C:\@Code\Login\login.css", "..."], "common.js": [ … ]` – jeffjenx Jul 14 '19 at 00:11
  • I'm beginning to think this project is just too big a mess for me to clean up into webpack. It's nothing like any other project I've seen as far as what you'd get out of a startup project like Vue or React. – jeffjenx Jul 14 '19 at 00:13
  • Are you able to rewrite the entry file to import with relative paths? It looks like it's trying to import with absolute paths, but `resolve.modules` treats absolute paths differently than relative paths. – Adam Jul 14 '19 at 00:18
  • Yes, my loop was adding the whole `path.resolve(__dirname + file)`. When I remove the path.resolve stuff, I get a "Module not found error: Can't resolve '/Login/login.css' in 'C:\@Code\'" – jeffjenx Jul 14 '19 at 00:20
  • Use `./` at the beginning of paths instead of just `/` to make it relative. – Adam Jul 14 '19 at 00:22
  • I appreciate your continued assistance. I think I am going to give up now. I tried it with a preceding `.` and now I get the same error that I originally posted about. I don't think I can solve this. – jeffjenx Jul 14 '19 at 00:24

0 Answers0