Help needed with Introducing a complete toolchain

MDN Learn
#1

Hi there.

I have been working my way through the client-side web development tools course and I have come a cross a problem in the “Introducing a complete toolchain” section.

I went on step by step with the guide but in the end when i was trying to use parcel to build my app using npx parcel build src/index.html in the terminal, i keep getting an error:

Capture
Capture1113×171 8.52 KB

can anyone help me with this problem? i have tried to go through the steps again to see if i made a mistake somewhere but i got the same result again.

any help is much appreciated. thanks!

#2

Hello @Ali_Servat

i read this topic once but did not used it https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain

so i have no experiance but i will try
did you follow those steps

  • Add a single file called .postcssrc to the root of your project directory.
  • Add the following contents to the new file, which will automagically give us full access to the latest CSS features:

and are you sure follow each step ?

and if nothing help here then google is your friend or try to look in https://stackoverflow.com

sorry for not able to help and have a nice day :slight_smile:

#3

hey @justsomeone thanks for responding.

in regards to your question i should say yes i did add those files along with all of their configurations that was mentioned.

i also tried googling but i couldn’t find much help besides using --no-minify flag with the command but that just gave me the same result so i’m kinda stuck and don’t know what else i can do to fix this problem.

#4

you very welcome @Ali_Servat

then i guess this https://parceljs.org/docs/ where you could learn more about parcel as the mdn resource is just an intro and just to let you know about the tools that exist to help you

and have a nice day :slight_smile:

#5

Hi @Ali_Servat

I tried the simple steps below and it works on my side.

  1. Add type="module" to <script> tag in index.html

    N8NQUKYUZI`B{DY_P$AOD
    N8NQUKYUZI`B{DY_P$AOD826×385 14.7 KB

  2. Change SVGs path in the index.css, see the screenshot

    1MV)3DVR8_~J5~X%~5JJ@1
    1MV)3DVR8_~J5~X%~5JJ@1830×456 21.5 KB

  3. Go to your package.json, if there is "main": "index.js" line, you can just remove this line and test again.

Hope it helps!

2 Likes
#6

thanks @cchqy for the help :slight_smile:

#7

Hi there @cchqy

Thanks for your reply. I implemented the changes you mentioned but sadly it’s still giving the same error :frowning:. i think it has to do something with the postcss that is used.

#8

Hi,

There are 4 SVG paths in index.css, try to change them all, also try to delete the .parcel-cache folder in your current project folder and run test again.

#9

Hi.

i tried modifying all of the urls but it still doesn’t work. also i couldn’t find a folder in the project directory called “.parcel-cache”. did you mean the “.cache” folder?

#10

Hi all.

I have encountered the same error as @Ali_Servat, given below:

/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)

Before this error, I first cancelled the build as it seemed to get stuck on building scheduler-tracing.development.js. I had left it for 15 minutes to run then cancelled. This happened twice after I deleted the project folder and started from scratch.

