4

I am having trouble getting my Angular app started. I am getting the following error after running ng serve:

An unhandled exception occurred: require() of ES Module C:\Users\******\Documents\GitHub\******\node_modules\@angular\compiler\fesm2015\compiler.mjs not supported.
Instead change the require of C:\Users\*****\Documents\GitHub\******\node_modules\@angular\compiler\fesm2015\compiler.mjs to a dynamic import() which 
is available in all CommonJS modules.
See "C:\Users\*****\AppData\Local\Temp\ng-0FyohJ\angular-errors.log" for further details.

I have ran npm outdated to see if there was an issue with an older package and all of my current match my package wanted.

PS C:\Users\mjbaldwin\Documents\GitHub\****> npm outdated
Package                            Current   Wanted  Latest  Location                                        Depended by
@angular-devkit/build-angular       13.3.8   13.3.8  14.0.5  node_modules/@angular-devkit/build-angular      ****
@angular/animations                13.3.11  13.3.11  14.0.5  node_modules/@angular/animations                ****
@angular/cli                         9.0.7    9.0.7  14.0.5  node_modules/@angular/cli                       ****
@angular/common                    13.3.11  13.3.11  14.0.5  node_modules/@angular/common                    ****
@angular/compiler                  13.3.11  13.3.11  14.0.5  node_modules/@angular/compiler                  ****
@angular/compiler-cli                9.0.7    9.0.7  14.0.5  node_modules/@angular/compiler-cli              ****
@angular/core                      13.3.11  13.3.11  14.0.5  node_modules/@angular/core                      ****
@angular/forms                     13.3.11  13.3.11  14.0.5  node_modules/@angular/forms                     ****
@angular/language-service          13.3.11  13.3.11  14.0.5  node_modules/@angular/language-service          ****
@angular/platform-browser          13.3.11  13.3.11  14.0.5  node_modules/@angular/platform-browser          ****
@angular/platform-browser-dynamic  13.3.11  13.3.11  14.0.5  node_modules/@angular/platform-browser-dynamic  ****
@angular/router                    13.3.11  13.3.11  14.0.5  node_modules/@angular/router                    ****
@types/jasmine                      3.10.6   3.10.6   4.0.3  node_modules/@types/jasmine                     ****
@types/node                        17.0.45  17.0.45  18.0.3  node_modules/@types/node                        ****
karma-jasmine                        4.0.2    4.0.2   5.1.0  node_modules/karma-jasmine                      ****
karma-jasmine-html-reporter          1.7.0    1.7.0   2.0.0  node_modules/karma-jasmine-html-reporter        ****
node                                17.9.1   17.9.1  18.5.0  node_modules/node                               ****
node-fetch                           2.6.7    2.6.7   3.2.6  node_modules/node-fetch                         ****

I did find this link about there possibly being an issue with node-fetch, but that hasn't made a difference (Maybe I am implementing it wrong though):

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

Other things that I have tried have been updating the npm and cleaning the cache, but those solutions haven't worked either. Any help would be appreciated, thank you.

M. Bal.
  • 43
  • 2
  • 6
  • 1
    You haven't sent any code, but perhaps you mistakenly imported something from `@angular/compiler` in your application? – Chris Gilardi Jul 11 '22 at 17:50
  • I am not sure what code would be needed to solve this issue. Do you have anything specific that you would add to the question to improve it as far as code? I will research @angular/compiler to see if that could cause anything like this. – M. Bal. Jul 11 '22 at 18:11
  • Sorry for not explaining why, my thought is that, since the angular compiler runs in a different context than the actual application, where ES Modules may be supported (like Node), if you import some of that code into your application by mistake (to my knowledge, Angular doesn't support ES Modules in your build) the import(s) may be creating build issues. I have mistakenly done this before and gotten similarly hard-to-debug errors, so it's something to check, at least. – Chris Gilardi Jul 11 '22 at 18:22
  • I will take a look and see if I can find anything like that in the files. Thank you. – M. Bal. Jul 12 '22 at 15:16

1 Answers1

-1

You need to check if the @angular/compiler is installed correctly as dev dependency. You can run this

  npm uninstall `@angular/compiler`
  npm install --save-dev `@angular/compiler`

or

  yarn remove `@angular/compiler`
  yarn add --dev `@angular/compiler`

Then make sure that nowhere in your application, you don't import anything from @angular/compiler

NB: You must use same versions of @angular/xxx packages

Bellash
  • 7,560
  • 6
  • 53
  • 86