SIA
Sapphire - Imagine a framework•5mo ago
Youssef

Error [ERR_REQUIRE_ESM]: require() of ES Module

So im getting this errror about 3 times for different packages 
Error when loading 'commands\Colors\average-colors.js': Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\color-thief-ts\dist\browser.js from dist\commands\Colors\average-colors.js not supported.
Instead change the require of browser.js in dist\commands\Colors\average-colors.js to a dynamic import() which is available in all CommonJS modules.

Error when loading 'dist\commands\Colors\color-info.js': Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules\mime\dist\src\index.js from dist\services\functions\Images.js not supported.
Instead change the require of index.js in dist\services\functions\Images.js to a dynamic import() which is available in all CommonJS modules.
de: 'ERR_REQUIRE_ESM'
}
Error when loading 'dist\commands\Colors\random-color.js': Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\mime\dist\src\index.js from ist\services\functions\Images.js not supported.
Instead change the require of index.js in ist\services\functions\Images.js to a dynamic import() which is available in all CommonJS modules.
  : 'ERR_REQUIRE_ESM'
}
Error when loading 'C:\Users\USER\Desktop\Kayla\dist\components\menus\colors.js': Error [ERR_REQUIRE_ESM]: require() of ES Modulea\node_modules\mime\dist\src\index.js fromdist\services\functions\Images.js not supported.
Instead change the require of index.js in ist\services\functions\Images.js to a dynamic import() which is available in all CommonJS modules.
 
Error when loading 'commands\Colors\average-colors.js': Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\color-thief-ts\dist\browser.js from dist\commands\Colors\average-colors.js not supported.
Instead change the require of browser.js in dist\commands\Colors\average-colors.js to a dynamic import() which is available in all CommonJS modules.

Error when loading 'dist\commands\Colors\color-info.js': Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules\mime\dist\src\index.js from dist\services\functions\Images.js not supported.
Instead change the require of index.js in dist\services\functions\Images.js to a dynamic import() which is available in all CommonJS modules.
de: 'ERR_REQUIRE_ESM'
}
Error when loading 'dist\commands\Colors\random-color.js': Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\mime\dist\src\index.js from ist\services\functions\Images.js not supported.
Instead change the require of index.js in ist\services\functions\Images.js to a dynamic import() which is available in all CommonJS modules.
  : 'ERR_REQUIRE_ESM'
}
Error when loading 'C:\Users\USER\Desktop\Kayla\dist\components\menus\colors.js': Error [ERR_REQUIRE_ESM]: require() of ES Modulea\node_modules\mime\dist\src\index.js fromdist\services\functions\Images.js not supported.
Instead change the require of index.js in ist\services\functions\Images.js to a dynamic import() which is available in all CommonJS modules.
Solution:
for color-thief-ts, read their readme: https://github.com/wh5938316/color-thief-ts it specifically says you need to import it differently for NodeJS. for mime it specifically says that as of v4 it only supports ES modules at the top of the README, and you're using CommonJS: https://github.com/broofa/mime...
Jump to solution
21 Replies
Youssef
YoussefOP•5mo ago
my tsconfig 
{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "rootDir": "./src",
    "baseUrl": "./src",
    "paths": {
      "@services/*": ["services/*"],
    },
    "outDir": "./dist",
    "removeComments": true,
    "esModuleInterop": true  ,
    "forceConsistentCasingInFileNames": true,
    "strict": true ,
    "alwaysStrict": true ,
    "noUncheckedIndexedAccess": false ,
    "skipLibCheck": true,
    "noImplicitAny": false,
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "rootDir": "./src",
    "baseUrl": "./src",
    "paths": {
      "@services/*": ["services/*"],
    },
    "outDir": "./dist",
    "removeComments": true,
    "esModuleInterop": true  ,
    "forceConsistentCasingInFileNames": true,
    "strict": true ,
    "alwaysStrict": true ,
    "noUncheckedIndexedAccess": false ,
    "skipLibCheck": true,
    "noImplicitAny": false,
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
package.json 
{
  "name": "kayla",
  "main": "dist/index",
  "scripts": {
    "start": "tsc && node .",
    "lint": "npx eslint src/* --fix",
    "format": "prettier --write .",
    "clean": "rimraf dist/"
  },
  "dependencies": {
    "@sapphire/framework": "^5.2.1",
    "discord.js": "^14.15.2",
  },
  "devDependencies": {
    "typescript": "^5.5.2"
  },
  "_moduleAliases": {
    "@services": "dist/services"
  }
}
{
  "name": "kayla",
  "main": "dist/index",
  "scripts": {
    "start": "tsc && node .",
    "lint": "npx eslint src/* --fix",
    "format": "prettier --write .",
    "clean": "rimraf dist/"
  },
  "dependencies": {
    "@sapphire/framework": "^5.2.1",
    "discord.js": "^14.15.2",
  },
  "devDependencies": {
    "typescript": "^5.5.2"
  },
  "_moduleAliases": {
    "@services": "dist/services"
  }
}
Node: v18.16.1
Youssef
YoussefOP•5mo ago
Index.ts file
No description
Youssef
YoussefOP•5mo ago
Client
No description
Solution
Favna
Favna•5mo ago
for color-thief-ts, read their readme: https://github.com/wh5938316/color-thief-ts it specifically says you need to import it differently for NodeJS. for mime it specifically says that as of v4 it only supports ES modules at the top of the README, and you're using CommonJS: https://github.com/broofa/mime
Favna
Favna•5mo ago
Changed tag to "Miscellaneous" because this is not Sapphire related
Youssef
YoussefOP•5mo ago
what module should i use in the tsconfig?
Favna
Favna•5mo ago
You dont change anything in your tsconfig. This is not related to tsconfig. This is related to packages being used, exactly as I described. This error occurs at runtime and it is therefore a nodejs error, typescript is only at build time
Youssef
YoussefOP•5mo ago
so what should i do? change the type in package.json to module?
Favna
Favna•5mo ago
read the readmes I told you about
Youssef
YoussefOP•5mo ago
alright ok i read that although can i ask you
Youssef
YoussefOP•5mo ago
are those good for a discord bot?
No description
Favna
Favna•5mo ago
you keep going back to tsconfig, I already told you, this is not TS related
Youssef
YoussefOP•5mo ago
nah i did what they did, just asking in general
Favna
Favna•5mo ago
in that case, sure, if you want to use CJS
Youssef
YoussefOP•5mo ago
what do you use?
Favna
Favna•5mo ago
ESM because it's the future, it comes with some minor downsides that you need to adjust your code for though. You seem like a beginner programmer so you may want to take it slowly still.
Youssef
YoussefOP•5mo ago
not beginner, but i hate those things about cjs and esm
Favna
Favna•5mo ago
sorry, I drew that conclusion from the problem you had and what the solution was (reading the readmes essentially)
Favna
Favna•5mo ago
there is a initialism in programming that basically answered your problem: https://en.wikipedia.org/wiki/RTFM
RTFM
RTFM is an initialism and internet slang for the expression "read the fucking manual" – typically used to reply to a basic question where the answer is easily found in the documentation, user guide, owner's manual, man page, online help, internet forum, software documentation or FAQ. Usage is variously viewed as a pointed reminder of etiquette t...
Youssef
YoussefOP•5mo ago
oh haha don't worry, i just hate setting up thing about tsconfig oh cool thanks
Youssef
YoussefOP•5mo ago
deep answers for deep questions :TrollFront:
No description
Want results from more Discord servers?
Add your server