vite not found in fly launch with laravel app

Questions / Help Build debugging
1

I did fly launch on my laravel app, it was building the docker file until this step nodemodules go brrr step 7 where it says vite not found. Laravel app was built with sail as the dev environment. How do I fix this to properly deploy

 => ERROR [node_modules_go_brrr 7/7] RUN if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install   1.0s
------
 > [node_modules_go_brrr 7/7] RUN if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install --frozen-lockfile;         yarn $ASSET_CMD;     elif [ -f "package-lock.json" ]; then         npm ci --no-audit;         npm run $ASSET_CMD;     else         npm install;         npm run $ASSET_CMD;     fi;:
#17 0.755 npm ERR! Cannot read property '@tailwindcss/forms' of undefined
#17 0.759
#17 0.759 npm ERR! A complete log of this run can be found in:
#17 0.759 npm ERR!     /root/.npm/_logs/2023-03-09T10_41_46_225Z-debug.log
#17 0.985
#17 0.985 > @ build /app
#17 0.985 > vite build
#17 0.985
#17 0.989 sh: 1: vite: not found
#17 0.994 npm ERR! code ELIFECYCLE
#17 0.994 npm ERR! syscall spawn
#17 0.994 npm ERR! file sh
#17 0.994 npm ERR! errno ENOENT
#17 0.997 npm ERR! @ build: `vite build`
#17 0.997 npm ERR! spawn ENOENT
#17 0.997 npm ERR!
#17 0.997 npm ERR! Failed at the @ build script.
2

Hi @rishabhrao076!

It seems the vite package is not available in your project. Can you check your package.json file? It should include vite in there under devDependencies, like so:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    }
}
3

Hi @kathrynannetan this is my package.json. I have included it in my devDependencies

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@vitejs/plugin-vue": "^4.0.0",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "laravel-echo": "^1.15.0",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "pusher-js": "^8.0.1",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0",
        "vue": "^3.2.36"
    }
}
4

Hi!

So far I can’t recreate this on a fresh laravel 10 install, but I wanted to try in case Laravel 10 changed something on us. It appears it didn’t change anything!

I think we’re missing an error that happened before the vite command was attempted. What we can see is npm ERR! Cannot read property '@tailwindcss/forms' of undefined

This may mean other items were not installed. I almost wonder if npm ci or the npm install command failed in a way that didn’t stop the Docker build?

The logic in the Dockerfile driving that is (copy-pasted):

# Decide if we have vite or mix used 
# in this Laravel project
if [ -f "vite.config.js" ]; then \
    ASSET_CMD="build"; \
else \
    ASSET_CMD="production"; \
fi; \

# Install based on presence of yarn vs npm lock file
# falling back to "npm install" 
if [ -f "yarn.lock" ]; then \
    yarn install --frozen-lockfile; \
    yarn $ASSET_CMD; \
elif [ -f "package-lock.json" ]; then \
    npm ci --no-audit; \
    npm run $ASSET_CMD; \
else \
    npm install; \
    npm run $ASSET_CMD; \
fi;

Overall, you may need to watch the Docker build output more carefully to see if it fails to run npm install (or similar).

  1. Is it possible your local Node version doesn’t match the one used in the container? (what do you use locally)
  2. Do you have a packages.lock file? Is it out of date with what you have installed in node_modules?
  3. Do you have a vite.config.js file?
1 Like
5

@fideloper-fly Thanks the problem was the node version, I was on Laravel version 9.x and Node 16.x on my local dev environment changing it in the fly.toml file helped build succesfully

1 Like
6

Great! Sorry for the trouble, I’ll make a note to see if we can detect the local Node version (not totally sure we can if .nvm is being used, but we can perhaps make a best effort!).