Javascript 无法运行我的React应用程序,出现一些错误
Github代码链接: 我已经运行了npmi,然后运行了devserver,我使用了webpack。 我在一台MacOs机器上。 我还制作了.babelrc文件 运行Thread run dev server后出现的错误:Javascript 无法运行我的React应用程序,出现一些错误,javascript,reactjs,npm,webpack,babeljs,Javascript,Reactjs,Npm,Webpack,Babeljs,Github代码链接: 我已经运行了npmi,然后运行了devserver,我使用了webpack。 我在一台MacOs机器上。 我还制作了.babelrc文件 运行Thread run dev server后出现的错误: VIKRANTs-MacBook-Pro:IndecisionAPP VIKRANT$ yarn run dev-server yarn run v1.19.1 $ webpack-dev-server Project is running at http://localho
VIKRANTs-MacBook-Pro:IndecisionAPP VIKRANT$ yarn run dev-server
yarn run v1.19.1
$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/VIKRANT/Desktop/IndecisionAPP/public
Hash: 35d055107a6a0062196d
Version: webpack 3.1.0
Time: 1305ms
Asset Size Chunks Chunk Names
bundle.js 867 kB 0 [emitted] [big] main
[35] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {0} [built]
[36] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} [built]
[37] ./node_modules/url/url.js 23.3 kB {0} [built]
[38] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
[39] ./node_modules/url/util.js 314 bytes {0} [built]
[40] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[43] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[44] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[45] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[46] ./node_modules/sockjs-client/lib/entry.js 244 bytes {0} [built]
[77] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[78] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[79] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[82] (webpack)/hot/emitter.js 77 bytes {0} [built]
[84] ./src/app.js 2.33 kB {0} [built] [failed] [1 error]
+ 70 hidden modules
ERROR in ./src/app.js
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0". If you are sure you have a
compatible version of @babel/core, it is likely that something in your build process is loading the wrong vers
ion. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "b
abel-core" to see what is calling Babel. (While processing preset: "/Users/VIKRANT/Desktop/IndecisionAPP/node_m
odules/@babel/preset-env/lib/index.js")
at throwVersionError (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/inde
x.js:65:11)
at Object.assertVersion (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/i
ndex.js:13:11)
at /Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/preset-env/lib/index.js:177:7
at /Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
at /Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-mana
ger.js:317:46
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-loader/lib/index.js:49:20)
at Object.module.exports (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-loader/lib/index.js:174:20)
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
webpack: Failed to compile.
VIKRANTs MacBook Pro:犹豫不决App VIKRANTs$Thread运行开发服务器
纱线运行v1.19.1
$webpack开发服务器
项目正在运行http://localhost:8080/
网页包输出由/
非来自网页包的内容由/Users/VIKRANT/Desktop/IndecisionAPP/public提供
散列:35d055107a6a0062196d
版本:网页3.1.0
时间:1305毫秒
资产大小块块名称
bundle.js 867 kB 0[emissed][big]main
[35]多(网页包)-开发服务器/客户端?http://localhost:8080 ./src/app.js 40字节{0}[编译]
[36](网页包)-开发服务器/客户端?http://localhost:8080 5.59 kB{0}[已建]
[37]./node_modules/url/url.js 23.3kb{0}[构建]
[38]./node_modules/node libs browser/node_modules/punycode/punycode.js 14.7kb{0}[编译]
[39]./node_modules/url/util.js 314字节{0}[builded]
[40]./node_modules/querystring-es3/index.js 127字节{0}[builded]
[43]./node_modules/strip ansi/index.js 161字节{0}[builded]
[44]./node_modules/ansi regex/index.js 135字节{0}[builded]
[45](网页包)-dev server/client/socket.js 856字节{0}[编译]
[46]./node_modules/sockjs client/lib/entry.js 244字节{0}[builded]
[77](网页包)-dev server/client/overlay.js 3.6kb{0}[内置]
[78]./node_modules/ansi html/index.js 4.26 kB{0}[编译]
[79]./node_modules/html entities/index.js 231字节{0}[builded]
[82](网页包)/hot/emitter.js 77字节{0}[内置]
[84]。/src/app.js 2.33 kB{0}[build][failed][1错误]
+70个隐藏模块
./src/app.js中出现错误
模块生成失败:错误:需要Babel“^7.0.0-0”,但已加载“6.25.0”。如果你确定你有
兼容版本的@babel/core,可能是构建过程中加载了错误的版本
离子。检查此错误的堆栈跟踪,以查找没有提到“@babel/core”或“b”的第一个条目
abel core“来看看什么叫巴贝尔。(处理预设时:“/Users/VIKRANT/Desktop/IndecisionAPP/node\m”
odules/@babel/preset env/lib/index.js”)
在throwVersionError(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/inde
x、 js:65:11)
在Object.assertVersion(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/i
ndex.js:13:11)
在/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/preset env/lib/index.js:177:7
在/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper plugin-utils/lib/index.js:19:12
at/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/file/options/option mana
ger.js:317:46
在Array.map()处
在OptionManager.resolvePresets(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/file/options/option manager.js:275:20)
在OptionManager.mergePresets(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/file/options/option manager.js:264:10)
在OptionManager.mergeOptions(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/file/options/option manager.js:249:14)
在OptionManager.init(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/file/options/option manager.js:368:12)
在File.initOptions(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/File/index.js:212:65)
在新文件中(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/File/index.js:135:24)
在Pipeline.transform(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel core/lib/transformation/Pipeline.js:46:16)
在transfile(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel loader/lib/index.js:49:20)
在Object.module.exports(/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel loader/lib/index.js:174:20)
@多(网页包)-开发服务器/客户端?http://localhost:8080 ./src/app.js
网页包:未能编译。
请帮我纠正这个语法错误,我已经花了将近一天的时间试图解决这个问题。首先
然后,从: 我们需要在我们的项目中添加一些babel包 npm安装--保存dev@babel/core@babel/cli@babel/preset env@babel/node 它们分别负责babels的一般工作、在命令行中使用babel、使用最新JS特性的能力以及在node中使用babel
或者,您可以就地修改“package.json”文件(如下所示),然后重新运行“Thread”:
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Andrew Mead",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"dependencies": {
"live-server": "^1.2.0",
"node-sass": "4.5.3",
"normalize.css": "7.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-modal": "2.2.2",
"sass-loader": "6.0.6",
"style-loader": "0.18.2",
"validator": "8.0.0",
"webpack": "3.1.0",
"webpack-dev-server": "2.5.1"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "7.0.0", // upgrade this to 7.0.
"css-loader": "0.28.4"
}
}
首先
然后,从: 我们需要在我们的项目中添加一些babel包 npm安装--保存dev@babel/core@babel/cli@babel/preset env@babel/node 它们分别负责babels的一般工作、在命令行中使用babel、使用最新JS特性的能力以及在node中使用babel
或者,您可以就地修改“package.json”文件(如下所示),然后重新运行“Thread”:
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Andrew Mead",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"dependencies": {
"live-server": "^1.2.0",
"node-sass": "4.5.3",
"normalize.css": "7.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-modal": "2.2.2",
"sass-loader": "6.0.6",
"style-loader": "0.18.2",
"validator": "8.0.0",
"webpack": "3.1.0",
"webpack-dev-server": "2.5.1"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "7.0.0", // upgrade this to 7.0.
"css-loader": "0.28.4"
}
}
模块生成失败:错误:需要Babel“^7.0.0-0”,但已加载
以“6.25.0”开头
这个错误是因为巴别塔7及以上是必需的。您可以使用babel升级包进行升级:
您可以在此处找到升级babel的正确方法:
模块生成失败:错误:需要Babel“^7.0.0-0”,但已加载
以“6.25.0”开头
这个错误是因为巴别塔7及以上是必需的。您可以使用babel升级包进行升级:
您可以在这里找到升级babel的正确方法:。我认为您在本课程中的某些步骤做得不正确,您可能应该使用package.json 我建议您尝试删除node_模块、warn.lock和package-lock.json