CODEWITHSUNDEEP
javascriptjquerywebpackwebpack-2
doberkofler
doberkofler

Reputation: 10341

ES6 import of AMD (e.g. jQuery 3.1.1) module in webpack 2

I'm doing some testing with the latest and greatest webpack 2 version and came across a problem when trying to import jQuery 3.1.1 as a dependency. I simply used import {$} from 'jquery'; to import but the resulting bundle generated an exception TypeError: __webpack_require__.i(...) is not a function when executed. Using const $ = require('jquery'); works as expected. It was my understanding that with webpack 2 I'm allowed to use es6 imports (almost) independently of the format of the library.

webpack.config.js:

'use strict';

const path = require('path');
const webpack = require('webpack');

function config(env) {
    const PRODUCTION = env && typeof env.production !== 'undefined';

    const PLUGINS = [
        new webpack.DefinePlugin({
            DEVELOPMENT: JSON.stringify(!PRODUCTION),
            PRODUCTION: JSON.stringify(PRODUCTION)
        })
    ];

    if (PRODUCTION) {
        PLUGINS.push(new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                dead_code: true,
                unused: true,
            }
        }));
    }

    return {
        entry: {
            index: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/i,
                    include: /src/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                compact: false,
                                presets: [['es2015', {modules: false}]]
                            }
                        }
                    ]
                }
            ]
        },
        plugins: PLUGINS,
        devtool: 'source-map'
    };
}

module.exports = config;

Two questions:

Upvotes: 2

Views: 593

Answers (1)

doberkofler
doberkofler

Reputation: 10341

My mistake: I've used a named import instead of the default import.

Correct:

import $ from 'jquery';

Wrong:

import {$} from 'jquery';

Upvotes: 2

Related Questions