Question

我收到有关React模块的错误。最初，我认为这是因为我如何将Editor和Preview组件导入到App的{{1}}组件中。我以为我应该使用相对路径，但是没有用。然后，我还尝试添加import Editor from 'Editor'; import Preview from 'Preview';扩展名，但仍然遇到相同的错误。现在我不知道我错过了什么。

.js

这是我的文件结构。

  ERROR in ./src/js/components/App.js
  Module not found: Error: Can't resolve 'Editor' in '/home/qrs/Programming/FCC/fcc-markdown-previewer/src/js/components'
   @ ./src/js/components/App.js 15:14-31
   @ ./src/js/index.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/js/index.js

  ERROR in ./src/js/components/App.js
  Module not found: Error: Can't resolve 'Preview' in '/home/qrs/Programming/FCC/fcc-markdown-previewer/src/js/components'
   @ ./src/js/components/App.js 19:15-33
   @ ./src/js/index.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/js/index.js

package.json

  fcc-markdown-previewer/
  ├── package.json
  ├── package-lock.json
  ├── src
  │   ├── css
  │   │   ├── App.scss
  │   │   ├── Editor.scss
  │   │   ├── main.scss
  │   │   └── Preview.scss
  │   ├── index.pug
  │   └── js
  │       ├── actions
  │       ├── components
  │       │   ├── App.js
  │       │   ├── Editor.js
  │       │   └── Preview.js
  │       ├── constants
  │       ├── containers
  │       ├── index.js
  │       └── reducers
  └── webpack.config.js

webpack.config.js

  "scripts": {
    "dev": "webpack-dev-server --watch --mode development --hot",
    "prod": "webpack --mode production"
  },

App.js

  const webpack = require('webpack');
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: "./src/js/index.js",
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: [
            {
              loader: 'pug-loader'
            }
          ]
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                'env',
                'react'
              ]
            }
          }
        },
      ]
    },
    target: "web",
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Markdown Previewer',
        hash: true,
        template: './src/index.pug'
      })
    ]
  }

Answer 1

Editor.js文件与App.js文件位于同一目录中，因此您需要相对于当前目录导入它：

import "../../css/App.scss";
import React, { Component, PropTypes } from "react";
import Editor from "./Editor";
import Preview from "./Preview";

class App extends Component {
  render() {
    return (
      <div>
        <Editor />
        <Preview />
      </div>
    );
  }
}

export default App;

Answer 2

除了@Tholle答案，还要检查您是否正在导出组件：

class Editor extends Component {
  ...
  render() {
    return (...);
  }
}

export default Editor;

找不到Webpack错误模块

2 个答案: