Error: Cannot find module './undefined' with discord-buttons, discord.js, TypeScrpit and webpack

Question

I use TypeScript and Webpack for my Discord bot. It used to compile with no problems, until I tried to use discord-buttons.

I've found some questions and answers about discord.js, TypesScript and Webpack. But no one of them say something about discord-buttons.

The module.exports in my webpack config file looks like this:

entry: {
    index: {
      import: "./src/index.ts",
      dependOn: ["discord", "buttons"]
    },
    discord: "discord.js",
    buttons: "discord-buttons"
},
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
},
output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
},
module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    }, ],
},
target: "node",
externals: [nodeExternals()],

My index.ts file does nothing with discord-buttons but importing it and using disbut

import { Client, Message, MessageEmbed, TextChannel } from "discord.js"
import disbut from 'discord-buttons'

const token:string = `token`
const client: Client = new Client()
disbut(client)

client.login(token)

When I build with Webpack (in development mode), it says there is no error, but I get one when I run the index.bundle.js

> webpack --mode development --config webpack.config.dev.js

asset index.bundle.js 75.4 KiB [emitted] (name: index)
asset buttons.bundle.js 6.75 KiB [compared for emit] (name: buttons)
asset discord.bundle.js 6.72 KiB [compared for emit] (name: discord)
runtime modules 5.42 KiB 16 modules
built modules 62.7 KiB [built]
  cacheable modules 62.6 KiB
    modules by path ./src/modules/*.ts 48.5 KiB
      ./src/modules/CommandManager.ts 19.8 KiB [built] [code generated]
      ./src/modules/OutputManager.ts 2.05 KiB [built] [code generated]
      ./src/modules/LogManager.ts 3.59 KiB [built] [code generated]
      ./src/modules/FirebaseManager.ts 17.9 KiB [built] [code generated]
      ./src/modules/SpikeChannels.ts 5.17 KiB [built] [code generated]
    ./src/index.ts 11.8 KiB [built] [code generated]
    ./spike-database-firebase-admin-ETC.json 2.26 KiB [built] [code generated]
  external "discord.js" 42 bytes [built] [code generated]
  external "discord-buttons" 42 bytes [built] [code generated]
  external "fastest-levenshtein" 42 bytes [built] [code generated]
  external "firebase-admin" 42 bytes [built] [code generated]
webpack 5.46.0 compiled successfully in 4242 ms

> [email protected] bot
> node ./dist/index.bundle.js

node:internal/modules/cjs/loader:930
  throw err;
  ^

Error: Cannot find module './undefined'
Require stack:
- /home/eban/PATH_TO_PROJECT/dist/discord.bundle.js
- /home/eban/PATH_TO_PROJECT/dist/index.bundle.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:927:15)
    at Function.Module._load (node:internal/modules/cjs/loader:772:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.__webpack_require__.f.require (/home/eban/PATH_TO_PROJECT/dist/discord.bundle.js:157:28)
    at /home/eban/PATH_TO_PROJECT/dist/discord.bundle.js:84:40
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (/home/eban/PATH_TO_PROJECT/dist/discord.bundle.js:83:67)
    at Array.map (<anonymous>)
    at Function.__webpack_require__.X (/home/eban/PATH_TO_PROJECT/dist/discord.bundle.js:121:22) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/PATH_TO_PROJECT/dist/discord.bundle.js',
    '/home/PATH_TO_PROJECT/dist/index.bundle.js'
  ]
}

Answer 1

The problem seems to be that you added entry points for external modules, namely your discord and buttons entry points. Entry points should be for your own scripts, usually not externals. If you're not planning on running multiple processes, a single entry point is also all you need.