, когда я пытаюсь запустить npm или npx webpack проект, который я строю с помощью простого текстового редактора с использованиемactjs, 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>
);
}
}
Я новичок в реагирующей среде, я не знаю, как решить эту ошибку в течение многих часов. Спасибо.