Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ccmijudeveloper's avatar

Can’t migrate to ViteJS

I am working on a project running in Laravel Homestad, migrated from v8 to v9 following the official upgrade guide. (https://laravel.com/docs/9.x/upgrade#upgrade-9.0).

The project originally worked with laravel-mix and command npm run dev to run the webpack.mix.js configuration and if I try to run like this, it returns the following error:

>dev
> npm run development

> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

node:internal/modules/cjs/loader:936
  throw error;
  ^

Error: Cannot find module '..'
Requirestack:
- /home/vagrant/code/intranet2022/node_modules/.bin/cross-env
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/vagrant/code/intranet2022/node_modules/.bin/cross-env:4:16)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/vagrant/code/intranet2022/node_modules/.bin/cross-env' ]
}

Now I am trying to upgrade the "webpack " bundler module to "vitejs" as required by the new version of laravel following the following guide: https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating

But in the step npm install --save-dev vite laravel-vite-plugin, I get errors from NPM.

npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=0.10.0 <7' },
npm WARN EBADENGINE current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=4 <=9' },
npm WARN EBADENGINE current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm ERR! code EPROTO
npm ERR! syscall symlink
npm ERR! path ../esbuild/bin/esbuild
npm ERR! dest /home/vagrant/code/intranet2022/node_modules/.bin/esbuild
npm ERR! wrong -71
npm ERR! EPROTO: protocol error, symlink '../esbuild/bin/esbuild' -> '/home/vagrant/code/intranet2022/node_modules/.bin/esbuild'

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2022-07-28T09_27_27_280Z-debug-0.log

Previously made changes: Updated installed nodejs from v14 to v16.

Tests I have performed (with same consequences): Test 1: rm -rf node_modules && npm cache clean -f && npm install Test 2: rm package-lock.json && npm install

Test 3: Runned npm install from windows host cli.

0 likes
5 replies
Nihir's avatar

You have to try npm install and than after npm run build after this you just have to start npm run dev

ccmijudeveloper's avatar
{
  "name": "intranet2022",
  "version": "1.0.0",
  "description": "<p align=\"center\"><img src=\"https://laravel.com/assets/img/components/logo-laravel.svg\"></p>",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "repository": {
    "type": "git",
    "url": "x"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "admin-lte": "^3.0.0-alpha.2",
    "axios": "^0.27.2",
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "sass": "^1.15.2",
    "vform": "^1.0.0",
    "vue": "2.5.7"
  },
  "devDependencies": {
    "resolve-url-loader": "^5.0.0"
  }
}

What I'am actually trying is to run build assets with Laravel-Mix. I keep vue v2 because this project ran from Laravel 5.

Once I started use this combo of commands I managed to install Laravel-mix. rm -rf node-modules && npm cache clean -f npm i laravel-mix@latest --save-dev --no-bin-links npm clean-install --no-bin-links but seems unaccesible because of npm run dev or npx mix got me to sh: 1: mix: not found or could not determine executable to run.

Apreciate further look into this and thank you.

ccmijudeveloper's avatar

I got that directory node_modules/laravel-mix/ has built the directory tree (bin, setup, src, icons and types) within but not files, neither binaries. Them are empty.

thinkverse's avatar
Level 15

Since you're updating to Vite you don't need Laravel Mix anymore so you can remove that from your package.json.

npm uninstall laravel-mix

And update your scripts section to use Vite instead of Laravel Mix.

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

You also need the laravel-vite-plugin.

npm install laravel-vite-plugin

Or look at the latest Laravel application code to see what they have as dependencies and what you don't. And if you use Vue as well look at Breeze or Jetstream, they have Inertia with Vue that might help you further.

Please or to participate in this conversation.