Phaser3: Vercel deploy fail (updated)

Question

I using Vite + React + Typescript, and use Vercel for deployment. In my localhost build or preview are working fine.

11:57:49.482 error TS2688: Cannot find type definition file for 'Phaser
11:57:49.482   The file is in the program because:
11:57:49.483     Entry point of type library 'Phaser' specified in compileroptions
11:57:49.500   ELIFECYCLE Command failed with exit code 2.
11:57:49.526 Error: Command "pnpm run build" exited with 1
11:57:50.217 Deployment completed
11:57:49.841 BUILD_UTILS_SPAWN_1: Command "pnpm run build" exited with 1

ts.config.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext","es6", "dom", "dom.iterable", "scripthost"],
    "typeRoots": ["./node_modules/@types","./node_modules/phaser/types"],
    "types": ["Phaser"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "files": ["./node_modules/phaser/types/phaser.d.ts"],
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Now I trying to run on local using docker, but still facing same issue

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - .:/app
      - /app/node_modules

Dockerfile

# Base image
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the container
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN npm install -g pnpm && pnpm install

# Copy the rest of the application files to the container
COPY . .

# Build the application
RUN pnpm run build

# Expose the port
EXPOSE 3000
# Start the application
CMD ["pnpm", "run", "preview"]

score 1 · Accepted Answer · answered May 23 '23 at 05:55

I have found the issue that I have to remove "types": ["Phaser"], in tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext","es6", "dom", "dom.iterable", "scripthost"],
    "typeRoots": ["./node_modules/phaser/types","./node_modules/@types"],
    // "types": ["Phaser"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true
  },
  "files": ["./node_modules/phaser/types/phaser.d.ts"],
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

score 0 · Answer 2 · answered May 18 '23 at 08:01

    volumes:
      - .:/app
      - /app/node_modules

That seems suspect: In your docker-compose.yml file, you're mounting the current directory to /app and also mounting /app/node_modules to a Docker volume.
That could be causing issues with how Docker is finding your node_modules directory and, consequently, the Phaser types.

Remove the volume and, in your Dockerfile, create a fresh node_modules directory inside the container, which should include the Phaser types: TypeScript should then be able to find them.

# Base image
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the container
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN npm install -g pnpm && pnpm install

# Remove and reinstall node_modules
RUN rm -rf node_modules && pnpm install

# Copy the rest of the application files to the container
COPY . .

# Build the application
RUN pnpm run build

# Expose the port
EXPOSE 3000
# Start the application
CMD ["pnpm", "run", "preview"]

If the problem persists, check whether the node_modules/phaser/types directory actually exists inside your Docker container.

RUN ls -la node_modules/phaser/types

The content of that directory should include phaser.d.ts.

Phaser3: Vercel deploy fail (updated)

2 Answers2