Loader cannot load ES6 script

[markb-trustifi]

I have a ES6 angular 13 project that runs angular-cli with customWebpackConfig ES6 script:

angular.json:

"customWebpackConfig": {
   "path": "./custom-webpack.config.mjs"
},

custom-webpack.config.mjs

import path from 'path';
import webpack from "webpack";
export default function(config) {
    config.module.rules.unshift({
        test: /app\.ts$/i,
        exclude: [/node_modules/],
        use: [{loader: path.resolve('./custom-loader.mjs')}]
    });
    return config;
};

custom-loader.mjs

import _sourceMap from "source-map";
import fs from 'node:fs';
export default function(content, sourceMap) {...}

What is the current behavior?

 Error: Module build failed (from ./custom-loader.mjs):
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /custom-loader.mjs
    at Module.load (internal/modules/cjs/loader.js:935:11)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at loadLoader (/node_modules/loader-runner/lib/loadLoader.js:19:17)
    at iteratePitchingLoaders (/node_modules/loader-runner/lib/LoaderRunner.js:182:2)
    at runLoaders (/node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModule.js:819:3)
    at NormalModule.build (/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModule.js:963:15)
    at /node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1371:12

On the other hand, when I add the parameter type: "module" in the use array: use: [{loader: path.resolve('./custom-loader.mjs'), type:"module"}] I receive an error:

Generating browser application bundles (phase: setup)...An unhandled exception occurred: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use[0] has an unknown property 'type'. These properties are valid:
   object { ident?, loader?, options? }

But, if I remove this validation the ES6 script is executing successfully. Instead of changing Webpack validation schema I also tried to update the LoaderRunner.js, line 78 and ProgressPlugin.js, line 405. It also worked: obj.type = value.type || value.options && value.options.type || '';

It looks like this feature already exists. It just isn't enabled?

Other relevant information: webpack version: 5.74 Node.js version: 14 and 16 Operating System: MacOS Additional tools: @angular-devkit/build-angular: 13.3.9

[bluwy]

Duplicate of #61

[markb-trustifi]

So, what is going on with it? Is the ES6 already supported?

[bluwy]

ESM is supported in this package, but webpack hasn't adopted it yet. So you can only use CJS loaders for now.