search

SoftwareBrothers / adminjs

AdminJS is an admin panel for apps written in node.js
https://adminjs.co
MIT License
8.25k stars 664 forks source link

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\...\Desktop\...\server\node_modules\lodash-es\lodash.js require() of ES modules is not supported. #1405

Closed eakenbor closed 1 year ago

eakenbor commented 1 year ago

Contact Details

No response

What happened?

I installed the adminjs and I tried to use it like this:

//Nodejs v14

const AdminJS = require('adminjs')
const express = require('express')

And I got the following message:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\...\Desktop\...\server\node_modules\lodash-es\lodash.js
require() of ES modules is not supported.
require() of C:\Users\...\Desktop\...\server\node_modules\lodash-es\lodash.js from C:\Users\...\Desktop\...\server\node_modules\@tiptap\extension-bubble-menu\dist\index.cjs is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\...\Desktop\...\server\node_modules\lodash-es\package.json.

Please how can I solve this problem?

Bug prevalence

Every time

AdminJS dependencies version

6.8.3

What browsers do you see the problem on?

No response

Relevant log output

No response

Relevant code that's giving you issues

No response

FordeD commented 1 year ago

Yes I started getting the same error from yesterday too. AdminJS version 6.8.3.

2023-02-08 09:20:35 /app/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs:11
2023-02-08 09:20:35 var _lodashes = require('lodash-es');
2023-02-08 09:20:35                 ^
2023-02-08 09:20:35 
2023-02-08 09:20:35 Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/lodash-es/lodash.js from /app/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs not supported.
2023-02-08 09:20:35 Instead change the require of lodash.js in /app/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs to a dynamic import() which is available in all CommonJS modules.
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs:11:17)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/@tiptap/react/dist/tiptap-react.cjs.js:5:27)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/@adminjs/design-system/build/molecules/rich-text-editor/rich-text-editor.js:47:17)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/@adminjs/design-system/build/molecules/rich-text-editor/index.js:13:14)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/@adminjs/design-system/build/index.js:67:14)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/backend/utils/custom-views/get-component-html.js:19:21)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/backend/utils/custom-views/index.js:7:25)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/backend/utils/index.js:20:20)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/backend/adapters/resource/base-resource.js:10:14)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/backend/utils/resources-factory/resources-factory.js:8:44)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/adminjs.js:18:48)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/lib/index.js:9:39)
2023-02-08 09:20:35     at Object.<anonymous> (/app/node_modules/adminjs/index.js:2:23)
2023-02-08 09:20:35     at Object.adminjs (/app/admin.bundle.js:7213:18)
2023-02-08 09:20:35     at __webpack_require__ (/app/admin.bundle.js:7487:42)
2023-02-08 09:20:35     at ./src/server/admin/index.ts (/app/admin.bundle.js:92:35)
2023-02-08 09:20:35     at __webpack_require__ (/app/admin.bundle.js:7487:42)
2023-02-08 09:20:35     at /app/admin.bundle.js:7498:37
2023-02-08 09:20:35     at Object.<anonymous> (/app/admin.bundle.js:7500:12) {
2023-02-08 09:20:35   code: 'ERR_REQUIRE_ESM'
2023-02-08 09:20:35 }
2023-02-08 09:20:35 
2023-02-08 09:20:35 Node.js v19.6.0
konrad147 commented 1 year ago

I get the same error. My setup is a clean NestJS app

var _lodashes = require('lodash-es');
                ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js from /app/node_modules/.pnpm/@tiptap+extension-bubble-menu@2.0.0-beta.213_7rz66h33fpkvqmmazdnqczeig4/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs not supported.
dziraf commented 1 year ago

Can you share your package.jsons? I've just tried setting up an AdminJS project from scratch and it works fine for me:

const AdminJS = require('adminjs');
const express = require('express');
const AdminJSExpress = require('@adminjs/express');

const start = () => {
  const app = express();

  const admin = new AdminJS({
    rootPath: '/'
  });

  const adminRouter = AdminJSExpress.buildRouter(admin);

  app.use(admin.options.rootPath, adminRouter);

  app.listen(7070, () => {
    console.log('app started');
  });
}

start();
{
  "name": "adminjs-lodash-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@adminjs/express": "^5.1.0",
    "adminjs": "^6.8.3",
    "express": "^4.18.2",
    "express-formidable": "^1.2.0",
    "express-session": "^1.17.3",
    "tslib": "^2.5.0"
  }
}
konrad147 commented 1 year ago

Mine is:

