TypeError: filename.endsWith is not a function

[hisham]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Not sure.

Description

I'm building an angular elements project with ngx-build-plus with the following command and I'm getting the following error:

ng build --prod --output-hashing none --single-bundle --bundle-styles=false --keep-styles=false

ERROR in chunk styles [entry]
({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData)
filename.endsWith is not a function
TypeError: filename.endsWith is not a function
    at /Users/hisham/src/ess-app/frontend/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js:106:72
    at SyncWaterfallHook.eval [as call] (eval at create (/Users/hisham/src/ess-app/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:16)
    at MainTemplate.getAssetPathWithInfo (/Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/MainTemplate.js:527:40)
    at Compilation.getPathWithInfo (/Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compilation.js:2227:28)
    at Compilation.createChunkAssets (/Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compilation.js:2138:31)
    at /Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compilation.js:1397:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hisham/src/ess-app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/hisham/src/ess-app/frontend/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compilation.js:1342:27)
    at /Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compiler.js:675:18
    at /Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compilation.js:1261:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hisham/src/ess-app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:40:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/hisham/src/ess-app/frontend/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compilation.js:1253:28)
    at /Users/hisham/src/ess-app/frontend/node_modules/webpack/lib/Compiler.js:672:17
    at _done (eval at create (/Users/hisham/src/ess-app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)

🌍 Your Environment

Angular CLI: 9.0.3
Node: 13.2.0
OS: darwin x64

Angular: 9.0.2
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.3
@angular-devkit/build-optimizer   0.900.3
@angular-devkit/build-webpack     0.900.3
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.3
@angular/cdk                      9.1.0
@angular/cli                      9.0.3
@angular/material                 9.1.0
@ngtools/webpack                  9.0.3
@schematics/angular               9.0.3
@schematics/update                0.900.3
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

In

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

Line 154 in c9a5f3c

const isMap = filename && filename.endsWith('.map');

, it appears that filename can sometimes be a function, putting a line of code such as:

if (typeof filename === 'function') { filename = filename(chunkdata); }

resolves the issue.

See https://github.com/pirelenito/git-revision-webpack-plugin/pull/42/files and webpack-contrib/mini-css-extract-plugin#417 for similar discussions and fixes.

[hisham]

Thanks @alan-agius4 for filing. If this is a regression, do you know what angular cli version would this be working in that I can downgrade to?

[hisham]

For now I force downgraded mini-css-extract-plugin to 0.6.0 and the issue got resolved.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}