javascript - Webpack path argument is not a string - Stack Overflow

admin管理员组

文章数量:1296912

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 pile. 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.

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 pile. 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.

• javascript
• node.js
• webpack

Share Follow edited Jan 21, 2021 at 0:18 Jeremy Reed asked Jan 21, 2021 at 0:09 Jeremy ReedJeremy Reed 31911 gold badge77 silver badges2020 bronze badges 4

• add this: const path = require('path'); – Raxel21 Commented Jan 21, 2021 at 0:18
• I originally had that and was using "path.join(__dirname, 'dist')" for the path output, but that didn't work either. I also tried using it to specify the path to the app.js file. – Jeremy Reed Commented Jan 21, 2021 at 0:18
• You have not yet imported the path module, as shown here – Raxel21 Commented Jan 21, 2021 at 0:21
• Importing path is not required, and I already tried the exact way they have it in the link you specified and it still gives the same error. – Jeremy Reed Commented Jan 21, 2021 at 0:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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'],
          },
        },
      },
    ],
  },
};

本文标签： javascriptWebpack path argument is not a stringStack Overflow