I'm new on webpack and I'd like to use third party react ponent in my project. I installed the ponet that i need and the dir node_modules was created and my project's tree look like:
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 ponent)
| |--react-dom
| |--webpack
|--.babelrc
|--bundle.js (empty)
|--index.html
|--index.js
|--package.json
|--webpack.config.js
Some file was used for browserify but it gave me the same error...
My index.html look like this:
<!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>
My index.js look like this:
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'));
And my webpack.config.js look like this:
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"
}
}
When i run the mand webpack into my root project it gave me this error:
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
Maybe I'm wrong with the config file of webpack?
I'm new on webpack and I'd like to use third party react ponent in my project. I installed the ponet that i need and the dir node_modules was created and my project's tree look like:
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 ponent)
| |--react-dom
| |--webpack
|--.babelrc
|--bundle.js (empty)
|--index.html
|--index.js
|--package.json
|--webpack.config.js
Some file was used for browserify but it gave me the same error...
My index.html look like this:
<!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>
My index.js look like this:
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'));
And my webpack.config.js look like this:
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"
}
}
When i run the mand webpack into my root project it gave me this error:
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
Maybe I'm wrong with the config file of webpack?
Share edited Aug 31, 2016 at 9:07 Kokovin Vladislav 10.4k5 gold badges40 silver badges36 bronze badges asked Jun 28, 2016 at 11:02 nene4496nene4496 611 gold badge1 silver badge7 bronze badges 9- can you provide repo? – Kokovin Vladislav Commented Jun 28, 2016 at 11:14
-
check into the react-big-calendar module and see if that module is exported as default or not. if not than you have to import as
import * as BigCalendar from 'react-big-calendar'. Maybe it works – Shubham Khatri Commented Jun 28, 2016 at 11:15 - @Utro Do you mean the repo of the third party react ponent? if yes: github./intljusticemission/react-big-calendar.git – nene4496 Commented Jun 28, 2016 at 12:06
- i mean this project, in order to test – Kokovin Vladislav Commented Jun 28, 2016 at 12:06
- @Utro this is the link – nene4496 Commented Jun 28, 2016 at 12:44
2 Answers
Reset to default 51.delete node_modules folder.
2.then npm install
3.Change your code in index.js to this
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 you should put bundle.js into body
<body>
<div id="content"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
I'm not using React, but my problem was solved by setting the module field in tsconfig.json from UMD to AMD.
{
"pilerOptions": {
"module": "AMD",
"target": "ES5",
"declaration": true,
"outDir": "./dist",
"moduleResolution": "node"
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*"
]
}