javascript - npm start 或 npx webpack 编译失败
问题描述
当我尝试 npm start 或 npx webpack 一个项目时,我使用 reactjs、draft.js、webpack 构建了一个关于简单富文本编辑器的项目,我遇到了一个显示编译信息的问题:
ERROR in ./src/index.js
Module not found: Error: Can't resolve '' in 'F:\draft_react\my_react'
@ ./src/index.js 25:0-55
我正在使用 npm@6.4.1、webpack@4.32.2、node-v10.15.3。
这是我的 package.json 文件详细信息
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot:true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
};
和 index.js 文件
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import editorStyles from './editorStyles.css';
import 'draft-js-static-toolbar-plugin/lib/plugin.css';
const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
const plugins = [staticToolbarPlugin];
const text = 'The toolbar above the editor can be used for formatting text, as in conventional static editors …';
export default class SimpleStaticToolbarEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
render() {
return (
<div>
<div className={editorStyles.editor} onClick={this.focus}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref={(element) => { this.editor = element; }}
/>
<Toolbar />
</div>
</div>
);
}
}
我是 reactjs 框架的新手,我不知道如何解决这个错误好几个小时。谢谢。
解决方案
推荐阅读
- c# - 语言更改后不刷新静态变量
- c++ - 我们如何在 MACOS 中使用 c/c++ 获取焦点窗口
- c# - 远程桌面上的远程调试
- android - 如果没有验证证明、会话信息或临时证明,则无法创建 PhoneAuthCredential。当我删除 firebase 用户时
- html - 为什么我的导航栏不像纵向滚动那样横向滚动?
- javascript - 我如何在 React 中实现输入更改的去抖动自动保存?
- drag-and-drop - 如何在 GraphicsScene 中的 GraphicsItem 中获取拖放事件?
- laravel - 如何在 PhpStorm 中运行终端命令作为启动任务?
- vue.js - Vueutify 导航抽屉 - 更改背景图像
- module - 为什么 Utop 对待这个 Ocaml 代码的方式不同