Must use import to load ES Module while updating angular

Question

I ran into this problem while trying to upgrading from angular 6 to 8, whenever i try to ng serve or ng build i get the following error:

its been so fustrating, i've tried adding the "type":"modules" to my package.json, trying renaming those files with the error to .cjs (then it doesnt even find the files because they are looking for the .js version)

i think the problem here is that the files with the error are inside node_modules?

i've tried deleting node_modules and doing NPM install but it was the same

An unhandled exception occurred: Must use import to load ES Module: W:\sites\sacr-indx\CreditoConsumo\node_modules\@angular\compiler-cli\bundles\index.js
require() of ES modules is not supported.
require() of W:\sites\****\CreditoConsumo\node_modules\@angular\compiler-cli\bundles\index.js from W:\sites\****\CreditoConsumo\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from W:\sites\****\CreditoConsumo\node_modules\@angular\compiler-cli\package.json.

i think the problem its in this angular_compiler_plugin:

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.AngularCompilerPlugin = void 0;
/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
const core_1 = require("@angular-devkit/core");
const node_1 = require("@angular-devkit/core/node");
const compiler_cli_1 = require("@angular/compiler-cli");
const tooling_1 = require("@angular/compiler-cli/src/tooling");
const child_process_1 = require("child_process");
const fs = require("fs");
const path = require("path");
const ts = require("typescript");
const benchmark_1 = require("./benchmark");
const compiler_host_1 = require("./compiler_host");
const diagnostics_1 = require("./diagnostics");
const entry_resolver_1 = require("./entry_resolver");
const interfaces_1 = require("./interfaces");
const lazy_routes_1 = require("./lazy_routes");
const ngcc_processor_1 = require("./ngcc_processor");
const paths_plugin_1 = require("./paths-plugin");
const resource_loader_1 = require("./resource_loader");
const transformers_1 = require("./transformers");
const ast_helpers_1 = require("./transformers/ast_helpers");
const remove_ivy_jit_support_calls_1 = require("./transformers/remove-ivy-jit-support-calls");
const type_checker_1 = require("./type_checker");
const type_checker_messages_1 = require("./type_checker_messages");
const utils_1 = require("./utils");
const virtual_file_system_decorator_1 = require("./virtual_file_system_decorator");
const webpack_input_host_1 = require("./webpack-input-host");

Answer 1

I faced the same issue while upgrading my application's angular version to 13 from 12. I updated the package ng-packagr to its latest. After updating the ng-packagr

Version I used: "ng-packagr": "~13.3.1"

Answer 2

did you mean to use "type": "module" instead of "type": "modules" in package.json?