Private field '#e' must be declared in an enclosing class

[MathiasGruber]

Getting the following error when I build project:

Relating to this piece of code: ... return this.#e.size}get pixelWidth(){if(0===this.size)return 0;let{isPointy:e,width:t}=this.hexPrototype ...

[flauwekeul]

What version of Honeycomb are you using and could you show the parts of the code where you use honeycomb that could throw this error?

That error is thrown when you try to access a private class field (#e in this case, but it's minified, so it has a different name in your source code) outside the class it's declared in.

See also: https://davidwalsh.name/javascript-class-privates

[MathiasGruber]

I'm super perplexed as to why this is happening, it was working for about two months using one of the beta versions - now it's broken in v4.1.1 and all other v4.x.x (I've tried them all).

My specific setup is a next.js application, package.json looks as follow:

{
  "name": "tnr",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "build-stats": "ANALYZE=true next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start"
  },
  "prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.306.0",
    "@clerk/nextjs": "4.15.0",
    "@heroicons/react": "2.0.16",
    "@hookform/resolvers": "2.9.10",
    "@next/bundle-analyzer": "^13.4.4",
    "@paralleldrive/cuid2": "2.2.0",
    "@paypal/react-paypal-js": "7.8.2",
    "@prisma/client": "4.14.0",
    "@tanstack/react-query": "4.28.0",
    "@tinymce/tinymce-react": "4.3.0",
    "@trpc/client": "10.18.0",
    "@trpc/next": "10.18.0",
    "@trpc/react-query": "10.18.0",
    "@trpc/server": "10.18.0",
    "@tweenjs/tween.js": "20.0.3",
    "@upstash/ratelimit": "0.4.2",
    "@upstash/redis": "1.20.6",
    "abstract-astar": "0.2.0",
    "alea": "1.0.1",
    "honeycomb-grid": "4.1.1",
    "html2canvas": "1.4.1",
    "next": "13.2.4",
    "pusher": "5.1.2",
    "pusher-js": "8.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.43.0",
    "react-html-parser": "2.0.2",
    "react-toastify": "9.1.1",
    "sanitize-html": "2.10.0",
    "simplex-noise": "4.0.1",
    "superjson": "1.9.1",
    "three": "0.149.0",
    "zod": "3.20.2"
  },
  "devDependencies": {
    "@types/node": "18.11.18",
    "@types/prettier": "2.7.2",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "@types/react-html-parser": "2.0.2",
    "@types/react-toastify": "4.1.0",
    "@types/sanitize-html": "2.8.0",
    "@types/three": "0.149.0",
    "@typescript-eslint/eslint-plugin": "5.47.1",
    "@typescript-eslint/parser": "5.47.1",
    "autoprefixer": "10.4.7",
    "eslint": "8.30.0",
    "eslint-config-next": "13.1.2",
    "postcss": "8.4.14",
    "prettier": "2.8.1",
    "prettier-plugin-tailwindcss": "0.2.1",
    "prisma": "4.14.0",
    "tailwindcss": "3.2.0",
    "ts-node": "10.9.1",
    "typescript": "5.0.2"
  },
  "ct3aMetadata": {
    "initVersion": "7.3.2"
  }
}

And tsconfig

{
  "compilerOptions": {
    "target": "es2017",
    "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,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs"
  ],
  "exclude": ["node_modules", ".next"]
}

It'll work fine during development, but if I do a yarn build it'll give the error in the browser in the browser. If I do yarn build-stats I'll get the error during building as well:

Private field '#e' must be declared in an enclosing class

I'm defining my grid as follows, which is not causing any issues by itself:

const Tile = defineHex({
    dimensions: hexsize,
    origin: { x: -hexsize - leftPadding, y: -hexsize - bottomPadding },
    orientation: Orientation.FLAT,
  });
  const honeycombGrid = new Grid(
    Tile,
    rectangle({ width: COMBAT_WIDTH, height: COMBAT_HEIGHT })
  ).map((tile) => {
    tile.cost = 1;
    return tile;
  });

I only see the error once I introduce e.g. this statement anywhere in the codebase:

fromCoordinates<Hex>({ q: 1, r: 1});

[MathiasGruber]

It's the weirdest thing, I did a refactor to move out the function which was calling fromCoordinates to another file, and now I no longer see this error. I have no idea why this happened at all, but at least it's solved for me, so I reckon the issue can be closed. If anyone else experiences this, maybe the solution is code refactoring as well -_-

[flauwekeul]

Good that it's solved 👍 If you ever find the issue, let me know.