Some troubleshooting I attempted:

  • Ensured the config files were correct to the extent of deleting the entire project, recreating from scratch, copy/pasting the terminal commands and config file content in case error in typing as per @justsomeone - Same errors with building scheduler-tracing.development.js getting stuck and cancelling then second run with causing error with building scheduler-tracing.development.js

  • Set the script type to module and updated the svg paths as per @cchqy - Same error

  • Checked the CSS file and noted there were errors caused by using nested selectors, so separated these into non-nested selected (body::before, etc) resolving errors identified in VS Code - Same error

  • Reverted postcss version to previous version (8.4.4) - Same error

  • Performed npm update to update back to 8.4.5 - Same error

  • Running npm list postcss return the following indicating multiple versions of postcss in package due to other dependencies using older builds

    will-it-miss@1.0.0 /home/username/dev/will-it-miss
    ├─┬ parcel-bundler@1.12.5
    │ ├─┬ css-modules-loader-core@1.1.0
    │ │ ├─┬ postcss-modules-extract-imports@1.1.0
    │ │ │ └── postcss@6.0.23
    │ │ ├─┬ postcss-modules-local-by-default@1.2.0
    │ │ │ └── postcss@6.0.23
    │ │ ├─┬ postcss-modules-scope@1.1.0
    │ │ │ └── postcss@6.0.23
    │ │ ├─┬ postcss-modules-values@1.3.0
    │ │ │ └── postcss@6.0.23
    │ │ └── postcss@6.0.1
    │ ├─┬ cssnano@4.1.11
    │ │ ├─┬ cssnano-preset-default@4.0.8
    │ │ │ ├─┬ css-declaration-sorter@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ cssnano-util-raw-cache@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-calc@7.0.5
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-colormin@4.0.3
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-convert-values@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-discard-comments@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-discard-duplicates@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-discard-empty@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-discard-overridden@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-merge-longhand@4.0.11
    │ │ │ │ ├── postcss@7.0.39
    │ │ │ │ └─┬ stylehacks@4.0.3
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-merge-rules@4.0.3
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-minify-font-values@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-minify-gradients@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-minify-params@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-minify-selectors@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-charset@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-display-values@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-positions@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-repeat-style@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-string@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-timing-functions@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-unicode@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-url@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-normalize-whitespace@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-ordered-values@4.1.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-reduce-initial@4.0.3
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-reduce-transforms@4.0.2
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-svgo@4.0.3
    │ │ │ │ └── postcss@7.0.39
    │ │ │ ├─┬ postcss-unique-selectors@4.0.1
    │ │ │ │ └── postcss@7.0.39
    │ │ │ └── postcss@7.0.39
    │ │ └── postcss@7.0.39
    │ ├─┬ htmlnano@0.2.9
    │ │ ├─┬ purgecss@2.3.0
    │ │ │ └── postcss@7.0.32
    │ │ └─┬ uncss@0.17.3
    │ │ └── postcss@7.0.39
    │ └── postcss@7.0.39
    └─┬ postcss-preset-env@7.2.3
    ├─┬ autoprefixer@10.4.2
    │ └── postcss@8.4.5 deduped
    ├─┬ css-blank-pseudo@3.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ css-has-pseudo@3.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ css-prefers-color-scheme@6.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-attribute-case-insensitive@5.0.0
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-color-functional-notation@4.2.1
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-color-hex-alpha@8.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-color-rebeccapurple@7.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-custom-media@8.0.0
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-custom-properties@12.1.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-custom-selectors@6.0.0
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-dir-pseudo-class@6.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-double-position-gradients@3.0.4
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-env-function@4.0.4
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-focus-visible@6.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-focus-within@5.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-font-variant@5.0.0
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-gap-properties@3.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-image-set-function@4.0.4
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-initial@4.0.1
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-lab-function@4.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-logical@5.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-media-minmax@5.0.0
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-nesting@10.1.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-overflow-shorthand@3.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-page-break@3.0.4
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-place@7.0.3
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-pseudo-class-any-link@7.0.2
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-replace-overflow-wrap@4.0.0
    │ └── postcss@8.4.5 deduped
    ├─┬ postcss-selector-not@5.0.0
    │ └── postcss@8.4.5 deduped
    └── postcss@8.4.5

Based on these steps, where should one try next for troubleshooting? Could it be an error in post-css’s lazy-result.js as indicated by the error text? I am going to restart the project again and let building scheduler-tracing.development.js run over night but any other advice would be appreciated :slight_smile:

#11

@horusofoz unfortunatly i do not know so try with https://stackoverflow.com

#12

@justsomeone thanks for trying. With StackOverflow, I don’t think I know enough about what is happening to give information for effective troubleshooting.

After leaving the Building scheduler-tracing.development.js step running overnight, it’s still ‘Building’. Cancelled using ctr+c then ran again and same error encountered.

I noticed in index.js there are errors indicating the module variable isn’t defined.

import React from 'react';

import { render } from ‘react-dom’;
import App from ‘./components/App’;

render(, document.getElementById(‘app’));

if (module.hot) {
module.hot.accept(function() {
window.location.reload();
});
}

Could this be related?

#13

Hello @horusofoz

first could you check your node version using
node --version on the command line/terminal

and for react missing did you follow this step

However, in the project's source files we are using React JSX syntax (for your real projects you might use React or Vue or any other framework, or no framework at all!). Putting JSX syntax in the middle of our JavaScript is going to cause eslint to complain pretty quickly with the current configuration, so we'll need to add a little more configuration to the eslint settings to get it to accept JSX features. The final config file should look like this — add in the bolded parts and save it:

{
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react"],
  "rules": {
    "semi": "error",
    "no-console": 0,
    "react/jsx-uses-vars": "error"
  }
}
#14

Hey mate.

