Webpack - TypeError: $ is not a function

Question

i am new to webpack and i am creating a react application using webpack. I am getting this error while compiling TypeError: $ is not a function.

I am not using jquery but my node modules include some third party libraries.

I was only able to find one related article to this problem but it related to jquery. Webpack - $ is not a function

Is there anything wrong with my webpack and babel config:

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env) => {
 console.log("WEBPACK ENV: ", env);

 const isDevMode = env !== "production";

 let config = {
  entry: ["./src/index.js"],
  output: {
   path: path.resolve(__dirname, "dist"),
   filename: "[name].[contenthash].js"
  },
  resolve: {
   extensions: [".js", ".jsx"]
  },
  plugins: [
   new CleanWebpackPlugin(),
   new FaviconsWebpackPlugin("./src/logo.png"),
   new HtmlWebpackPlugin({
    template: "./src/index.html",
    minify: {
     collapseInlineTagWhitespace: true,
     collapseWhitespace: true,
     removeComments: true,
     removeRedundantAttributes: true
    }
   }),
   new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css"
   })
  ],
  module: {
   rules: [
    {
     test: /\.scss$/,
     use: ["css-loader", "sass-loader"]
    },
    {
     test: /\.jsx?$/,
     exclude: /node_modules\/(?!(sdk1|sdk2)\/).*/,
     use: ["babel-loader"]
    },
    {
     test: /\.(ac3|gif|jpe?g|m4a|mp3|ogg|png|svg|otf)$/,
     loader: "file-loader",
     options: {
      outputPath: "./assets"
     }
    }
   ]
  },
  optimization: {
   minimize: true,
   minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
   splitChunks: {
    cacheGroups: {
     vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: "vendors",
      chunks: "all"
     }
    }
   }
  }
 };

 // Mode
 config.mode = isDevMode ? "development" : "production";

 // Dev Tools
 config.devtool = isDevMode ? "inline-source-map" : false;

 // Plugins
 if (!isDevMode) {
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 8181 }));
 }

 // Dev Server
 if (isDevMode) {
  config.devServer = {};
  config.devServer.disableHostCheck = true;
 }

 return config;
};

babel.config.js

module.exports = {
 plugins: [
  "@babel/plugin-syntax-dynamic-import",
  "@babel/plugin-transform-object-assign",
  [
   require.resolve("babel-plugin-module-resolver"),
   {
    root: ["./src/"],
    alias: {
     js: "./src/js",
     scss: "./src/scss",
     components: "./src/js/components",
     containers: "./src/js/containers",
     phaser_path: "./src/js/phaser",
     services: "./src/js/services",
     constants: "./src/js/constants"
    }
   }
  ]
 ],
 presets: [
  [
   "@babel/preset-env",
   {
    useBuiltIns: "usage",
    corejs: 3,
    modules: false,
    debug: true,
    targets: {
     browsers: [">0.25%", "ie >= 11"]
    }
   }
  ],
  [
   "@babel/preset-react",
   {
    development: true
   }
  ]
 ]
};

I think it is related to the html-webpack-plugin but i don't know for sure. Any help is appreciated.

Thanks

score 0 · Answer 1 · answered Apr 15 '20 at 17:36

I am currently using this as a workaround to polyfill for now as the useBuiltIns property is not working for me.

Installed the following packages: babel-polyfill, es6-promise, whatwg-fetch

npm i babel-polyfill

npm i --save-dev es6-promise whatwg-fetch

In webpack.config.js did these changes

Require es6-promise on top require("es6-promise").polyfill();
Add whatwg-fetch and babel-polyfill to the entry property in config like this
entry: ["whatwg-fetch", "babel-polyfill", "./src/index.js"]

Webpack - TypeError: $ is not a function

1 Answers1