Webpack path argument is not a string

Question

I have been racking my brains trying to figure out why Webpack is saying for the entry module "app", the path is not a string. It's not exactly the same as the other error's I've read on stackoverflow, which is why it leads me to ask the question myself.

I am using the latest Webpack (5.16) and Webpack-cli(4.4) and trying to build this to run on Node.

I have the following webpack.config.js, in which I only added the stats section to try and debug the issue:

'use strict'

 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 module.exports = {
   context: __dirname,
   stats: {
     logging: true,
     loggingDebug: [/webpack/],
     loggingTrace: true,
     errors: true,
     errorStack: true,
     errorDetails: true,
   },
   entry: {
     app: './js/app.js'
   },
   optimization: {
     minimize: true
   },
   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
       Popper: ['popper.js', 'default'],
     }),
     new MiniCssExtractPlugin(),
   ],
   output: {
     publicPath: '/',
     path: __dirname + '/dist',
     filename: '[name].bundle.js',
   },
   module: {
     rules: [
        { 
         test: /\.m?js$/, exclude: /(node_modules)/, 
         use: ['babel-loader', { options: { presets: ['@babel/preset-env'] } }]
        },
        {
         test: /\.(scss)$/,
         use: [{
           loader: 'style-loader',
         }, {
           loader: 'css-loader',
         }, {
           loader: 'postcss-loader',
           options: {
             plugins: function () {
               return [
                 require('precss'),
                 require('autoprefixer')
               ]
             }
           }
         }, {
            loader: 'sass-loader'
         }]
       },
       {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader']
       },
       { 
        test: /\.(woff|woff2)$/, 
        use: ['url-loader', { options: { limit: 5000 } } ] 
       },
       { 
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
        use: ['url-loader', { options: { limit: 10000, mimetype: 'application/octet-stream' } } ] 
       },
       { 
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
        use: ['url-loader', { options: { limit: 10000, mimetype: 'image/svg+xml' } } ] 
       },
       {
         test: require.resolve('jquery'),
         use: [{
           loader: 'expose-loader',
           options: {
             exposes: ['$','jQuery']
           }
         }]
       }
     ],
    },
  }

The following code in my app.js file:

 import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'counterup/jquery.counterup.js'
 import '../template/js/custom.js'
 import '../template/css/style.css'

Whenever I run webpack on this code, I always get the error:

 ERROR in app
 Module not found: Error: path argument is not a string
 ModuleNotFoundError: Module not found: Error: path argument is not a string
     at factory.create (/app/node_modules/webpack/lib/Compilation.js:1656:28)
     at hooks.factorize.callAsync (/app/node_modules/webpack/lib/NormalModuleFactory.js:708:13)
     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
     at hooks.resolve.callAsync (/app/node_modules/webpack/lib/NormalModuleFactory.js:272:22)
     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
     at err (/app/node_modules/webpack/lib/NormalModuleFactory.js:494:15)
     at err (/app/node_modules/webpack/lib/NormalModuleFactory.js:118:11)
     at resolveRequestArray (/app/node_modules/webpack/lib/NormalModuleFactory.js:557:8)
     at /app/node_modules/neo-async/async.js:2830:7
     at done (/app/node_modules/neo-async/async.js:2925:13)

What "path" is it even referring to here? I've tried everything from adding context, to changing the entry, to moving the app.js file, and removing everything but bootstrap from the app.js. Seems like no matter what I do, I cannot get it to actually compile. I took a look at the Webpack code, but the stack trace doesn't really provide any useful hints.

Any help would be greatly appreciated.

Answer 1

To simplify the code, we have removed some properties, and you were right, it is not necessary to import path.

Node: 14.15.1 Webpack: 5.16 Webpack-cli: 4.4

module.exports = {
  entry: {
    app: './js/app.js',
  },
  output: {
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          // you forgot to set the `loader` property
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};