Webpack 4 - Module parse failed: You may need an appropriate loader to handle this file type

Question

I have just started to upgrade my aspdotnet core Aurelia project to 3.0 using an upgraded template to the one I used to create the project.

I placed my files (which worked in the previous project) into this new version and I have ended up with a bunch of errors from webpack of which the first is outlined in the heading.

Webpack had also been upgraded. Here is the first error I received..

ERROR in ./ClientApp/public/public/public.css 1:0
    Module parse failed: Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    > @media (max-width: 767px) {
    |     /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
    |     .body-content {
     @ ./ClientApp/public/public/public.html
     @ ./ClientApp/boot.ts
     @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
     @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry es6-promise/auto aurelia-bootstrapper

Having found the same problem as this it turns out I dont have a double up so its something else..

I also checked out this question which has a very similar heading but I believe the webpack file is Ok as it worked for the basic aurelia files..

This question while similar has a slightly (it would appear) setup to mine in that it has a webpack dev file. To that end here is my package.json with the scripts at the top:

{
    "name": "Jobsledger.API",
    "private": true,
    "version": "0.0.0",
    "scripts": {
        "lint": "tslint --project tsconfig.json",
        "webpack:Debug": "webpack --mode development",
        "webpack:Release": "webpack --mode production",
        "webpack:watch": "webpack --mode development --watch"
    },
    "devDependencies": {
        "aurelia-animator-css": "^1.0.4",
        "aurelia-api": "^3.2.1",
        "aurelia-binding": "2.3.1",
        "aurelia-bootstrap": "^0.1.20",
        "aurelia-bootstrapper": "^2.3.3",
        "aurelia-dialog": "^2.0.0-rc.5",
        "aurelia-event-aggregator": "^1.0.3",
        "aurelia-fetch-client": "^1.8.2",
        "aurelia-mask": "^2.0.1",
        "aurelia-pal": "^1.8.2",
        "aurelia-router": "^1.7.1",
        "aurelia-templating": "^1.10.2",
        "aurelia-validation": "^1.4.0",
        "aurelia-webpack-plugin": "^4.0.0",
        "au-table": "^0.1.14",
        "awesome-typescript-loader": "^5.2.1",
        "bootstrap": "^4.3.1",
        "clean-webpack-plugin": "^2.0.2",
        "css-loader": "^2.1.1",
        "es6-promise": "^4.2.6",
        "fetch": "^1.1.0",
        "file-loader": "^3.0.1",
        "font-awesome": "^4.7.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "isomorphic-fetch": "^2.2.1",
        "jquery": "^3.4.1",
        "mini-css-extract-plugin": "^0.6.0",
        "node-sass": "^4.12.0",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "tether": "^1.4.6",
        "tslint": "^5.16.0",
        "ts-loader": "^6.0.1",
        "typescript": "^3.4.5",
        "url-loader": "^1.1.2",
        "velocity-animate": "^2.0.5",
        "webpack": "^4.32.2",
        "webpack-cli": "^3.3.2"
    }
}

I am thinking I might need modifications to the webpack file re a loader as it mentioned.. before showing the webpack file here is that public.css file thats caused the first error:

@media (max-width: 767px) {
    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
    .body-content {
        padding-top: 50px;
    }
}

Now here is the webpack.config.js file

const path = require("path");
const webpack = require("webpack");
const { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const bundleOutputDir = "./wwwroot/dist";

module.exports = (env, argv) => {
    if ((!argv || !argv.mode) && process.env.ASPNETCORE_ENVIRONMENT === "Development") {
        argv = { mode: "development" };
    }
    console.log("mode =", argv.mode);
    const isDevBuild = argv.mode !== "production";
    const cssLoaders = ["css-loader", "postcss-loader"];
    const scssLoaders = [...cssLoaders, "sass-loader"];

    return [{
        target: "web",
        mode: isDevBuild ? "development" : "production",
        entry: { "app": ["es6-promise/auto", "aurelia-bootstrapper"] },
        resolve: {
            extensions: [".ts", ".js"],
            modules: ["ClientApp", "node_modules"]
        },
        output: {
            path: path.resolve(bundleOutputDir),
            // Asp.Net JavaScriptServices does not tolerate "/" in public path, see https://github.com/aspnet/JavaScriptServices/issues/1495
            publicPath: "dist/",
            filename: "[name].[hash].js",
            chunkFilename: "[name].[chunkhash].js",
            pathinfo: false
        },
        module: {
            rules: [
                { test: /\.(woff|woff2|png|eot|ttf|svg)(\?|$)/, use: { loader: "url-loader", options: { limit: 1, publicPath: "./" } } },
                { test: /\.ts$/i, include: [/ClientApp/], loader: "ts-loader" },
                { test: /\.html$/i, use: "html-loader" },
                { test: /\.css$/i, include: [/node_modules/], issuer: /\.html$/i, use: cssLoaders },
                { test: /\.css$/i, include: [/node_modules/], exclude: [/bootstrap.css$/, /font-awesome.css$/], issuer: [{ not: [{ test: /\.html$/i }] }], use: ["style-loader", ...cssLoaders] },
                { test: /\.css$/, include: [/bootstrap.css$/, /font-awesome.css$/], use: [{ loader: MiniCssExtractPlugin.loader }, ...cssLoaders] },
                { test: /\.scss$/i, issuer: /(\.html|empty-entry\.js)$/i, use: scssLoaders },
                { test: /\.scss$/i, issuer: /\.ts$/i, use: ["style-loader", ...scssLoaders] }
            ]
        },
        optimization: {
            splitChunks: {
                chunks: "all",
                // comment the following to avoid creatin a separate bundle for each npm module
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`;
                        }
                    }
                }
            }
        },
        devtool: isDevBuild ? "source-map" : false,
        performance: {
            hints: false
        },
        plugins: [
            new CleanWebpackPlugin(),
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
            new HtmlWebpackPlugin({ template: 'index.ejs', filename: "../../wwwroot/index.html", inject: false, metadata: {}, alwaysWriteToDisk: true }),
            new AureliaPlugin({ aureliaApp: "boot" }),
            new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
            new ModuleDependenciesPlugin({}),
            new MiniCssExtractPlugin({
                filename: "[name].[hash].css",
                chunkFilename: "[name].[chunkhash].css"
            })
        ],
        devServer: {
            contentBase: "wwwroot/",
            compress: true,
            writeToDisk: true,
            hot: false
        }
    }];
};

For all the other errors I am essentially getting the same error:

You may need an appropriate loader to handle this file type.

So its a loader of some type..

I am not sure what I need to do to the webpack file to make this work..

Do you have a specific reason for using different css loaders? You can chain them without problem usually — Flo Schild, May 25 '19 at 08:41
Were you able to figure this out? I have the same error with my media queries. — Noitidart, Sep 26 '19 at 04:52

score 0 · Answer 1 · answered May 25 '19 at 08:31

Your syntax for the CSS media query is wrong.

You need to write it like:

@media {thing-you-want-to-query} and {case} {
    .body-content {
        padding-top: 50px;
    }

In your case it'd be the screen:

@media screen and (max-width: 767px) {
    .body-content {
        padding-top: 50px;
    }

Webpack 4 - Module parse failed: You may need an appropriate loader to handle this file type

1 Answers1