javascript - 如何在我的 React 项目中导入 FullCalendar？
问题描述
当我TypeError: __webpack_require__.i(...) is not a function尝试import FullCalendar from '@fullcalendar/react' 使用 webpack 配置的项目时出现错误。我尝试操作 webpack.config.dev.js 但无法弄清楚如何以正确的方式实现它。每当我尝试从 @fullcalendar 导入任何组件时，它都会向我抛出 webpack 错误
webpack.config.dev.js：
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
import CopyWebpackPlugin from 'copy-webpack-plugin';
export default {
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
entry: [
// must be first entry to properly set public path
'babel-polyfill',
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
// new CopyWebpackPlugin([ { from: './src/scripts', to: 'assets' } ]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
// template: 'src/index.ejs',
// minify: {
// removeComments: true,
// collapseWhitespace: true
// },
// inject: true
// }),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
noInfo: true, // set to false to see a list of every file being bundled.
options: {
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/',
postcss: () => [autoprefixer],
}
})
],
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'] }
]
}
};
Package.json File:
{
"name": "MedFix",
"version": "1.0.0",
"description": "Project Tracking and Management",
"engines": {
"npm": ">=3"
},
"scripts": {
"start": "npm-run-all --parallel open:src",
"open:src": "babel-node tools/srcServer.js",
"test": "mocha -w tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"open:dist": "babel-node tools/distServer.js",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist build:html",
"build": "babel-node tools/build.js && npm run open:dist",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
"author": "789",
"license": "123",
"dependencies": {
"@fullcalendar/bootstrap": "4.1.0",
"@fullcalendar/core": "4.1.0",
"@fullcalendar/daygrid": "4.1.0",
"@fullcalendar/interaction": "4.1.0",
"@fullcalendar/list": "4.1.0",
"@fullcalendar/react": "^4.1.0",
"@fullcalendar/timegrid": "4.1.0",
"@material-ui/core": "4.0.1",
"auth0-js": "7.6.1",
"auto-bind": "1.2.0",
"awesomplete": "1.1.2",
"axios": "0.16.2",
"babel-helper-bindify-decorators": "6.24.1",
"block-ui": "2.70.1",
"bootstrap-daterangepicker": "3.0.3",
"bootstrap-tagsinput": "0.7.1",
"cheerio": "1.0.0-rc.2",
"color": "2.0.0",
"copy-webpack-plugin": "4.0.1",
"country-currency-map": "1.0.9",
"country-data": "0.0.31",
"country-list": "2.1.0",
"currency-codes": "1.5.0",
"currency-symbol-map": "4.0.4",
"download-url-file": "0.0.2",
"downloadjs": "1.4.7",
"enzyme": "2.6.0",
"expect": "1.20.2",
"express": "4.15.3",
"fs": "0.0.1-security",
"fullcalendar": "3.10.0",
"geo-tz": "4.0.2",
"jquery": "3.2.1",
"jquery-validation": "1.16.0",
"jsdom": "11.1.0",
"mini-css-extract-plugin": "0.7.0",
"mocha": "3.4.2",
"mock-local-storage": "1.0.3",
"moment": "2.18.1",
"moment-timezone": "0.5.21",
"npm": "4.6.1",
"object-assign": "4.1.0",
"opentok-react": "0.7.0",
"path": "0.12.7",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-autobind": "1.0.6",
"react-autocomplete": "1.8.1",
"react-autosize-textarea": "0.4.8",
"react-autosuggest": "9.3.2",
"react-big-calendar": "0.14.0",
"react-block-ui": "1.1.1",
"react-bootstrap-daterangepicker": "3.4.0",
"react-bootstrap-datetimerangepicker": "2.0.4",
"react-bootstrap-table": "4.0.3",
"react-bootstrap-time-picker": "1.0.3",
"react-bootstrap-typeahead": "3.2.0",
"react-bootstrap-validation": "0.1.11",
"react-bootstrap-xeditable": "0.2.7",
"react-calendar": "2.14.0",
"react-checkbox-group": "4.0.1",
"react-ckeditor-component": "1.0.7",
"react-confirm-alert": "2.0.2",
"react-cookie-consent": "1.7.0",
"react-credit-card-input": "1.0.9",
"react-currency-input": "1.3.4",
"react-datepicker": "1.5.0",
"react-device-detect": "1.6.2",
"react-display-name": "0.2.4",
"react-dom": "15.4.1",
"react-dropzone": "4.2.7",
"react-edit-inline": "1.0.8",
"react-escape-html": "1.0.5",
"react-geocode": "0.1.2",
"react-google-autocomplete": "1.0.18",
"react-html-parser": "2.0.2",
"react-idle": "3.0.0",
"react-imask": "3.4.0",
"react-input-mask": "0.9.1",
"react-js-pagination": "3.0.2",
"react-ladda": "5.0.7",
"react-loadable": "5.3.1",
"react-loading": "2.0.2",
"react-maskedinput": "4.0.1",
"react-modal-bootstrap": "1.1.1",
"react-moment": "0.7.0",
"react-notification-system": "0.2.15",
"react-paginate": "5.0.0",
"react-pdf": "3.0.5",
"react-pull-to-refresh": "1.1.2",
"react-redux": "5.0.1",
"react-redux-toastr": "7.2.6",
"react-reorder": "3.0.0-alpha.6",
"react-responsive-modal": "2.0.1",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-rte": "0.11.0",
"react-scripts": "1.1.4",
"react-scrollable-anchor": "0.6.1",
"react-select": "1.0.0-rc.4",
"react-signature-pad-wrapper": "0.0.9",
"react-star-rating-component": "1.4.1",
"react-stripe-checkout": "2.6.3",
"react-switch": "3.0.4",
"react-tag-input": "5.0.2",
"react-tagsinput": "3.17.0",
"react-text-mask": "5.1.0",
"react-textarea-count": "1.0.3",
"react-times": "3.0.0",
"react-timezone": "2.1.0",
"react-toastify": "4.0.1",
"react-tooltip": "3.6.1",
"react-typeahead": "2.0.0-alpha.8",
"react-validation": "3.0.7",
"react-x-editable": "0.0.5-beta",
"reactstrap": "6.0.1",
"recharts": "1.0.1",
"redux": "3.6.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.1.0",
"sortablejs": "1.7.0",
"sweetalert": "1.1.3",
"text-mask-addons": "3.7.1",
"timezoner": "0.2.0",
"toastr": "2.1.2",
"video-react": "0.13.6"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.0.0-beta.51",
"@babel/preset-react": "^7.0.0-beta.51",
"autoprefixer": "6.5.4",
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-loader": "6.2.10",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-polyfill": "6.20.0",
"babel-preset-env": "1.3.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.16.0",
"browser-sync": "2.18.5",
"chalk": "1.1.3",
"compression": "1.6.2",
"compression-webpack-plugin": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"css-loader": "0.26.1",
"datatables.net": "1.10.16",
"enzyme": "2.6.0",
"express": "4.15.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.24.1",
"identity-obj-proxy": "3.0.0",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "4.12.0",
"npm-run-all": "3.1.2",
"open": "0.0.5",
"opn-cli": "^3.1.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-immutable-state-invariant": "1.2.4",
"redux-logger": "3.0.6",
"replace": "0.3.0",
"riek": "1.1.0",
"rimraf": "2.5.4",
"sass-loader": "6.0.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.1.1",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.17.1"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
},
"babel": {
"presets": [
"react",
"stage-1"
],
"env": {
"development": {
"presets": [
"env",
"react-hmre"
]
},
"production": {
"presets": [
[
"env",
{
"es2015": {
"modules": false
}
}
]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"env"
]
}
}
}
}
解决方案
推荐阅读
- php - Facebook 目标搜索：搜索一个城市的所有邮政编码
- python - Azure Python 部署 - Spacy nomodule 发现异常
- powershell - 具有多个 smtps 时提取主 SMTP 的 Powershell 问题
- java - 循环外临时数组的空间复杂度
- r - 为什么在手动计算和使用 stat_summary 时这两个平均值不匹配？
- f# - 有没有更好的方法在 F#/OCaml 中编写交换函数？
- flutter - 如何在颤动的两个按钮之间留出空间？
- python-3.x - 网页抓取时遍历金融时报页面
- html - 打印html消息几秒钟
- css - 将 sass 变量应用于父级的所有元素