search

wraith4081 / bunnycdn

Use the unofficial BunnyCDN library quickly and easily with Javascript
9 stars 1 forks source link

ESM error #1

Closed theDanielJLewis closed 1 year ago

theDanielJLewis commented 1 year ago

Please forgive my ignorance, but I'm running into problems trying to use this, and I'm not sure whether I'm doing something wrong or this is a bug.

Sample code:

import { EdgeStorage, StorageEndpoints } from 'bunnycdn';
const edgeStorage = new EdgeStorage(
    'REDACTED',
    StorageEndpoints.Falkenstein // This is my correct endpoint
);

const storageZone = edgeStorage.CreateClient('MY_STORAGE');

export default async function run(url: string) {
    const files = await storageZone.ListFiles('.');
    for (let file of files) {
        console.log(
            `A file was found with the name ${file.ObjectName} and the guid ${file.Guid} with ${file.Length} bytes.`
        );
    }

}

run();

Running this gives me the error:

PROJECT_FOLDER/node_modules/ts-node/dist/index.js:851
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module PROJECT_FOLDER/node_modules/node-fetch/src/index.js from PROJECT_FOLDER/node_modules/bunnycdn/dist/EdgeStorage.js not supported.
Instead change the require of index.js in PROJECT_FOLDER/node_modules/bunnycdn/dist/EdgeStorage.js to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (PROJECT_FOLDER/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (PROJECT_FOLDER/node_modules/bunnycdn/dist/EdgeStorage.js:16:38)
    at require.extensions.<computed> [as .js] (PROJECT_FOLDER/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (PROJECT_FOLDER/node_modules/bunnycdn/dist/index.js:7:39)
    at require.extensions.<computed> [as .js] (PROJECT_FOLDER/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (PROJECT_FOLDER/src/helpers/downloadImage.ts:12:20)
    at m._compile (PROJECT_FOLDER/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (PROJECT_FOLDER/node_modules/ts-node/dist/index.js:859:16)
    at phase4 (PROJECT_FOLDER/node_modules/ts-node/dist/bin.js:466:20)
    at bootstrap (PROJECT_FOLDER/node_modules/ts-node/dist/bin.js:54:12)
    at main (PROJECT_FOLDER/node_modules/ts-node/dist/bin.js:33:12)
    at Object.<anonymous> (PROJECT_FOLDER/node_modules/ts-node/dist/bin.js:579:5) {
  code: 'ERR_REQUIRE_ESM'
}
wraith4081 commented 1 year ago

Hello, first of all thank you for your report. I need to repeat the code to find the error. Could you please send package.json and tsconfig.json if you are using TypeScript

theDanielJLewis commented 1 year ago

I apologize for my delay. Did 1.0.5 fix this (I haven't tried it, yet)? Or do you still need my two JSON files?

wraith4081 commented 1 year ago

I apologize for my delay. Did 1.0.5 fix this (I haven't tried it, yet)? Or do you still need my two JSON files?

Yes, it should be fixed with version 1.0.5. Install it again. And try to run it again. Most likely it will work fine.

If you encounter the same or a different problem, please let me know again.

I wish you a good day and work.

theDanielJLewis commented 1 year ago

Sorry, I'm still getting this problem. Oddly, it happens only when I run my function via CLI, but not when I run the function through React/Next.js.

Including this line is causing the problems:

const edgeStorage = new EdgeStorage(accessKey, StorageEndpoints.Falkenstein);

package.json

{
  "name": "project-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 4000",
    "build": "next build",
    "start": "next start -p 4000",
    "tsc": "tsc",
    "lint": "next lint",
    "backend": "node -r tsconfig-paths/register .queue/backend/index.js",
    "backend-dev": "nodemon src/backend/index.ts",
    "backend-build": "tsc --project src/backend/tsconfig.json",
    "seed": "ts-node --esm src/tools/seeder.ts",
    "migrate": "ts-node --esm src/tools/migrate.ts",
    "queue": "CMD_ENV=cli ts-node --esm src/backend/queueCli.ts",
    "pm2-start": "pm2 start 'yarn start' --name 'app'",
    "pm2-queues": "pm2 start 'npx ts-node --esm src/backend/index.ts' --name 'queue'"
  },
  "dependencies": {
    "@bull-board/express": "^5.5.1",
    "@hookform/resolvers": "^3.1.1",
    "@prisma/client": "^4.15.0",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.3",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-toast": "^1.1.4",
    "@radix-ui/react-toggle": "^1.0.3",
    "@react-email/render": "^0.0.7",
    "@sequelize/core": "^7.0.0-alpha.23",
    "@tanstack/react-table": "^8.9.3",
    "async": "^3.2.4",
    "axios": "^1.4.0",
    "bullmq": "^3.15.4",
    "bunnycdn": "^1.0.4",
    "chart.js": "^4.3.0",
    "chartjs-chart-geo": "^4.2.0",
    "cheerio": "^1.0.0-rc.12",
    "class-variance-authority": "^0.6.1",
    "clsx": "^1.2.1",
    "cmdk": "^0.2.0",
    "color-scheme-hook": "^3.7.2",
    "copy-to-clipboard": "^3.3.3",
    "country-flag-icons": "^1.5.7",
    "cron": "^2.3.1",
    "dayjs": "^1.11.7",
    "dotenv": "^16.0.3",
    "easycolors": "^2.0.0",
    "eslint": "^8.40.0",
    "eslint-config-next": "^13.4.2",
    "express": "^4.18.2",
    "fast-xml-parser": "^4.2.2",
    "get-video-id": "^3.6.5",
    "hpagent": "^1.2.0",
    "https-proxy-agent": "^7.0.0",
    "js-beautify": "^1.14.8",
    "jsonwebtoken": "^9.0.0",
    "lodash": "^4.17.21",
    "lucide-react": "^0.256.0",
    "mailgun.js": "^9.1.1",
    "mongoose": "^7.2.0",
    "mysql2": "^3.4.0",
    "next": "^13.4.4",
    "next-auth": "^4.22.1",
    "podcast-index-api": "^1.1.10",
    "prisma": "^4.15.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-awesome-animated-number": "^1.0.11",
    "react-chartjs-2": "^5.2.0",
    "react-colorful": "^5.6.1",
    "react-device-detect": "^2.2.3",
    "react-dom": "^18.2.0",
    "react-drag-listview": "^2.0.0",
    "react-email": "^1.9.4",
    "react-hook-form": "^7.45.1",
    "react-icons": "^4.8.0",
    "react-js-nl2br": "^1.0.1",
    "react-paginate": "^8.2.0",
    "react-share": "^4.4.1",
    "spotify-web-api-node": "^5.0.2",
    "swr": "^2.1.5",
    "tailwind-color-util": "^1.0.2",
    "tailwind-merge": "^1.13.2",
    "tailwindcss-animate": "^1.0.6",
    "url-safe-base64": "^1.3.0",
    "webpack-filter-warnings-plugin": "^1.2.1",
    "world-atlas": "^2.0.2",
    "yargs": "^17.7.2",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@typegoose/typegoose": "^11.2.0",
    "@types/async": "^3.2.20",
    "@types/cron": "^2.0.1",
    "@types/express": "^4.17.17",
    "@types/lodash": "^4.14.194",
    "@types/node": "^20.2.0",
    "@types/react": "^18.2.13",
    "@types/react-dom": "^18.2.6",
    "@types/yargs": "^17.0.24",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2",
    "ts-node": "^10.9.1",
    "tslib": "^2.5.1",
    "typescript": "^5.1.3"
  }
}

It's the migrate script that uses BunnyCDN.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    // "isolatedModules": true,
    "strictPropertyInitialization": false,
    "jsx": "preserve",
    "incremental": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    },
    "baseUrl": ".",
    "isolatedModules": true
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    },
    "require": ["tsconfig-paths/register"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
wraith4081 commented 1 year ago

Hello, I think you have not updated the package. Can you try updating again using the command below.

npm i bunnycdn

If the problem persists, try installing in fixed version. 

npm i bunnycdn@1.0.5

If the problem still persists I will try to install a similar environment with a test code.

theDanielJLewis commented 1 year ago

Oh I am face-palming SO HARD right now! 😅 You're totally right. It was seeing 1.0.5 in my upgrades that reminded me to check on this issue, but I didn't install the upgrade!

It works now. Thank you!

wraith4081 commented 1 year ago

You are welcome. Feel free to reach out to me if you run into any problems in the future or if you have any new ideas. Also thanks for being the first official user of one of my packages.

I wish you a good day and work.