webpack 에 jquery가 두가지 버전이 들어갈때 문제

문제 상황

  각 package.json을 보면

  superset 은 jquery 3.1.1

  fullcalendar는 jquery 3.3.1

  을 사용하고 있으며

  webpack 으로 묶으면 두가지 버전이 다 들어가있음

  

  react에서 앙래와 같이 사용하면..

import React from 'react';

import $ from 'jquery';

import 'moment';

import 'fullcalendar';

import 'fullcalendar/dist/fullcalendar.min.css';

export default class EventCalendarContainer extends React.PureComponent {

  componentDidMount() {

    const div = $('#evt-calendar');

    div.fullCalendar();   // <-- 에러 발생 : fullCalendar 함수가 없음.

  }

  render() {

    return (

      <div id="evt-calendar">

        calendar test

      </div>

    );

  }

}

에러 발생 : 

실제 entry 파일(파일명.hash.entry.js) 에 두가지 버전이 다 들어가 있고...

jquery가 두번 초기화 되면서 fullCalendar의 "$.fn.fullCalendar = function (options) " 가 없어져버림..

  1. jquery 3.1.1 초기화

  2. jquery에 $.fn.fullCalendar 패치 됨

  3. jquery 3.3.1 초기화 되면서 $.fn.fullCalendar 패치가 없는 상태가 되어버림

  4. 소스에서 fullCalendar 함수를 찾지 못해 에러 발생

EventCalendarContainer.jsx:11 Uncaught TypeError: div.fullCalendar is not a function

    at EventCalendarContainer.componentDidMount (Test.jsx:11)

    at ReactCompositeComponent.js:262

    at measureLifeCyclePerf (ReactCompositeComponent.js:73)

    at ReactCompositeComponent.js:261

    at CallbackQueue.notifyAll (CallbackQueue.js:74)

    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:78)

    at ReactReconcileTransaction.closeAll (Transaction.js:207)

    at ReactReconcileTransaction.perform (Transaction.js:154)

    at batchedMountComponentIntoNode (ReactMount.js:124)

    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)

해결한 방법 : 

  webpack.config.js 파일 수정

  resolve alias 추가

  

const config = {

  ...생략...

  resolve: {

    extensions: [

      '.js',

      '.jsx',

    ],

    alias: {

      webworkify: 'webworkify-webpack',

      jquery: path.resolve(path.join(__dirname, 'node_modules', 'jquery')),

    },

  },