1

I am working on Sitecore 9.3 with JSS using a code-first approach. I have created the first component called "HeroBanner" after that I run the command "Jss Start" but it is giving below error:

*Manifest has been generated and written to ./sitecore/manifest/sitecore-import.json
🔌  Disconnected Layout Service initializing...⏳
Manifest manager is watching for manifest source file changes...
JSS Disconnected-mode Proxy is listening on port 3042. (PID: 49616)
[HPM] Proxy created: /sitecore  -> http://localhost:3042/
[HPM] Proxy created: /data/media  -> http://localhost:3042/
i 「wds」: Project is running at http://192.168.0.105/
i 「wds」: webpack output is served from
i 「wds」: Content not from webpack is served from C:\Projects\SitecoreJss\jsslearning\public
i 「wds」: 404s will fallback to /
Starting the development server...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.
src\components\HeroBanner\index.js
  Line 1:27:   Insert `␍`  prettier/prettier
  Line 2:57:   Insert `␍`  prettier/prettier
  Line 3:1:    Insert `␍`  prettier/prettier
  Line 4:32:   Insert `␍`  prettier/prettier
  Line 5:8:    Insert `␍`  prettier/prettier
  Line 6:32:   Insert `␍`  prettier/prettier
  Line 7:42:   Insert `␍`  prettier/prettier
  Line 8:9:    Insert `␍`  prettier/prettier
  Line 9:3:    Insert `␍`  prettier/prettier
  Line 10:1:   Insert `␍`  prettier/prettier
  Line 11:27:  Insert `␍`  prettier/prettier
src\components\Test\index.js
  Line 1:27:   Insert `␍`  prettier/prettier
  Line 2:57:   Insert `␍`  prettier/prettier
  Line 3:1:    Insert `␍`  prettier/prettier
  Line 4:26:   Insert `␍`  prettier/prettier
  Line 5:8:    Insert `␍`  prettier/prettier
  Line 6:26:   Insert `␍`  prettier/prettier
  Line 7:42:   Insert `␍`  prettier/prettier
  Line 8:9:    Insert `␍`  prettier/prettier
  Line 9:3:    Insert `␍`  prettier/prettier
  Line 10:1:   Insert `␍`  prettier/prettier
  Line 11:21:  Insert `␍`  prettier/prettier
Search for the keywords to learn more about each error.
> [DICTIONARY] served in en
> [LAYOUT] served for /*

enter image description here

1
  • Stack Traces and error messages as text, not images. Always. – Mark Cassidy Apr 14 at 16:01
0

First make sure Prettier is your default Formatter (which probably is based on compile error):

  1. Select VS Code -> View -> Command Palette, and type: Format Document With
  2. Then Configure Default Formatter... and then choose Prettier - Code formatter.

Then specify Prettier formatting rules:

  1. Create .prettierrc file in your solution root (usually src folder)

  2. Specify your rules in that file, for example:

    { "printWidth": 100, "singleQuote": true, "disableLanguages": [] }

Then configure Visual Studio Code to format files on save (so you won't see those compile errors):

  1. You have to check "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting
  2. Make sure to check "Format on Save" checkbox: enter image description here

Now reopen those two files src\components\Test\index.js and src\components\HeroBanner\index.js, do some changes and save them to format them by Prettier...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.