Javascript 网页包找不到模块_Javascript_Reactjs_Webpack

Javascript 网页包找不到模块

javascript reactjs webpack

Javascript 网页包找不到模块,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我是网页新手，我想在我的项目中使用第三方react组件。我安装了我需要的组件，创建了dirnode\u modules，我的项目树如下所示： reactcalendar |--node_modules | |--.bin | |--babel-cli | |--babel-core | |--babel-preset-es2015 | |--babel-preset-react | |--babelify | |--file-loade

我是网页新手，我想在我的项目中使用第三方react组件。我安装了我需要的组件，创建了dir

node\u modules

，我的项目树如下所示：

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

一些文件被用于浏览，但它给了我同样的错误

我的index.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>

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'));

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

可能我对网页包的配置文件有误？

1.删除节点\u模块文件夹

2.然后

npm安装

3.将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'));

从'react dom'导入{render}；
从“React”导入React；
从“react big calendar”导入BigCalendar；
从“力矩”中导入力矩；
BigCalendar.setLocalizer（BigCalendar.momentLocalizer（矩））；
const myEventsList=[{'event'：'test2'}，{'event'：'test1'}，{'event'：'test3'}]
render（，document.getElementById（'content'））；

4.在index.html中，您应该将bundle.js放入body中

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

我没有使用React，但是通过在

tsconfig.json

中设置

模块字段，从UMD
到AMD
解决了我的问题
{
  "compilerOptions": {
    "module": "AMD",
    "target": "ES5",
    "declaration": true,
    "outDir": "./dist",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ]
}

您可以提供repo吗？检查react big calendar模块，看看该模块是否作为默认模块导出。如果不是，则必须从“react big calendar”（反应大日历）
导入为import*作为大日历。也许是吧works@Utro你是说第三方回购协议？如果是：我指的是这个项目，为了test@Utro这就是我是否必须重新安装其他模块，如babel core、babel-preset-es2015、{…}
或只是react big calendar
？当您删除节点模块文件夹时，您必须通过控制台中的npm install
重新安装所有mudules