`npm start` 收到大量错误消息

Question

我正在 this document 之后设置 Saleor 店面。但是，在Windows CMD 上调用命令npm start 后，弹出大量错误消息。

我是 npm 的新手，不确定我是否遗漏了配置中的任何内容。

如果您需要更多信息，请告诉我。任何提示将不胜感激。

最后几条错误信息的截图：

屏幕输出的开始部分：


Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Try the new cross-platform PowerShell https://aka.ms/pscore6

PS C:\my\work\saleor-dev\saleor-storefront> npm start

> saleor-site@3.0.0-a.0 start
> next dev -p 3000

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\my\work\saleor-dev\saleor-storefront\.env.development
info  - Loaded env from C:\my\work\saleor-dev\saleor-storefront\.env
warn  - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
info  - Using webpack 4. Reason: future.webpack5 option disabled https://nextjs.org/docs/messages/webpack5
Defining routes from exportPathMap
Warning: Reverting webpack devtool to 'inline-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
Read more: https://nextjs.org/docs/messages/improper-devtool
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

info  - Using external babel configuration from C:\my\work\saleor-dev\saleor-storefront\babel.config.js
error - ./src/globalStyles/scss/index.scss (./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/globalStyles/scss/index.scss)
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
Issues checking in progress...
(node:14980) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\my\work\saleor-dev\saleor-storefront\node_modules\eslint-config-airbnb-typescript\package.json' of 'dist/eslint-config-airbnb-typescript.js'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)
...

然后，

错误信息：

... 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>

Answer 1

这是因为您可能编辑了Windows下的文件，它使用CR+LF作为end-of-line。并且您已经配置了 prettier（或者默认情况下使用模板）设置 prettier 以检查 end-of-line 是否为 LF（unix 样式 end-of-line），并将不正确的格式报告为错误。

关于换行符的更多信息：https://en.wikipedia.org/wiki/Newline

解决方案

您可以设置 prettier 以允许 CR+LF 行结束，或者将每个源文件转换为使用 LF 行结束。

允许 CR+LF 行结尾

您应该尝试在 eslintrc 中找到此部分：

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

并将 'endOfLine' 行更改为：

    'endOfLine': 'auto',

或

    'endOfLine': 'crlf',

其中任何一个都应该允许使用 CR+LF。

将 CR+LF 转换为 LF（推荐）

您可以在编辑器中手动完成，也可以让 prettier 完成。在您的项目文件夹中，创建 .prettierrc.json（如果您使用模板，它可能已经存在，如果存在，请编辑现有的一个 inst）。

在 .prettierrc.json 中设置此选项：

{
    "endOfLine": "lf"
}

然后运行 npx prettier --write src/ 用于 npm 或 yarn prettier --write src/ 用于纱线。

之后，您可以运行 npx prettier --check src/检查源文件格式是否正确。

Answer 2

你可能想看看程序：

dos2unix infile outfile 反之亦然 (unix2dos) 用于剥离换行符。

`npm start` 收到大量错误消息

`npm start` got a massive number of error messages

npm

saleor

解决方案

允许 CR+LF 行结尾

将 CR+LF 转换为 LF（推荐）