Loading Jquery with Webpack

Question

I have written a npm package (call it ABC) that I am testing out in a create react app. This package uses Webpack. My package also depends upon another package (call it DEF) that depends upon Jquery. When I load up my create react app I see this error:

DEF.min.js:1 Uncaught TypeError: n.$ is not a function

I suspect that this means that my webpack.config.js file is improperly configured.

//webpack.config.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  externals: {
    jquery: 'jQuery',
    $: 'jQuery'
  },
  entry: {
    bundle: "./app/index.js"
  },
  output: {
    path: path.join(__dirname, "dist"),
    // [name] interpolates an entry point name (bundle, vendor, etc)
    // [chunkhash] interpolates cache busting hash
    filename: "[name].[chunkhash].js"
  },
  module: {
    rules: [    
      // {
      //   test: require.resolve('jquery'),
      //   use: [{
      //     loader: 'expose-loader',
      //     options: 'jQuery'
      //   },{
      //     loader: 'expose-loader',
      //     options: '$'
      //   }]
      // },
  {
    use: "babel-loader",
    test: /\.js$/,
    exclude: /node_modules/
  },
  {
    use: ["file-loader"],
    test: /\.(png|jpg|gif|svg)$/
  },
  {
    use: ["url-loader"],
    test: /\.(eot|svg|ttf|woff|woff2)$/
  }
]


},
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      "$": "jquery",
      "jQuery": "jquery",
      "jquery": "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery"
  }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ["manifest"]
    }),
    // This plugin automatically injects scripts into the
    // head of index.html so we don't have to manually
    // manage them.
    new HtmlWebpackPlugin({
      template: "app/index.html"
    }),

    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
    })
  ],
  devtool: 'source-map',
  // webpack-dev-server configuration
  devServer: {

    host: "0.0.0.0",
    port: 9000,

    public: "localhost",
    watchOptions: {
      ignored: /node_modules/
    }
  }

};

I have tried using the jquery the examples from the official Webpack documentation but have had no luck:

https://webpack.js.org/configuration/externals/#externals https://webpack.js.org/loaders/expose-loader/#examples

Answer 1

I have come to solve my own issue with a trivial solution. When I was using package DEF inside javascript files in my ABC package, I was including it via the import statement like so: import 'DEF';. Simply changing this to require ('DEF'); was the solution. At the moment I am investigating why this made all the difference. It should be noted that I did not need to configure my ABC's webpack configuration to handle the javascript so I have since removed the providerPlugin and externals object that accounted for the jQuery.

This helps to explain why this is the case.