index.css:undefined:undefined: plugin is not a function

user_15891871 0
Viewed 326

I am attempting the Introducing a complete toolchain chapter of the Understanding client-side web development tools module of the MDN Front End Developer course. I have reached the final Running the transformation section where the instructions advise to run npx parcel src/index.html. At this stage I encounter two issues.

  • The build process gets stuck on Building scheduler-tracing.development.js. After several aborted attempts I let this run for 6 hours before aborting.
  • After aborting the process and re-running, I receive the following error:
/home/username/dev/will-it-miss/src/index.css:undefined:undefined: plugin is not a function
at LazyResult.run (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:288:14)
at LazyResult.asyncTick (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:212:26)
at /home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:254:14
at new Promise (<anonymous>)
at LazyResult.async (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:250:23)
at LazyResult.then (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:131:17)

Being new to development I haven't had much luck in troubleshooting this error but these are the actions taken so far:

  • Set index.js script type to module and updated SVG paths as suggested in this thread on the MDN Discourse forum.
  • Replaced the postcss specific nested selectors from index.css with regular selectors
  • Reverted the project version of postcss to a previous build
  • Deleted and rebuilt the project from scratch 5~ times and get the same results (Stuck building scheduler-tracing.development.js, abort process, re-run and error relating to index.css outlined above.

Another user reported the same error I have as shown in the linked forum thread. if there is any other info that could be useful in troubleshooting this error, please let me know.

javascript
1 Answers

Try the following:

  1. Run the following command to install a compatible version of postcss-preset-env: npm install --save-dev postcss-preset-env@6.7.0

  2. Add a single file called .postcssrc.json (if it is not already there; this replaces the .postcssrc file) to the root of your project directory.

  3. Add the following contents to the new file, which will automagically give us full access to the latest CSS features:

    { "plugins": { "postcss-preset-env": { "stage": 0 } } }

  4. Run the npx parcel index.html command again.

References:

Github, Inc. Issue with "Introducing a complete toolchain": fails to build; problem with postcss-preset-env versions #12495. https://github.com/mdn/content/issues/12495#issuecomment-1025004164. (Accessed 20 July, 2022).

user_81215510
Related