个人中心
文章发布
退出
作者热门文章
- mongodb - 在 MongoDB mapreduce 中，如何展平值对象？
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗？
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
29
4
我是 React.js 的新手，我正在尝试从 tutorialspoint 上的教程中学习但我遇到了错误。这是我执行 npm start 命令时控制台上的错误:
C:\Users\HP\Desktop\reactApp1> npm start
> reactapp1@1.0.0 start C:\Users\HP\Desktop\reactApp1.
> webpack-dev-server --hot
The CLI moved into a separate package: webpack-cli.
Please install .webpack-cli. in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:540
throw err;
Error: Cannot find module .webpack-cli/bin/config-yargs.
at Function.Module._resolveFilenam (module.js:538:15)
at Function.Module. load (module.j5:668:25)
at Module.require (module.js,587.17)
at require (internal/module.js:11:18)
at Object•<anonymous> (C:\Users\HP\Desktop\reactApp1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
at Module. compile (module.js:663:30)
at Object.Module. extensions. .js (module.js:656:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:699:12)
at Function.Module. load (modul.js:691:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactapp@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:Users\HP\AppData\Roaming\npm-cache\_logs\2018-03-06T05_29_08_833Z-debug.log
package.json
{
"name": "reactapp1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^4.0.1",
"webpack-dev-server": "^3.1.0"
},
"devDependencies": {
"babel-loader": "^7.1.3"
}
}
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8090
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
最佳答案
我经历了同样的例子并遇到了同样的问题。所以按照上面的答案，我首先运行了这个命令-
npm install -g webpack-cli --save-dev
什么也没发生，仍然面临同样的问题。
然后我运行了这个命令 -
npm install webpack-cli --save-dev
问题已解决，但我遇到了另一个错误。
原来在新的 Webpack 版本中他们也改变了模块属性。因此，您还需要在 webpack.config.js 文件中进行更改。
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}所以基本上 loaders 被 module 对象内的 rules 取代。
我做了这个改变，它对我有用。
希望它可以帮助其他正在学习本教程的人。
为了解决 Invalid configuration object 问题，我引用了这个答案。 https://stackoverflow.com/a/42482079/5892553
关于javascript - CLI 移至单独的包 : webpack-cli，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49092291/
29
4
0
我有一个类似于下面给出的 for 循环。 for(int i=0; i<10; i++) { boolean condition = checkCondition(); /* line 3
我有一个循环，处理文件夹的每个文件。万一文件损坏而无法打开，我想: -向用户显示错误消息 -停止执行剩余的代码 -循环到下一个文件 问题是，如果无法在循环开始时打开文件，则仍有许多代码将要执行，这将引
我知道我可以将键绑定(bind)到“移至行首”，但这会忽略缩进。 我正在寻找的是移动到一行文本的开头，以便: CGRect example = CGRectMake(view.frame.origin
我有一个用户请求，我正在努力满足，我能想到的最简单的解释方法是使用图片说明: 本质上，用户正在输入大量日期。而不是输入 MM [反斜杠(或右箭头)] DD [反斜杠] YYYY [反斜杠] 等 ...
我想打开一个 pdf 文件并移动到 C++ 和 qt 程序中的特定书签。根据我的研究，我们可以使用 URL 和命令提示符转到书签。使用 URL 具有特殊格式，如:fileName.pdf#page=3
我正在尝试移至 PHP 记录集中的下一条记录，但遇到了一些问题。 这是我的页面顶部用于设置我的记录集的内容。 $result = mysqli_query($con,"SELECT * FROM
我已经制作了一个在 java 类中运行良好的程序..但是当我将我的代码移动到 servlet 时它并没有像预期的那样运行程序创建一些文件写入它们，然后再从中读取。问题是当我将代码移动到 servlet
我遇到了在 64 位 Windows 上运行的 32 位旧版应用程序的问题。有问题的应用程序使用 CreateFileMapping 创建共享内存。当它在 64 位 Windows 上运行时，任何从另
我们计划迁移到 TFS。虽然我讨厌它，但由于各种原因我们不得不这样做。 我们有开发、暂存和实时分支。我们是否将每个分支的源代码作为单独的文件夹移至 TFS，并稍后将其转换为分支？ 是否可以保留历史记录
有人可以为我提供一些关于如何将此代码移植到 renderscript 以获得更好性能的指南吗？ private void someMethod() { for (int i = 0; i < src
我有一个非常大的稀疏矩阵，我想将其发送到 Java 函数。我写了一个java代码来完成这个任务，但是它很慢，所以我正在寻找更好的解决方案。我从 R 3 数组发送如下 TMPmat <- as(mySp
我正在移动一张旧的 Mantis table ，上面有 varchar(64) category_id 列添加到新的 Mantis 表中，该表的 int(10) category_id 列。 简化后的
将中等流量网站的所有读取查询从 mysql 移至 solr 是否值得？我们已经使用 solr 作为我们网站的搜索引擎。我们每 24 小时将整个记录加载到 solr 中一次，然后每 20 分钟运行部分导
我在 MySQL (innodb) 中有三个表(X、Y 和 Z)。 X是一个超过1000万行的表，并且以Y为主键作为外键。同样，Z是超过3000万行的表，并且以Y为主键作为外键。 现在的问题是 Y 的
我在没有编程经验的情况下开始探索 Swift2。 我有以下代码在 Playgrounds 中运行良好，使用快速 View 和内联 View 方法。 如何将它与 Storyboard中的实际标签相关联？
在CSAPP练习3.4中 src_t v; dest_t *p; *p = (dest_t) v; 当src_t为char且dest_t为int时，答案为 movsbl %al, (%edx) (v
我正在测试我正在构建的 Webjob 的 Poison 消息处理。 一切似乎都按预期进行，除了一件奇怪的事情: 当一条消息被移动到“-poison”队列时，它的幽灵似乎仍然隐藏在主作业队列中(不可见)
我是 Android/Java 新手，所以请耐心等待。 我从 LoginActivity > onCreate 移动了代码进入我创建的 fragment FragmentLogin方法onCreate
这只是我真实代码的演示，但问题是一样的。有没有其他或更好的解决方案。为什么 animate() 方法不起作用...... $('document').ready(function() { $('p
我有一个小工件。 HTML: X CSS: #it { background: blue; width: 40px; text-align: center; color
我是一名优秀的程序员,十分优秀！