Help needed with Introducing a complete toolchain

MDN Learn
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