I have confirmed. I’ve performed all the steps of the project from scratch several times now and get the same results. To demonstrate I’ve documented the steps below.

Prereqs

node –v
v16.13.2 

npm –v
8.3.2 

git –version
git version 2.35.0 

prettier –v
2.5.1

Initial setup

mkdir will-it-miss
cd will-it-miss 
mkdir src 

git init
Using 'master' as the name for the initial branch..... 

npm init –force
npm WARN using --force Recommended protections disabled....

Get project files

Downloaded mdn-will-it-miss-master.zip 

Extracted /mdn-will-it-miss-master/src/ to /will-it-miss/src/

Install tools

npm install --save-dev eslint prettier babel-eslint 
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates....

Created /will-it-miss/.prettierrc.json

{ 

"singleQuote": true, 

"trailingComma": "es5" 

}

Created /will-it-miss/.eslintrc.json

{ 

"env": { 

"es6": true, 

"browser": true 

}, 

"extends": ["eslint:recommended", "plugin:react/recommended"], 

"parserOptions": { 

"ecmaVersion": 6, 

"sourceType": "module", 

"ecmaFeatures": { 

"jsx": true 

} 

}, 

"plugins": ["react"], 

"rules": { 

"semi": "error", 

"no-console": 0, 

"react/jsx-uses-vars": "error" 

} 

}

Installed react plugin

npm install --save-dev eslint-plugin-react
added 46 packages, and audited 166 packages in 4s...

Created /will-it-miss/.postcssrc (postcss github recommends to have json file extension but testing showed no change through adding this)

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

Run

npx parcel src/index.html

Building packages until reaches scheduler-tracing.development.js. Previously let run for 6 hours without success. After 5 minutes, cancelled process via ctrl + c.

npx parcel src/index.html

username@devbox-01:~/will-it-miss$ npx parcel src/index.html

Server running at http://localhost:1234

:rotating_light: /home/username/will-it-miss/src/index.css:undefined:undefined: plugin is not a function

at LazyResult.run (/home/username/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:288:14) 

at LazyResult.asyncTick (/home/username/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:212:26) 

at /home/username/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/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:250:23) 

at LazyResult.then (/home/username/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:131:17)

Troubleshooting
Tried to directly install react assuming that was cause.

npm install react
up to date, audited 1038 packages in 8s...

Tried running npm audit fix

npm audit fix 
up to date, audited 1038 packages in 7s 
74 packages are looking for funding 
run `npm fund` for details 
# npm audit report 

ansi-regex  >2.1.1 <5.0.1 
Severity: moderate 
Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw 
No fix available 
node_modules/@parcel/logger/node_modules/ansi-regex 
node_modules/ora/node_modules/ansi-regex 
strip-ansi  4.0.0 - 5.2.0 
Depends on vulnerable versions of ansi-regex 
node_modules/@parcel/logger/node_modules/strip-ansi 
node_modules/ora/node_modules/strip-ansi 

@parcel/logger  <=1.11.1 
Depends on vulnerable versions of strip-ansi 
node_modules/@parcel/logger 

parcel-bundler  * 

Depends on vulnerable versions of @parcel/logger 
Depends on vulnerable versions of css-modules-loader-core
Depends on vulnerable versions of fast-glob 
Depends on vulnerable versions of node-forge 
Depends on vulnerable versions of postcss 
node_modules/parcel-bundler 

ora  2.0.0 - 4.0.2 
Depends on vulnerable versions of strip-ansi 
node_modules/ora 

glob-parent  <5.1.2 
Severity: high 
Regular expression denial of service - https://github.com/advisories    /GHSA-ww39-953v-wcq6 
No fix available 
node_modules/chokidar/node_modules/glob-parent 
node_modules/fast-glob/node_modules/glob-parent 

chokidar  1.0.0-rc1 - 2.1.8 
Depends on vulnerable versions of glob-parent 
node_modules/chokidar 

@parcel/watcher  <=1.12.1 
Depends on vulnerable versions of chokidar 
node_modules/@parcel/watcher 

fast-glob  <=2.2.7 
Depends on vulnerable versions of glob-parent 
node_modules/fast-glob 

parcel-bundler  * 
Depends on vulnerable versions of @parcel/logger 
Depends on vulnerable versions of css-modules-loader-core 
Depends on vulnerable versions of fast-glob 
Depends on vulnerable versions of node-forge 
Depends on vulnerable versions of postcss 
node_modules/parcel-bundler 

