运行 来自 WebStorm 界面的新项目崩溃,而来自 shell 的 运行 没有?
Running new project from WebStorm interface crashes while running from shell doesn't?
在一个新的 create-react-app 生成的项目中 npx init create-react-app frontend --template typescript
。每当我尝试 运行 start
npm 脚本时,都会弹出以下错误:
> frontend@0.1.0 start
> react-scripts start
./frontend/node_modules/webpack-dev-server/lib/Server.js:348
} catch {
^
SyntaxError: Unexpected token {
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (./frontend/node_modules/react-scripts/scripts/start.js:28:26)
但是,如果我 运行 直接在 shell 中(来自 WebStorm 的终端或手动打开的终端)它 运行 完全没问题,表明问题出在 WebStorm配置?
仔细检查显示 WebStorm 运行s:
/home/paul/.nvm/versions/node/v16.13.2/bin/node /home/paul/.nvm/versions/node/v16.13.2/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto
运行 在终端中手动操作也可以正常工作。我已经检查了项目设置中选定的 Node 和 TypeScript 版本 - 这些都设置正确(节点设置为 nvm
维护的 16.3.2 和 npm 到相应的版本,TypeScript 基于本地节点模块中的版本).
这个 运行ning 错误的原因是什么(在空白项目上)?什么是解决方案?
按要求截图:
节点设置:
经过更深入的检查,我注意到如果我将 react-scripts
从 5.0.0
降级到 3.4.4
。以及从 4.5.5
到 3.9.10
的 typescript
它工作正常 - 然而这并不是一个真正可持续的情况。
更深入的检查表明问题确实发生在 react-scripts 版本 4.x
一定是您的 $PATH
有问题,正如 IDE 所看到的那样 - 您必须有一些不支持 optional catch binding 的旧 Node.js 版本。
从 desktop/launch 栏启动时,WebStorm 只能看到在登录 shell 中配置的环境变量,但看不到交互式 shell 配置文件(如 .bashrc
或 .zshrc
),因此环境(包括 $PATH
)与终端中的环境不同。可能的解决方案:
- 解决方法 1:通过 moving/copying 将必需的变量在登录 shell 中提供给相应的 shell 配置文件配置
- 解决方法 2:从终端 运行 IDE 使其继承终端环境
- 解决方法 3:编辑 IDE 启动器并将命令设置为
/bin/bash -l -i -c "/opt/WebStorm/bin/webstorm.sh"
在一个新的 create-react-app 生成的项目中 npx init create-react-app frontend --template typescript
。每当我尝试 运行 start
npm 脚本时,都会弹出以下错误:
> frontend@0.1.0 start
> react-scripts start
./frontend/node_modules/webpack-dev-server/lib/Server.js:348
} catch {
^
SyntaxError: Unexpected token {
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (./frontend/node_modules/react-scripts/scripts/start.js:28:26)
但是,如果我 运行 直接在 shell 中(来自 WebStorm 的终端或手动打开的终端)它 运行 完全没问题,表明问题出在 WebStorm配置?
仔细检查显示 WebStorm 运行s:
/home/paul/.nvm/versions/node/v16.13.2/bin/node /home/paul/.nvm/versions/node/v16.13.2/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto
运行 在终端中手动操作也可以正常工作。我已经检查了项目设置中选定的 Node 和 TypeScript 版本 - 这些都设置正确(节点设置为 nvm
维护的 16.3.2 和 npm 到相应的版本,TypeScript 基于本地节点模块中的版本).
这个 运行ning 错误的原因是什么(在空白项目上)?什么是解决方案?
按要求截图:
节点设置:
经过更深入的检查,我注意到如果我将 react-scripts
从 5.0.0
降级到 3.4.4
。以及从 4.5.5
到 3.9.10
的 typescript
它工作正常 - 然而这并不是一个真正可持续的情况。
更深入的检查表明问题确实发生在 react-scripts 版本 4.x
一定是您的 $PATH
有问题,正如 IDE 所看到的那样 - 您必须有一些不支持 optional catch binding 的旧 Node.js 版本。
从 desktop/launch 栏启动时,WebStorm 只能看到在登录 shell 中配置的环境变量,但看不到交互式 shell 配置文件(如 .bashrc
或 .zshrc
),因此环境(包括 $PATH
)与终端中的环境不同。可能的解决方案:
- 解决方法 1:通过 moving/copying 将必需的变量在登录 shell 中提供给相应的 shell 配置文件配置
- 解决方法 2:从终端 运行 IDE 使其继承终端环境
- 解决方法 3:编辑 IDE 启动器并将命令设置为
/bin/bash -l -i -c "/opt/WebStorm/bin/webstorm.sh"