Dealing with ES Modules "Cannot create property 'prependPath' on boolean 'true'"

[AStoker]

Originally opened/closed here (without resolution) #9266

This is more of a PSA/help for any poor soul in the future who runs into this.

I had upgrade my node server to the LTS (22.13.0) when I noticed this bug happening. I'm using Angular 19 with a proxy config file that had previously worked with Node 20.
Upon inspection, I had specifically been using an ES module format (export default {...}) with my file proxy.config.js which was passed along to Vite. However, somewhere in the process, because this was being treated as a module, the "object" that was returned/passed to Vite was like this

{
   __esModule: true,
   default: {
      ... // options
   }
}

The options that should have been passed to vite were inside the default property, but when vite started parsing the module as a whole, it got held up at the __esModule boolean, which ultimately caused the problem.

The resolution for me was to rename the config file to use the .mjs extension. Alternatively I could have used the .json extension, but because I needed function definitions, I required .mjs.

[adel-haidar]

I tried changing the file type to .mjs, however, my proxy settings after the file type changes are just being ignored! Which builder do you use?

[AStoker]

We're using the angular app builder: @angular-devkit/build-angular:application
What's your proxy file and angular.json look like?

[adel-haidar]

This is the serve section of my angular.json:

     "serve": {
          "options": {
            "proxyConfig": "./vite.config.ts"
          },
          "builder": "@angular-devkit/build-angular:vite-dev-server",
          "configurations": {
            "production": {
              "buildTarget": "afp-filebrowser-demo-ui:build:production",
              "hmr": false
            },
            "development": {
              "buildTarget": "afp-filebrowser-demo-ui:build:development"
            }
          },
          "defaultConfiguration": "development"
        },

My vite.conf.ts looks like this:

import {defineConfig} from 'vite'

export default defineConfig(() => {
  return {
    plugins: [],
    base: '/',
    server: {
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:8080',
          changeOrigin: true,
          ws: false
        },
      },
    },
  }
})

Are you using the @angular-devkit/build-angular:application builder even for serve?

[vbraun]

After renaming proxy.conf.js -> proxy.conf.mjs you also need to replace all occurrences in angular.json

It would be great if vite were to print some hint to avoid this trap for the unwary.

Many thanks to @AStoker for the tip

[AStoker]

This is the serve section of my angular.json:

     "serve": {
          "options": {
            "proxyConfig": "./vite.config.ts"
          },
          "builder": "@angular-devkit/build-angular:vite-dev-server",
          "configurations": {
            "production": {
              "buildTarget": "afp-filebrowser-demo-ui:build:production",
              "hmr": false
            },
            "development": {
              "buildTarget": "afp-filebrowser-demo-ui:build:development"
            }
          },
          "defaultConfiguration": "development"
        },

My vite.conf.ts looks like this:

import {defineConfig} from 'vite'

export default defineConfig(() => {
  return {
    plugins: [],
    base: '/',
    server: {
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:8080',
          changeOrigin: true,
          ws: false
        },
      },
    },
  }
})

Are you using the @angular-devkit/build-angular:application builder even for serve?

Sorry I missed your question @adel-haidar. Did you ever figure it out? We aren't using the same for the serve, but the dev-server option. Here's what we use.

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "suite:build:production"
            },
            "development": {
              "buildTarget": "suite:build:development",
              "hmr": true
            }
          },
          "options": {
            "proxyConfig": "projects/suite/proxy.conf.mjs"
          },
          "defaultConfiguration": "development"
        },