node-forge  <1.0.0 
Prototype Pollution in node-forge debug API. - https://github.com/advisories/GHSA-5rrq-pxf6-6jx5 
No fix available 

node_modules/node-forge 

  parcel-bundler  * 
 Depends on vulnerable versions of @parcel/logger 
 Depends on vulnerable versions of css-modules-loader-core 
 Depends on vulnerable versions of fast-glob 
 Depends on vulnerable versions of node-forge 
 Depends on vulnerable versions of postcss 

nth-check  <2.0.1 
node_modules/parcel-bundler 

 nth-check  <2.0.1 
Severity: moderate 
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr 
fix available via `npm audit fix` 
node_modules/nth-check 

css-select  <=3.1.0 
Depends on vulnerable versions of nth-check 
  node_modules/css-select 

svgo  1.0.0 - 1.3.2 
Depends on vulnerable versions of css-select 
node_modules/svgo 

  htmlnano  >=0.1.1 
  Depends on vulnerable versions of cssnano 
  Depends on vulnerable versions of purgecss 
  Depends on vulnerable versions of svgo 
  Depends on vulnerable versions of uncss 
  node_modules/htmlnano 

  postcss-svgo  <=5.0.0-rc.2 
  Depends on vulnerable versions of postcss 
 Depends on vulnerable versions of svgo 
 node_modules/postcss-svgo 

postcss  <=8.2.12 
Severity: moderate 
Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-hwj9-h5mp-3pm3 
Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-566m-qj78-rww5 
No fix available 

node_modules/css-declaration-sorter/node_modules/postcss 
node_modules/css-modules-loader-core/node_modules/postcss 
node_modules/cssnano-preset-default/node_modules/postcss 
node_modules/cssnano-util-raw-cache/node_modules/postcss 
node_modules/cssnano/node_modules/postcss 
node_modules/parcel-bundler/node_modules/postcss 
node_modules/postcss-calc/node_modules/postcss 
node_modules/postcss-colormin/node_modules/postcss 
node_modules/postcss-convert-values/node_modules/postcss 
node_modules/postcss-discard-comments/node_modules/postcss 
node_modules/postcss-discard-duplicates/node_modules/postcss 
node_modules/postcss-discard-empty/node_modules/postcss 
node_modules/postcss-discard-overridden/node_modules/postcss 
node_modules/postcss-merge-longhand/node_modules/postcss 
node_modules/postcss-merge-rules/node_modules/postcss 
node_modules/postcss-minify-font-values/node_modules/postcss 
node_modules/postcss-minify-gradients/node_modules/postcss 
node_modules/postcss-minify-params/node_modules/postcss 
node_modules/postcss-minify-selectors/node_modules/postcss 
node_modules/postcss-modules-extract-imports/node_modules/postcss 
node_modules/postcss-modules-local-by-default/node_modules/postcss 
node_modules/postcss-modules-scope/node_modules/postcss 
node_modules/postcss-modules-values/node_modules/postcss 
node_modules/postcss-normalize-charset/node_modules/postcss 
node_modules/postcss-normalize-display-values/node_modules/postcss 
node_modules/postcss-normalize-positions/node_modules/postcss 
node_modules/postcss-normalize-repeat-style/node_modules/postcss 
node_modules/postcss-normalize-string/node_modules/postcss 
node_modules/postcss-normalize-timing-functions/node_modules/postcss 
node_modules/postcss-normalize-unicode/node_modules/postcss 
node_modules/postcss-normalize-url/node_modules/postcss 
node_modules/postcss-normalize-whitespace/node_modules/postcss 
node_modules/postcss-ordered-values/node_modules/postcss 
node_modules/postcss-reduce-initial/node_modules/postcss 
node_modules/postcss-reduce-transforms/node_modules/postcss 
node_modules/postcss-svgo/node_modules/postcss 
node_modules/postcss-unique-selectors/node_modules/postcss 
node_modules/purgecss/node_modules/postcss 
node_modules/stylehacks/node_modules/postcss 
node_modules/uncss/node_modules/postcss 

css-declaration-sorter  <=5.1.2 
Depends on vulnerable versions of postcss 
node_modules/css-declaration-sorter 

css-modules-loader-core  * 
Depends on vulnerable versions of postcss 
Depends on vulnerable versions of postcss-modules-values 
node_modules/css-modules-loader-core 

