Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Running into "ReferenceError: P is not defined" in build process #123

Open
SebastianPfeu opened this issue Jan 4, 2025 · 0 comments
Open

Comments

@SebastianPfeu
Copy link

SebastianPfeu commented Jan 4, 2025

In my next js app, as soon as I run npm run build, I get the error "ReferenceError: P is not defined" (therefore I cannot deploy). I found out that the issue is in the <ShaderGradient> component. However, no matter what changes I make, the error persists. Running the project locally works perfectly fine. Is this error known? How can I solve it?

The relevant code snippet is the following (quite similar to the code provided in the README file):

"use client"

import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'
import * as reactSpring from '@react-spring/three'

export default function GradientBackground() {
  return (
    <ShaderGradientCanvas
      style={{
        position: 'absolute',
        top: 0,
      }}
    >
      <ShaderGradient
        control='query'
        urlString='https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.2&cAzimuthAngle=180&cDistance=3.6&cPolarAngle=90&cameraZoom=1&color1=%2352ff89&color2=%23dbba95&color3=%23d0bce1&embedMode=off&envPreset=city&fov=45&gizmoHelper=hide&grain=on&lightType=3d&pixelDensity=1&positionX=-1.4&positionY=0&positionZ=0&reflection=0.1&rotationX=0&rotationY=10&rotationZ=0&shader=defaults&type=plane&uDensity=1.3&uFrequency=5.5&uSpeed=0.4&uStrength=4&uTime=0&wireframe=false&zoomOut=false'
      />
    </ShaderGradientCanvas>
  )
}

My package.json file looks as follows:

"dependencies": {
    "@react-spring/three": "^9.7.5",
    "@react-three/drei": "^9.120.5",
    "@react-three/fiber": "^8.17.10",
    "@shadergradient/react": "^2.0.19",
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
    "three": "^0.169.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/three": "^0.169.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }

Edit 1: Problem persists even with lower versions of three (v0.150.0 and v0.154.0)
Edit 2: Build process succeeds when using plain react (e.g. via vite) instead of next js

@SebastianPfeu SebastianPfeu changed the title Running into the error "P is not defined" Running into the error "P is not defined" in build process Jan 4, 2025
@SebastianPfeu SebastianPfeu changed the title Running into the error "P is not defined" in build process Running into the error "ReferenceError: P is not defined" in build process Jan 4, 2025
@SebastianPfeu SebastianPfeu changed the title Running into the error "ReferenceError: P is not defined" in build process Running into "ReferenceError: P is not defined" in build process Jan 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant