未捕获类型错误：无法访问属性“fn”，e未定义

问题描述 投票：0回答：1

所以我正在尝试为旧版 php 代码库安装 npm 包管理器。我能够通过 npm 成功安装我的代码库正在使用的一些库。我通过 webpack 编译它们，但经过测试，当我导入我的模块之一时，我得到 

Uncaught TypeError: can't access property "fn", e is undefined
。

虽然我在网上进行了研究，似乎大部分问题可能是由于 jquery 没有被初始化，但我确保它是并且它是全局可用的。但还是不行。

下面是我的 webpack 配置

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    core: './src/core/index.js',
    ui: './src/ui/index.js',
    data: './src/data/index.js',
    visualization: './src/visualization/index.js',
    utilities: './src/utilities/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: ['file-loader'],
      },
      {
        test: require.resolve('jquery'),
        use: [
          {
            loader: 'expose-loader',
            options: {
              exposes: ['$', 'jQuery']
            }
          }
        ]
      }
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    // new webpack.ProvidePlugin({
    //   $: 'jquery',
    //   jQuery: 'jquery',
    // }),
  ],
  mode: 'development',
  devtool: 'source-map',
};

这是我导入模块的文件（ui/index.js）

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';

import 'bootstrap-select/dist/css/bootstrap-select.css';
import 'bootstrap-select';

import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.css';
import 'bootstrap-datepicker';

import 'bootstrap-combobox';

import 'bootstrap-filestyle/src/bootstrap-filestyle';


import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';
import 'bootstrap-multiselect/dist/js/bootstrap-multiselect.js';

import 'bootstrap-sweetalert/dist/sweetalert.css';
import 'bootstrap-sweetalert/dist/sweetalert.min.js';

import 'bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css';
import 'bootstrap-switch';

import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';
import 'bootstrap-tagsinput';

import 'bootstrap-validator/dist/validator.js';


import 'font-awesome/css/font-awesome.css';

import 'jasny-bootstrap/dist/css/jasny-bootstrap.css';
import 'jasny-bootstrap/dist/js/jasny-bootstrap.js';

import 'jquery-ui/themes/base/all.css';
import 'jquery-ui/ui/widgets/datepicker';

我在其中制作了一个 test.php 文件来测试它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Feature Test</title>


    <link rel="stylesheet" href="./dist/ui.css">
</head>
<body>
<h1>Full Feature Test</h1>


<div id="highcharts-pie-container" style="width: 80%; height: 400px; margin: 0 auto;"></div>


<p>Date Picker Example:</p>
<input type="text" id="datepicker" class="form-control" style="width: 200px; margin-bottom: 20px;">


<p>Bootstrap Select Example:</p>
<select class="selectpicker" data-style="btn-info" multiple title="Choose one or more">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


<p>Bootstrap Multiselect Example:</p>
<select id="example-multiselect" multiple="multiple" class="multiselect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


<p>Bootstrap Switch Example:</p>
<input type="checkbox" id="switch" checked data-toggle="switch">


<p>Bootstrap Tags Input Example:</p>
<input type="text" value="Amsterdam,Washington,Sydney" data-role="tagsinput">


<p>Jasny Bootstrap File Upload Example:</p>
<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="input-group">
        <div class="form-control" data-trigger="fileinput">
            <i class="glyphicon glyphicon-file fileinput-exists"></i>
            <span class="fileinput-filename"></span>
        </div>
        <span class="input-group-addon btn btn-default btn-file">
            <span class="fileinput-new">Select file</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="...">
        </span>
        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>

<?php
echo "<p>Current Time: " . date("Y-m-d H:i:s") . "</p>";
?>
<script src="dist/ui.bundle.js"></script>


<script>


</script>
</body>
</html>

任何建议都会有帮助

问题由此产生

import 'bootstrap-multiselect/dist/js/bootstrap-multiselect.js';
我试图确保jquery首先加载它，但它不起作用，当我导入我的
Uncaught TypeError: can't access property "fn", e is undefined
时我不断得到
ui.bundle.js

javascript php jquery webpack bootstrap-multiselect
1个回答
0
投票

此错误的可能原因：

Uncaught TypeError: Cannot read property 'fn' of undefined

对文件地址的引用无效或文件丢失。 对 Jquery 的重复引用。 覆盖第三方库中 Jquery 的 $ 符号。 在插入 Jquery 之前使用 Jquery 函数。 在 jquery 中的 WINDOW 元素上使用不推荐使用的加载、错误、卸载语法，而不使用 on

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.