parcel-bundler  * 
Depends on vulnerable versions of @parcel/logger 
Depends on vulnerable versions of css-modules-loader-core 
Depends on vulnerable versions of fast-glob 
Depends on vulnerable versions of node-forge 
Depends on vulnerable versions of postcss 
node_modules/parcel-bundler 

cssnano  <=4.1.11 
Depends on vulnerable versions of cssnano-preset-default 
Depends on vulnerable versions of postcss 
node_modules/cssnano 

  htmlnano  >=0.1.1 
  Depends on vulnerable versions of cssnano 
  Depends on vulnerable versions of purgecss 
  Depends on vulnerable versions of svgo 
  Depends on vulnerable versions of uncss 
  node_modules/htmlnano 

cssnano-preset-default  <=4.0.8 
Depends on vulnerable versions of postcss 
node_modules/cssnano-preset-default 

cssnano-util-raw-cache  * 
Depends on vulnerable versions of postcss 
node_modules/cssnano-util-raw-cache 

postcss-calc  4.1.0 - 7.0.5 
Depends on vulnerable versions of postcss 
node_modules/postcss-calc 

postcss-colormin  <=4.0.3 
Depends on vulnerable versions of postcss 
node_modules/postcss-colormin 

postcss-convert-values  <=4.0.1 
Depends on vulnerable versions of postcss 
node_modules/postcss-convert-values 

postcss-discard-comments  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-discard-comments 

postcss-discard-duplicates  1.1.0 - 4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-discard-duplicates 

postcss-discard-empty  1.1.0 - 4.0.1 
Depends on vulnerable versions of postcss 
node_modules/postcss-discard-empty 

postcss-discard-overridden  <=4.0.1 
Depends on vulnerable versions of postcss 
node_modules/postcss-discard-overridden 

postcss-merge-longhand  <=4.0.11 
Depends on vulnerable versions of postcss 
Depends on vulnerable versions of stylehacks 
node_modules/postcss-merge-longhand 

postcss-merge-rules  <=4.0.3 
Depends on vulnerable versions of postcss 
node_modules/postcss-merge-rules 

postcss-minify-font-values  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-minify-font-values 

postcss-minify-gradients  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-minify-gradients 

postcss-minify-params  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-minify-params 

postcss-minify-selectors  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-minify-selectors 

postcss-modules-extract-imports  <=2.0.0 
Depends on vulnerable versions of postcss 
node_modules/postcss-modules-extract-imports 

postcss-modules-local-by-default  <=3.0.3 
Depends on vulnerable versions of postcss 
node_modules/postcss-modules-local-by-default 

postcss-modules-scope  <=2.2.0 
Depends on vulnerable versions of postcss 
node_modules/postcss-modules-scope 

postcss-modules-values  <=3.0.0 
Depends on vulnerable versions of postcss 
node_modules/postcss-modules-values 

postcss-normalize-charset  <=4.0.1 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-charset 

postcss-normalize-display-values  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-display-values 

postcss-normalize-positions  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-positions 

postcss-normalize-repeat-style  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-repeat-style 

postcss-normalize-string  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-string 

postcss-normalize-timing-functions  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-timing-functions 

postcss-normalize-unicode  <=4.0.1 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-unicode 

postcss-normalize-url  1.1.0 - 4.0.1 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-url 

postcss-normalize-whitespace  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-normalize-whitespace 

postcss-ordered-values  <=4.1.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-ordered-values 

postcss-reduce-initial  <=4.0.3 
Depends on vulnerable versions of postcss 
node_modules/postcss-reduce-initial 

postcss-reduce-transforms  <=4.0.2 
Depends on vulnerable versions of postcss 
node_modules/postcss-reduce-transforms 

  postcss-svgo  <=5.0.0-rc.2 
  Depends on vulnerable versions of postcss 
  Depends on vulnerable versions of svgo 
  node_modules/postcss-svgo 

  postcss-unique-selectors  <=4.0.1 
  Depends on vulnerable versions of postcss 
  node_modules/postcss-unique-selectors 

  purgecss  2.0.1-beta.0 - 3.0.0 
  Depends on vulnerable versions of postcss 
  node_modules/purgecss 

  stylehacks  <=4.0.3 
  Depends on vulnerable versions of postcss 
  node_modules/stylehacks 

  uncss  >=0.14.0 
  Depends on vulnerable versions of postcss 
node_modules/uncss 

