Translate

[Webpack] jQuery Plugin 추가 시 'Cannot read property 'fn' of undefined' 에러






개발환경 - JHipster: 4.13.1 (Spring Boot + Angular 5)





bootstrap-wysiwyg jQuery Plugin 설치 시 아래와 같은 에러가 발생했다.




Uncaught TypeError: Cannot read property 'fn' of undefined
    at eval (webpack-internal:///./node_modules/bootstrap-wysiwyg/src/bootstrap-wysiwyg.js:329)
    at eval (webpack-internal:///./node_modules/bootstrap-wysiwyg/src/bootstrap-wysiwyg.js:333)
    at Object../node_modules/bootstrap-wysiwyg/src/bootstrap-wysiwyg.js (vendor.bundle.js:798)
    at __webpack_require__ (manifest.bundle.js:713)
    at fn (manifest.bundle.js:118)
    at Object.eval (webpack-internal:///./src/main/webapp/app/service-operation/app/app-version-detail.component.ts:15)
    at eval (webpack-internal:///./src/main/webapp/app/service-operation/app/app-version-detail.component.ts:235)
    at Object../src/main/webapp/app/service-operation/app/app-version-detail.component.ts (main.bundle.js:438)
    at __webpack_require__ (manifest.bundle.js:713)
    at fn (manifest.bundle.js:118)







해경방법
1004lucifer
webpack 설정을 아래와 같이 변경하여 이슈를 해결하였다.
(참고 - https://webpack.js.org/plugins/provide-plugin/)

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rxPaths = require('rxjs/_esm5/path-mapping');
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");

const utils = require('./utils.js');

module.exports = (options) => ({
    resolve: {
        extensions: ['.ts', '.js'],
        modules: ['node_modules'],
        alias: rxPaths()
    },
    stats: {
        children: false
    },
    module: {
        rules: [
            { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    minimize: true,
                    caseSensitive: true,
                    removeAttributeQuotes:false,
                    minifyJS:false,
                    minifyCSS:false
                },
                exclude: ['./src/main/webapp/index.html']
            },
            {
                test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
                loaders: ['file-loader?hash=sha512&digest=hex&name=content/[hash].[ext]']
            },
            {
                test: /manifest.webapp$/,
                loader: 'file-loader?name=manifest.webapp!web-app-manifest-loader'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: `'${options.env}'`,
                VERSION: `'${utils.parseVersion()}'`,
                DEBUG_INFO_ENABLED: options.env === 'development',
                // The root URL for API calls, ending with a '/' - for example: `"http://www.jhipster.tech:8081/myservice/"`.
                // If this URL is left empty (""), then it will be relative to the current context.
                // If you use an API server, in `prod` mode, you will need to enable CORS
                // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
                SERVER_API_URL: `''`
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'polyfills',
            chunks: ['polyfills']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            chunks: ['main'],
            minChunks: module => utils.isExternalLib(module)
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['polyfills', 'vendor'].reverse()
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['manifest'],
            minChunks: Infinity,
        }),
        /**
         * See: https://github.com/angular/angular/issues/11580
         */
        new webpack.ContextReplacementPlugin(
            /(.+)?angular(\\|\/)core(.+)?/,
            utils.root('src/main/webapp/app'), {}
        ),
        new CopyWebpackPlugin([
            { from: './node_modules/swagger-ui/dist/css', to: 'swagger-ui/dist/css' },
            { from: './node_modules/swagger-ui/dist/lib', to: 'swagger-ui/dist/lib' },
            { from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'swagger-ui/dist/swagger-ui.min.js' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/favicon.png', to: 'favicon.png' },
            { from: './src/main/webapp/manifest.webapp', to: 'manifest.webapp' },
            // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' }
        ]),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': "jquery"
        }),
        new MergeJsonWebpackPlugin({
            output: {
                groupBy: [
                    { pattern: "./src/main/webapp/i18n/ko/*.json", fileName: "./i18n/ko.json" },
                    { pattern: "./src/main/webapp/i18n/en/*.json", fileName: "./i18n/en.json" }
                    // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
                ]
            }
        }),
        new HtmlWebpackPlugin({
            template: './src/main/webapp/index.html',
            chunksSortMode: 'dependency',
            inject: 'body'
        })
    ]
});








원인


일반적인 jQuery Plugin 의 경우에는 아래와 같다.

node_modules/bootstrap/dist/js/bootstrap.js
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */

 ...
 
+function ($) {
  'use strict';

  ...

  $(window).on('load', function () {
    $('[data-spy="affix"]').each(function () {
      var $spy = $(this)
      var data = $spy.data()

      data.offset = data.offset || {}

      if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom
      if (data.offsetTop    != null) data.offset.top    = data.offsetTop

      Plugin.call($spy, data)
    })
  })

}(jQuery);




Error 가 발생한 jQuery Plugin 의 소스는 아래와 같았다.
1004lucifer
node_modules/bootstrap-wysiwyg/src/bootstrap-wysiwyg.js
/* jshint browser: true */

( function( window, $ )
{
    "use strict";

 ...

     $.fn.wysiwyg = function( userOptions ) {
        var wysiwyg = new Wysiwyg( this, userOptions );
     };

} )( window, window.jQuery );





사용하려는 jQuery Plugin 이 예전형식의 jQuery Load 형식을 취해서 오류가 발생을 했었다.
jQuery Plugin 소스를 열어보지 않았다면 알 수 없었을 상황..ㅠ
한참동안 삽질하다 겨우 찾았다.


댓글