btholt / btholt/complete-intro-to-react-v6

Parcel build errors out when trying to add tailwind with postcss for the first time.

Open
#44 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.4k
Forks
202
PR merge metrics
No merged PRs in 30d

Description

When trying to integrate tailwind for the first time, parcel throws this error after trying to build the project

```
/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/src/style.css:undefined:undefined: JSON5: invalid character '\"' at 5:9
at syntaxError (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/node_modules/json5/lib/parse.js:1:12963)
at invalidChar (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/node_modules/json5/lib/parse.js:1:12177)
at Object.afterPropertyValue (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/node_modules/json5/lib/parse.js:1:8133)
at Object._default [as default] (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/node_modules/json5/lib/parse.js:1:2255)
at lex (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/node_modules/json5/lib/parse.js:1:1680)
at parse (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/node_modules/json5/lib/parse.js:1:992)
at Object.load (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/src/utils/config.js:45:30)
at async getConfig (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/src/transforms/postcss.js:25:16)
at async module.exports (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/src/transforms/postcss.js:11:16)
at async CSSAsset.transform (/mnt/c/Users/Shaleen/Documents/Visual Studio 2019/Courses/Frontend Masters/Intermediate React V3/node_modules/parcel/src/assets/CSSAsset.js:133:5)

```

I have made sure to double check the instructions. Any idea where it might be going wrong?

P.S.

Here's my style.css

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with src/style.css and reproduce the Parcel build while reviewing the PostCSS configuration involved in the reported transform. Trace the JSON5 parsing error to the configuration input, then confirm that a project using the shown Tailwind directives builds successfully without the error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, tailwindcss
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.