54 vulnerabilities (1 low, 48 moderate, 5 high) 

To address issues that do not require attention, run: 
npm audit fix 
Some issues need review, and may require choosing a different dependency.
#15

For further troubleshooting I went through all the steps of the project again, then manually installed each of the dependencies via npm install xxxxx or npm install --dev-save xxxxx, depending on whether they were listed as devdependencies in the master project package.json.

When I attempted to build via npx parcel src/index.html, I didn’t get the initial hang on Building scheduler-tracing.development.js however there was still the repeat 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)

I am guessing there is some form of dependency conflict issue? However being my first time playing with npm and dependencies like this, I’m not sure how to troubleshoot. Any ideas?

#16

I think I finally found the fix.

tldr: Follow the instructions as provided but before running the transformation with npx parcel src/index.html, add "postcss-preset-env": "^6.7.0", to package.json.

Long version
I repeated the steps in the instructions of Introducing a complete a toolchain too many times to count. I worried I must be making an error in copying somewhere but even copy/pasting commands and file content repeated the same errors. I posted here and to Stackoverflow seeking guidance to no avail.

Deciding I would need to resolve the issue myself, I undertook a crash course in bash to script all steps up to the transformation that was causing my issue. Otherwise if I manually repeated the commands and populated the config files one more time, I might have thrown in the towel. This produced the attached will-it-miss-setup.zip (117.8 KB).

This ZIP contains a bash script to execute all the steps from the module, JSON files for the eslint, prettier and postcss configs as outlined in the module and finally the master content files provided by MDN.

The script looks like this

clear

# Script variables
SCRIPTPATH="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )/"
PROJECTFOLDER="${SCRIPTPATH}project/"
MASTERSOURCE="${SCRIPTPATH}mdn-will-it-miss-master/src/"
CONFIGFOLDER="${SCRIPTPATH}config/"

# Delete existing project folder
if [ -d $PROJECTFOLDER ]
then 
  rm -rf $PROJECTFOLDER
fi

# Create new project folder
mkdir $PROJECTFOLDER
mkdir "${PROJECTFOLDER}src"

# Initialise git and npm
cd $PROJECTFOLDER
git init
npm init --force

# Copy content files from master
cp -ar $MASTERSOURCE "${PROJECTFOLDER}"

# Install tools
npm install --save-dev eslint prettier babel-eslint

# Copy prettier config
cp -a "${CONFIGFOLDER}.prettierrc.json" $PROJECTFOLDER

# Copy eslint config
cp -a "${CONFIGFOLDER}.eslintrc.json" $PROJECTFOLDER

# Install eslint react plugin
npm install --save-dev eslint-plugin-react

# Install parcel bundler
npm install --save-dev parcel-bundler

# Copy postcss config
cp -a "${CONFIGFOLDER}.postcssrc.json" $PROJECTFOLDER

After running this script, modify /project/package.json and add
"postcss-preset-env": "^6.7.0",.

Navigate back to /project/ and run
npx parcel src/index.html

The project should now build without error and web page be accessible at http://localhost:1234/

having only just dipped my toes into npm, I do not yet understand why this resolved the issue, only that it did.

UPDATE
After typing out the preceding text, I decided to retry installing postcss-preset-env via

npm install --save-dev postcss-preset-env after setup.sh

before transforming but the original issues continued.

I then tried

npm install --save-dev postcss-preset-env@6.7.0

6.7.0 is the specific version referenced in the master package.json. Lo and behold, that’s the fix. That is as far as I am willing to isolate the issue at this stage but I hope is enough to help the people who maintain the course material to know how to fix for other users.

Have a good night all :slight_smile:

4 Likes
Express Local Library - PopulateDB command not working
Help needed for `npm run build` command
Welcome schalkneethling
#17

Great job on isolating the issue.

Could you report this issue on the MDN GitHub project? This way chances are much higher that it will be fixed.

Thank you very much!

2 Likes
#18

Done :slight_smile:

2 Likes
#19

awesome well done @horusofoz

glad to know that you figured it out
i tried it also and i got the same issue as you did and the

fixed it and i notice it the version used in the mdn-will-it-miss-master.zip
looks like the default version of postcss-prest-env is 7.2.3 which make some conflict not sure which part

thanks again @horusofoz for diving into it and find away to solve it

and have a nice day :slight_smile:

2 Likes
#20

You good person, are a human of the highest order.

2 Likes