PCF build error: Cannot find module '@babel/plugin-proposal-nullish-coalescing-operator'

[filcole]

PCFs will not build due to pcf-scripts referring to babel plugin @babel/plugin-proposal-nullish-coalescing-operator that has been renamed in the babel project, e.g.

# mkdir LinearControl2
# cd LinearControl2
# pac pcf init --namespace SampleNamespace --name LinearInputControl2 --template field --run-npm-install
The Power Apps component framework project was successfully created in 'C:\Dev\TLL\LinearControl2'.

Running 'npm install' for you...

added 698 packages, and audited 699 packages in 1m

113 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
# npm run-script build

> [email protected] build
> pcf-scripts build

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '@babel/plugin-proposal-nullish-coalescing-operator'
Require stack:
- C:\Dev\TLL\LinearControl2\node_modules\pcf-scripts\webpackConfig.js
- C:\Dev\TLL\LinearControl2\node_modules\pcf-scripts\tasks\compileTask.js
- C:\Dev\TLL\LinearControl2\node_modules\pcf-scripts\taskGroup.js
- C:\Dev\TLL\LinearControl2\node_modules\pcf-scripts\bin\pcf-scripts.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Object.<anonymous> (C:\Dev\TLL\LinearControl2\node_modules\pcf-scripts\webpackConfig.js:114:13)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Dev\TLL\LinearControl2\node_modules\pcf-scripts\tasks\compileTask.js:8:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Dev\\TLL\\LinearControl2\\node_modules\\pcf-scripts\\webpackConfig.js',
    'C:\\Dev\\TLL\\LinearControl2\\node_modules\\pcf-scripts\\tasks\\compileTask.js',
    'C:\\Dev\\TLL\\LinearControl2\\node_modules\\pcf-scripts\\taskGroup.js',
    'C:\\Dev\\TLL\\LinearControl2\\node_modules\\pcf-scripts\\bin\\pcf-scripts.js'
  ]
}

I think the issue is caused by this commit: babel/babel@f42e24d and a fix for it is to update webpackConfig.js in pcf-scripts to be as below:

const babelPlugins = [
    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
    require.resolve('@babel/plugin-proposal-class-properties'),
    require.resolve('@babel/plugin-proposal-object-rest-spread'),
    require.resolve('@babel/plugin-syntax-dynamic-import'),
    // Replaced by -transform-, see babel commit f42e24d6451d333052900e1ae073e4bc5d484cca 
    // require.resolve('@babel/plugin-proposal-nullish-coalescing-operator')
    require.resolve('@babel/plugin-transform-nullish-coalescing-operator')
];

As a quick hack I did that locally on my machine by editing node_modules/pcf-scripts/webpackConfig.js

[TencentLee]

Excellent

[AndreasHassing]

I could resolve this for our build by adding the following to our PCF project's package.json devDependencies section:

"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6"

[filcole]

Fixed in npm 1.23.4, which is included in PowerApps.CLI: https://www.nuget.org/packages/Microsoft.PowerApps.CLI/1.23.4