Webpack无法找到模块

问题描述：

我是新来的webpack，我想在我的项目中使用第三方反应组件。我安装我需要的和及部件被node_modules创建的目录和我的项目的树看起来像：Webpack无法找到模块

reactcalendar 
    |--node_modules 
    | |--.bin 
    | |--babel-cli 
    | |--babel-core 
    | |--babel-preset-es2015 
    | |--babel-preset-react 
    | |--babelify 
    | |--file-loader 
    | |--moment 
    | |--react 
    | |--react-big-calendar (the third party component) 
    | |--react-dom 
    | |--webpack 
    |--.babelrc 
    |--bundle.js (empty) 
    |--index.html 
    |--index.js 
    |--package.json 
    |--webpack.config.js

用于browserify一些文件，但它给了我同样的错误......

我指数html的这个样子的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>React Calendar</title> 
    <script src="bundle.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="content"></div> 
</body> 
</html>

我index.js这个样子的：

import BigCalendar from 'react-big-calendar'; 
import moment from 'moment'; 
BigCalendar.momentLocalizer(moment); 

ReactDOM.render(<BigCalendar 
    events={myEventsList} 
    startAccessor='startDate' 
    endAccessor='endDate' 
/>, document.getElementById('content'));

而且我webpack.config.js这个样子的：

module.exports = { 
    context: __dirname, 

    output: { 
     filename: "bundle.js", 
     path: __dirname 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loaders: ["babel-loader"] 
      }, 
      { 
       test: /\.html$/, 
       loader: "file?name=[name].[ext]", 
      } 
     ] 
    }, 

    entry: { 
     javascript: "./index.js", 
     html: "./index.html" 
    } 
}

当我运行命令webpack到我的根项目它给了我这个错误：

C:\Users\ernest\PhpstormProjects\reactcalendar>webpack 
Hash: ebfe4ff0eeeaed3060c6 
Version: webpack 1.13.1 
Time: 12753ms 
    Asset  Size Chunks    Chunk Names 
index.html 231 bytes   [emitted] 
bundle.js  469 kB 0, 1 [emitted] html, javascript 
    + 105 hidden modules 

ERROR in ./index.js 
Module not found: Error: Cannot resolve module 'react-big-calendar' in C:\Users\ernest\PhpstormProjects\reactcalendar 
@ ./index.js 3:24-53

也许我是错的配置webpack文件？

你能提供回购吗？ –

检查react-big-calendar模块并查看该模块是否默认导出。如果不是，则必须从'react-big-calendar''导入为import *作为BigCalendar。也许它有效 –

@Utro你的意思是第三方反应组件的回购？如果是的话：https://github.com/intljusticemission/react-big-calendar.git –

答

1.删除node_modules文件夹。

2.然后npm install

3.Change你的代码中index.js这个

import {render} from 'react-dom'; 
import React from 'react'; 
import BigCalendar from 'react-big-calendar'; 
import moment from 'moment'; 

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment)); 
const myEventsList = [{'event':'test2'},{'event':'test1'},{'event':'test3'}] 

render(<BigCalendar 
    events={myEventsList} 
    startAccessor='startDate' 
    endAccessor='endDate' 
/>, document.getElementById('content'));

4.in的index.html，你应该把bundle.js成体

<body> 
    <div id="content"></div> 
    <script src="bundle.js" type="text/javascript"></script> 
</body>

我是否必须重新安装其他模块，例如' babel-core，babel-preset-es2015，{...}'或者只是'react-big-calendar'？ –

当你删除node_modules文件夹时，你必须重新安装所有的mudules，通过'''npm install'''在控制台 –

是否解决问题？ –

Webpack无法找到模块

相关推荐