Gradebook MFE – npm run build – PostCSS plugin postcss-discard-comments requires PostCSS 8

Development
1

Trying to build the frontend-app-gradebook MFE and we’re running into this package issue. Does anyone know how to resolve this issue?

We think that we found an article (Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed · Issue #435 · postcss/postcss-import · GitHub) with several solutions to resolve this error but we haven’t figured one that works for this MFE yet.

Does anyone have a solution for this?

root@de0706faa959:/edx/app/frontend-app-gradebook# npm run build

> @edx/frontend-app-gradebook@1.4.47 build /edx/app/frontend-app-gradebook
> fedx-scripts webpack

Running with resolved config:
/edx/app/frontend-app-gradebook/webpack.prod.config.js

[webpack-cli] Failed to load '/edx/app/frontend-app-gradebook/webpack.prod.config.js' config
[webpack-cli] Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/edx/app/frontend-app-gradebook/node_modules/postcss/lib/processor.js:167:15)
    at new Processor (/edx/app/frontend-app-gradebook/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/edx/app/frontend-app-gradebook/node_modules/postcss/lib/postcss.js:55:10)
    at cssnanoPlugin (/edx/app/frontend-app-gradebook/node_modules/cssnano/dist/index.js:145:31)
    at Object.<anonymous> (/edx/app/frontend-app-gradebook/node_modules/@edx/frontend-build/config/webpack.prod.config.js:106:19)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @edx/frontend-app-gradebook@1.4.47 build: `fedx-scripts webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @edx/frontend-app-gradebook@1.4.47 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-11-01T14_15_01_469Z-debug.log

NPM logs.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.14.16
3 info using node@v12.22.12
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle @edx/frontend-app-gradebook@1.4.47~prebuild: @edx/frontend-app-gradebook@1.4.47
6 info lifecycle @edx/frontend-app-gradebook@1.4.47~build: @edx/frontend-app-gradebook@1.4.47
7 verbose lifecycle @edx/frontend-app-gradebook@1.4.47~build: unsafe-perm in lifecycle true
8 verbose lifecycle @edx/frontend-app-gradebook@1.4.47~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/edx/app/frontend-app-gradebook/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle @edx/frontend-app-gradebook@1.4.47~build: CWD: /edx/app/frontend-app-gradebook
10 silly lifecycle @edx/frontend-app-gradebook@1.4.47~build: Args: [ '-c', 'fedx-scripts webpack' ]
11 silly lifecycle @edx/frontend-app-gradebook@1.4.47~build: Returned: code: 2  signal: null
12 info lifecycle @edx/frontend-app-gradebook@1.4.47~build: Failed to exec build script
13 verbose stack Error: @edx/frontend-app-gradebook@1.4.47 build: `fedx-scripts webpack`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1022:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid @edx/frontend-app-gradebook@1.4.47
15 verbose cwd /edx/app/frontend-app-gradebook
16 verbose Linux 5.10.124-linuxkit
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v12.22.12
19 verbose npm  v6.14.16
20 error code ELIFECYCLE
21 error errno 2
22 error @edx/frontend-app-gradebook@1.4.47 build: `fedx-scripts webpack`
22 error Exit status 2
23 error Failed at the @edx/frontend-app-gradebook@1.4.47 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

cc @becdavid @traek728

2

So it appears that we updated webpack-cli to a newer version to match what the frontend-app-learning had with this PR fix(deps): update dependency webpack-cli to v4.10.0 by renovate[bot] · Pull Request #250 · openedx/frontend-build · GitHub.

We were receiving this error and that’s why we updated webpack-cli.

Resolving modules from local directories via module.config.js.
Using local version of @edx/frontend-build from ../src/frontend-build/src.
1% setup initialize[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
    at Command.<anonymous> (/edx/app/frontend-app-learning/node_modules/@webpack-cli/serve/lib/index.js:146:35)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 1)
    at async Command.<anonymous> (/edx/app/frontend-app-learning/node_modules/webpack-cli/lib/webpack-cli.js:1672:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @edx/frontend-app-learning@1.0.0-semantically-released start: `fedx-scripts webpack-dev-server --progress`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @edx/frontend-app-learning@1.0.0-semantically-released start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-10-28T14_46_49_930Z-debug.log

> @edx/frontend-app-learning@1.0.0-semantically-released start /edx/app/frontend-app-learning
> fedx-scripts webpack-dev-server --progress

Leaving the following dependency solved our issue because webpack-cli was on a version 4.9.1.

"devDependencies": {
    "@edx/frontend-build": "5.5.2",
}

cc @arbrandes

3

I just tried npm run building frontend-app-gradebook@master locally with node v16.17.0 (via nvm) and npm v8.15.0, and though there are tons of warnings, the build completes without error.

Can you share a little more about what environment you’re building on? Also, have you tried to build from master?

4

@arbrandes We’re currently on maple.3. See above Gradebook MFE – npm run build – PostCSS plugin postcss-discard-comments requires PostCSS 8 - #2 by Zachary_Trabookis where I commented on a fix.