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

**URL:** https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630
**Category:** Development
**Tags:** mfe
**Created:** [November 1, 2022, 2:31pm UTC](https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630 "2022-11-01T14:31:03Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Zachary\_Trabookis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/zachary_trabookis/32/753_2.png) [@Zachary\_Trabookis](https://discuss.openedx.org/u/Zachary_Trabookis)
#### Post date: [November 1, 2022, 2:31pm UTC](https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630/1 "2022-11-01T14:31:03Z")

</div>

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](https://github.com/postcss/postcss-import/issues/435)) 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?

```auto
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.

```auto
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

---

<div class="post-metadata">

### Author: ![Zachary\_Trabookis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/zachary_trabookis/32/753_2.png) [@Zachary\_Trabookis](https://discuss.openedx.org/u/Zachary_Trabookis)
#### Post date: [November 1, 2022, 6:00pm UTC](https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630/2 "2022-11-01T18:00:14Z")

</div>

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](https://github.com/openedx/frontend-build/pull/250).

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

```auto
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`.

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

```

cc @arbrandes

---

<div class="post-metadata">

### Author: ![arbrandes](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/arbrandes/32/158_2.png) [@arbrandes](https://discuss.openedx.org/u/arbrandes)
#### Post date: [November 1, 2022, 6:02pm UTC](https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630/3 "2022-11-01T18:02:50Z")

</div>

> [@Zachary\_Trabookis](#):
>
> we’re running into this package issue

I just tried `npm run build`ing [frontend-app-gradebook@master](https://github.com/openedx/frontend-app-gradebook) 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?

---

<div class="post-metadata">

### Author: ![Zachary\_Trabookis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/zachary_trabookis/32/753_2.png) [@Zachary\_Trabookis](https://discuss.openedx.org/u/Zachary_Trabookis)
#### Post date: [November 1, 2022, 6:15pm UTC](https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630/4 "2022-11-01T18:15:13Z")

</div>

@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](https://discuss.openedx.org/t/gradebook-mfe-npm-run-build-postcss-plugin-postcss-discard-comments-requires-postcss-8/8630/2) where I commented on a fix.