I am setting up the Saleor storefront following this document. However, after calling the command npm start on Windows CMD, there were a massive number of error messages popped up.

I am new to npm and unsure if I missed anything in the configuration.

Please let me know if you need more information. Any hints will be highly appreciated.

Screenshot of the last a few error messages:

... a massive number of error messages omitted ...

ERROR in src/views/Search/SearchPage.tsx:114:14
prettier/prettier: Delete `␍`
    112 |             if (data && data.products === null) {
    113 |               return <NotFound />;
  > 114 |             }
        |              ^
    115 |
    116 |             if (!isOnline) {
    117 |               return <OfflinePlaceholder />;

ERROR in src/views/Search/SearchPage.tsx:115:1
prettier/prettier: Delete `␍`
    113 |               return <NotFound />;
    114 |             }
  > 115 |
        | ^
    116 |             if (!isOnline) {
    117 |               return <OfflinePlaceholder />;
    118 |             }

ERROR in src/views/Search/SearchPage.tsx:116:29
prettier/prettier: Delete `␍`
    114 |             }
    115 |
  > 116 |             if (!isOnline) {
        |                             ^
    117 |               return <OfflinePlaceholder />;
    118 |             }
    119 |           }}

ERROR in src/views/Search/SearchPage.tsx:117:45
prettier/prettier: Delete `␍`
    115 |
    116 |             if (!isOnline) {
  > 117 |               return <OfflinePlaceholder />;
        |                                             ^
    118 |             }
    119 |           }}
    120 |         </TypedSearchProductsQuery>

CodePudding user response：

This is because you may have edited the file under Windows, which uses CR LF as end-of-line. And you have configured prettier (or by using a template, by default) set prettier to check if end-of-line is LF (unix style end-of-line), and report incorrect formatting as an error.

More about newline: https://en.wikipedia.org/wiki/Newline

Solution

You can either set prettier to allow the CR LF line ending, or convert every source file to use LF line ending.

allow CR LF line ending

You should try finding this section in eslintrc:

'prettier/prettier': [
  'error',
  {
    'endOfLine': '[something something]',
  }
]

and change the 'endOfLine' line to this:

    'endOfLine': 'auto',

or

    'endOfLine': 'crlf',

Either of these should allow CR LF to be used.

convert CR LF to LF (recommended)

You can do it manually in your editor, or you can let prettier do it. In your project folder, create .prettierrc.json (it may already exist if you are using a template, if it does, edit the existing one inst).

Set this option in .prettierrc.json:

{
    "endOfLine": "lf"
}

Then run npx prettier --write src/ for npm or yarn prettier --write src/ for yarn.

After that, you can run npx prettier --check src/ to check if the source files are formatted correctly.

CodePudding user response：

You may want to look at the program:

dos2unix infile outfile and vice versa (unix2dos) for stripping line feeds.