javascript - Webpack cannot find module -
i'm new on webpack , i'd use third party react component in project. installed componet need , dir node_modules created , project's tree 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 component) | |--react-dom | |--webpack |--.babelrc |--bundle.js (empty) |--index.html |--index.js |--package.json |--webpack.config.js some file used browserify gave me same error...
my index.html 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 this:
import bigcalendar 'react-big-calendar'; import moment 'moment'; bigcalendar.momentlocalizer(moment); reactdom.render(<bigcalendar events={myeventslist} startaccessor='startdate' endaccessor='enddate' />, document.getelementbyid('content')); and webpack.config.js 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 run command webpack root project gave me 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 config file of webpack?
1.delete node_modules folder.
2.then npm install
3.change code in index.js this
import {render} 'react-dom'; import react 'react'; import bigcalendar 'react-big-calendar'; import moment '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 should put bundle.js body
<body> <div id="content"></div> <script src="bundle.js" type="text/javascript"></script> </body>
Comments
Post a Comment