Webpack не найден модуль

Я новичок в webpack, и я хотел бы использовать сторонний компонент реакции в своем проекте. Я установил CompoNet, что мне нужно и реж 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

можете ли вы предоставить репо? –

проверьте в модуле response-big-calendar и посмотрите, экспортирован ли этот модуль по умолчанию или нет. если нет, то вам нужно импортировать как «import» как BigCalendar из «response-big-calendar». Может быть, он работает –

@Utro Вы имеете в виду репо третьего компонента реакции? если да: https://github.com/intljusticemission/react-big-calendar.git –

1. удалите папку node_modules.

2.Then 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.В 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, {...} 'или просто' response-big-calendar'? –

, когда вы удалили папку node_modules, вам нужно переустановить все mudules, через '' 'npm install' '' в консоли –

Решить проблему? –

Webpack не найден модуль

ответ

Смежные вопросы