reactjs 在Visual Studio 2019中使用React with Redux模板发布错误

oknwwptz  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(128)

我正在使用Visual Studio 2019(使用ASP.Net Core 3.1 Web API)使用Visual Studio 2019(版本16.4.2)提供的标准React with Redux模板进行React with Redux教程。
教程说要测试发布构建它的应用程序,并将所有发布的内容添加到bin/Release文件夹中,但由于各个文件中的导入语句,我无法让它工作。
除了添加一些SCSS支持和测试之外,我没有编辑任何文件中ClientApp文件夹内的任何代码,并且在ASP.NET核心代码中的Startup类中做了最少的工作(我只是创建了一个基本的中间件组件来记录响应和请求的httpContext,所以我知道这不是问题)。
错误如下所示:

31/12/19 07:54:14 PM
System.AggregateException: One or more errors occurred. ---> System.Exception: Build failed. Check the Output window for more details.
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task.ThrowIfExceptional(Boolean includeTaskCanceledExceptions)
   at System.Threading.Tasks.Task.Wait(Int32 millisecondsTimeout, CancellationToken cancellationToken)
   at Microsoft.WebTools.Publish.PublishService.VsWebProjectPublish.<>c__DisplayClass43_0.<PublishAsync>b__3()
   at System.Threading.Tasks.Task`1.InnerInvoke()
   at System.Threading.Tasks.Task.Execute()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.Publish.Framework.ViewModel.ProfileSelectorViewModel.<RunPublishTaskAsync>d__156.MoveNext()
---> (Inner Exception #0) System.Exception: Build failed. Check the Output window for more details.<---

System.Exception: Build failed. Check the Output window for more details.

===================

正如你从截图中看到的,它指的是我的导入。例如:
无法找到模块“../store”
引用FetchData.tsx文件:

import { ApplicationState } from '../store';

其他2个错误是指WeatherForecasts.ts文件:

import { Action, Reducer } from "redux";
import { AppThunkAction } from './';

这是所有的模板代码。我想知道这是否与相对路径有关,但不确定为什么这会不正确,因为没有任何变化,但redux在package.json文件中指定为依赖项,就像其他包一样,所以我不确定为什么这不起作用。
以下是我的package.json文件,以防万一:

{
  "name": "example.web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "connected-react-router": "6.5.2",
    "history": "4.10.1",
    "jquery": "^3.4.1",
    "merge": "1.2.1",
    "popper.js": "^1.16.0",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-redux": "7.1.1",
    "react-router": "5.1.2",
    "react-router-dom": "5.1.2",
    "react-scripts": "^3.2.0",
    "reactstrap": "8.1.1",
    "redux": "4.0.4",
    "redux-thunk": "2.3.0",
    "svgo": "1.3.0"
  },
  "devDependencies": {
    "@types/history": "4.7.3",
    "@types/jest": "24.0.19",
    "@types/node": "12.11.6",
    "@types/react": "16.9.9",
    "@types/react-dom": "16.9.2",
    "@types/react-redux": "7.1.5",
    "@types/react-router": "5.1.2",
    "@types/react-router-dom": "5.1.0",
    "@types/reactstrap": "8.0.6",
    "@typescript-eslint/parser": "^2.5.0",
    "cross-env": "6.0.3",
    "eslint": "^6.5.1",
    "eslint-plugin-flowtype": "^3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.16.0",
    "typescript": "3.6.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/**/*.ts ./src/**/*.tsx"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

tsconfig.json文件:

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": [
      "es2015",
      "dom"
    ],
    "skipLibCheck": false
  },
  "include": [
    "src"
  ]
}

很抱歉,我不能提供整个应用程序,但是使用Visual Studio 2019和ASP.Net Core 3.1使用标准的React with Redux模板应该会导致同样的问题,因为这基本上是我所做的所有事情。我该怎么补救呢?谢谢大家。
编辑:在删除package.lock.json和删除node_modules并重新安装它们之后,我得到了一个新的错误:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.12.0
3 info using node@v12.13.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle example.web@0.1.0~prebuild: example.web@0.1.0
6 info lifecycle example.web@0.1.0~build: example.web@0.1.0
7 verbose lifecycle example.web@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle example.web@0.1.0~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\<User>\Documents\example\example\example.Web\ClientApp\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files (x86)\GitExtensions\;C:\Program Files\dotnet\;C:\Users\<User>\AppData\Local\Microsoft\WindowsApps;C:\Users\<User>\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\<User>\AppData\Roaming\npm;C:\ProgramData\Anaconda2\Scripts;C:\Users\<User>\.dotnet\tools
9 verbose lifecycle example.web@0.1.0~build: CWD: C:\Users\<User>\Documents\example\example\example.Web\ClientApp
10 silly lifecycle example.web@0.1.0~build: Args: [ '/d /s /c', 'react-scripts build' ]
11 silly lifecycle example.web@0.1.0~build: Returned: code: 1  signal: null
12 info lifecycle example.web@0.1.0~build: Failed to exec build script
13 verbose stack Error: example.web@0.1.0 build: `react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:210:5)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:210:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid example.web@0.1.0
15 verbose cwd C:\Users\<User>\Documents\example\example\example.Web\ClientApp
16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.13.0
19 verbose npm  v6.12.0
20 error code ELIFECYCLE
21 error errno 1
22 error example.web@0.1.0 build: `react-scripts build`
22 error Exit status 1
23 error Failed at the example.web@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
umuewwlo

umuewwlo1#

我解决了这个问题。删除package.lock.json并删除node_modules文件夹后,显示新的错误消息。这个错误消息更有帮助,因为它是互联网上流行的错误消息,但同时它非常模糊:

13 verbose stack Error: example.web@0.1.0 build: `react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:210:5)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:210:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid example.web@0.1.0

对我来说,这是因为我安装的SASS(node-sass模块)。我读了另一个stackoverflow帖子,说别人也有这个问题,结果是2行CSS。因此,错误是很难调试。
我在react中导入的SASS文件无法构建,因为我错误地安装了node-sass。
我通过执行以下步骤修复了它:

  1. npm install node-sass
  2. npm rebuild node-sass-修复我的node.js版本兼容性问题
    1.删除package.lock.json文件和节点模块文件夹
  3. npm install再次

相关问题