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文件？

來源

2016-06-28 Ernest Fish Moro

你能提供回購嗎？ –

檢查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>

來源

2016-06-28 14:58:53

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

當你刪除node_modules文件夾時，你必須重新安裝所有的mudules，通過'''npm install'''在控制檯 –

是否解決問題？ –

Webpack無法找到模塊

回答

相關問題