{
  "name": "sample-app",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@adminjs/express": "^5.1.0",
    "@adminjs/mikroorm": "^2.0.0",
    "@adminjs/nestjs": "^5.1.0",
    "@mikro-orm/core": "^5.6.8",
    "@mikro-orm/nestjs": "^5.1.6",
    "@mikro-orm/postgresql": "^5.6.8",
    "@nestjs/common": "^9.0.0",
    "@nestjs/core": "^9.0.0",
    "@nestjs/platform-express": "^9.0.0",
    "@nestjs/swagger": "^6.2.1",
    "adminjs": "^6.7.1",
    "csv-parse": "^5.3.5",
    "express-formidable": "^1.2.0",
    "express-session": "^1.17.3",
    "node-fetch": "^3.3.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.2.0"
  },
  "devDependencies": {
    "@nestjs/cli": "^9.0.0",
    "@nestjs/schematics": "^9.0.0",
    "@nestjs/testing": "^9.0.0",
    "@types/express": "^4.17.13",
    "@types/jest": "29.2.4",
    "@types/node": "18.11.18",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "29.3.1",
    "prettier": "^2.3.2",
    "source-map-support": "^0.5.20",
    "supertest": "^6.1.3",
    "ts-jest": "29.0.3",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "4.1.1",
    "typescript": "^4.7.4"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

It's a clean NestJS app with MikroORM. Looks like extension-bubble-menu does not support CommonJS (due to the use of lodash-es), and Nest doesn't support ES modules. I assume the same happens for any project configuration not supporting ES modules

dziraf commented 1 year ago

can you try updating adminjs to the latest version?

eakenbor commented 1 year ago

@dziraf Here is my package.json:

Nodejs v14.16.1
Npm v6.14.12
{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "A backend project",
  "author": "",
  "private": true,
  "scripts": {
    "start": "node src/index.js",
    "dev": "env-cmd ./config/dev.env nodemon src/index.js",
    "test": "env-cmd ./config/test.env jest --watch --runInBand"
  },
  "jest": {
    "testEnvironment": "node"
  },
  "dependencies": {
    "@googlemaps/google-maps-services-js": "^3.3.16",
    "@sendgrid/mail": "^6.3.1",
    "adminjs": "^6.8.3",
    "apple-signin-auth": "^1.7.4",
    "authy-client": "^1.1.2",
    "aws-sdk": "^2.465.0",
    "axios": "^0.18.1",
    "base64-arraybuffer": "^0.2.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.3.1",
    "compression": "^1.7.4",
    "connect-history-api-fallback": "^2.0.0",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "countrycitystatejson": "^0.2.12",
    "cron": "^1.7.1",
    "crypto": "^1.0.1",
    "express": "^4.18.2",
    "express-formidable": "^1.2.0",
    "express-session": "^1.17.3",
    "googleapis": "^107.0.0",
    "handlebars": "^4.1.1",
    "hbs": "^4.0.4",
    "helmet": "^3.21.1",
    "i18n": "^0.8.5",
    "image-thumbnail": "^1.0.15",
    "jsonwebtoken": "^8.5.1",
    "libphonenumber-js": "^1.10.15",
    "moment": "^2.24.0",
    "mongodb": "^3.2.7",
    "mongodb-stitch-browser-sdk": "^4.3.2",
    "mongoose": "^6.8.3",
    "morgan": "^1.9.1",
    "multer": "^1.4.1",
    "multer-s3": "^2.9.0",
    "otplib": "^12.0.1",
    "passport": "^0.6.0",
    "passport-google-oauth": "^2.0.0",
    "path": "^0.12.7",
    "socket.io": "^4.5.4",
    "socketio-auth": "^0.1.1",
    "stripe": "^7.9.1",
    "tslib": "^2.5.0",
    "twilio": "^3.32.0",
    "validator": "^10.9.0",
    "vhost": "^3.0.2"
  },
  "devDependencies": {
    "chalk": "^2.0.1",
    "env-cmd": "^8.0.2",
    "jest": "^24.8.0",
    "nodemon": "^1.18.11",
    "supertest": "^4.0.2"
  }
}
konrad147 commented 1 year ago

I've already tried the latest version, and the problem is the same. I started with the latest version (6.8.3) then I tried to downgrade to see if it solved the problem. Unfortunately, it didn't. The version from package.json is the oldest one I tried to use

dziraf commented 1 year ago

When does the error appear? when you visit a specific page or right after you start the server?

eakenbor commented 1 year ago

@dziraf the moment you start the server

dziraf commented 1 year ago

@eakenbor @konrad147 @FordeD can you try version 6.8.4? Also after updating make sure node_modules/@adminjs/design-system/package.json has version 3.1.8

eakenbor commented 1 year ago

@dziraf the error has gone away now. Thanks.

konrad147 commented 1 year ago

6.8.4 solves the issue for me. Thanks!

niftytyro commented 1 year ago

I am facing this issue on the latest version: 7.0.9

Here's the error:

/home/niftytyro/freelance/vidpedia/backend/dist/admin.js:7
const adminjs_1 = __importDefault(require("adminjs"));
                                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/niftytyro/freelance/vidpedia/backend/node_modules/adminjs/index.js from /home/niftytyro/freelance/vidpedia/backend/dist/admin.js not supported.
Instead change the require of index.js in /home/niftytyro/freelance/vidpedia/backend/dist/admin.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/niftytyro/freelance/vidpedia/backend/dist/admin.js:7:35)
    at Object.<anonymous> (/home/niftytyro/freelance/vidpedia/backend/dist/index.js:11:17) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.16.1

Here's my package.json:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon dist/index.js",
    "watch": "tsc -w",
    "typeorm:cli": "typeorm-ts-node-commonjs -d src/orm-config.ts"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/body-parser": "^1.19.2",
    "@types/dotenv": "^8.2.0",
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.0",
    "nodemon": "^2.0.22",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  },
  "dependencies": {
    "@adminjs/express": "^6.0.0",
    "@adminjs/typeorm": "^5.0.0",
    "@types/bcrypt": "^5.0.0",
    "@types/connect-pg-simple": "^7.0.0",
    "@types/express-session": "^1.17.7",
    "adminjs": "^7.0.9",
    "bcrypt": "^5.1.0",
    "body-parser": "^1.20.2",
    "connect-pg-simple": "^9.0.0",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-formidable": "^1.2.0",
    "express-session": "^1.17.3",
    "pg": "^8.11.1",
    "reflect-metadata": "^0.1.13",
    "tslib": "^2.6.0",
    "typeorm": "^0.3.17"
  }
}

I am using typescript and getting this error with the output code.

dziraf commented 1 year ago 
  "main": "index.js",

Version 7+ and it's compatible packages only work with ESM projects.

windward-hive commented 1 year ago 
  "main": "index.js",

Version 7+ and it's compatible packages only work with ESM projects.

well that's a bummer

waqas19921 commented 6 months ago

This setup works for me https://github.com/TypeStrong/ts-node/issues/2100#issuecomment-1991843192