How to fix the non-working of latest raw-loader version in webpack config?

Question

In my angular project if we use the app is compiling and working fine if we use [email protected]. Whereas if we use version 2.0.0, application is not working. What would be the difference between version 1.0.0 & 2.0.0?

webpack.config.ts

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.ts',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader', 'angular2-template-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.(html|css)$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new webpack.DefinePlugin({
            config: JSON.stringify({
                apiUrl: 'http://localhost:9999'
            })
        })
    ],
    devServer: {
        historyApiFallback: true
    }
};

Chaste

Answer 1

According to their release page 2.0.0 had the breaking change "use ES Module export instead of CommonJS" (https://github.com/webpack-contrib/raw-loader/releases), so depending on your project setup (using commonJS modules not ES modules) this could be causing your issue.

Using CommonJS modules looks like this:

const myModule = require('../path/to/module/my-module.js');

And using the new ES Module standard looks something like:

import {MyModule} from '../path/to/module/my-module.js';

If your code is using imports from the first example then the 2.0.0 version of raw-loader won't work for you (which looks the case here as your example uses CommonJS module syntax). The imports that are causing the issue may be in your application code, other config files such as your webpack config or possibly in another dependency your using in the project.

It may be difficult to debug because all of those areas (app code, configs, dependencies) would need to be updated to using ES modules, which is not always an easy thing to do. Depending on your project your best option may be to stay with version 1.0.0 of raw-loader or even start a new project using the Angular CLI tool and then copy in all of your app code so that way everything is up to date, and future updates can be handled fairly easily using the CLI's update command

Orbital

Could you please update the code in your answer? Becos I am more of a new into javascript, so couldn't understand modules deep enough. – Chaste

Hi @AlexpandiyanChokkan, no worries, I've expanded on my answer so hopefully that helps, but by the sounds of it your quickest solution is to just use v1.0.0 – Orbital