mandrasch
commented
2 weeks ago I ran a quick test with yarn 1.22.22 ✅
ddev config --project-type=php
ddev yarn init -y
ddev yarn add vite@4.5.0
ddev get s2b/ddev-vite-sidecar
ddev restartindex.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vite!</title>
<!-- This is just an example for local development, no full integration: -->
<script type="module" src="<?php echo $_SERVER['VITE_SERVER_URI']; ?>/@vite/client"></script>
<script type="module" src="<?php echo $_SERVER['VITE_SERVER_URI']; ?>/src/main.js"></script>
<!-- see https://vitejs.dev/guide/backend-integration.html -->
</head>
<body>
<h1>Hello, Vite!</h1>
<p>This is a simple test for hot module reloading.</p>
</body>
</html>// src/main.js
import './style.css'
console.log('hello vite! 123');/* src/style.css */
body {
font-family: sans-serif;
}
p {
color: darkslateblue;
}/* vite.config.js */
import { defineConfig } from 'vite'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
// Add entrypoint
build: {
// our entry
rollupOptions: {
input: path.resolve(__dirname, 'src/main.js'),
},
// manifest
manifest: true
},
})Ran ddev vite - correct version was used from node_modules/ and I saw no other files being changed ✅
VITE v4.5.0 ready in 132 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.207.2:5173/
➜ Network: http://192.168.239.4:5173/
➜ press h to show helpBut - when I deleted the node_modules/ folder and tried to run ddev vite again, it proposed a newer version:
/ddev-vite-sidecar-yarn-test % ddev vite
Need to install the following packages:
vite@5.3.1
Ok to proceed? (y) btw: Interestingly, this fails when you agree with y because of vite.config.js
Need to install the following packages:
vite@5.3.1
Ok to proceed? (y) y
failed to load config from /var/www/html/vite.config.js
error when starting dev server:
Error: Cannot find module 'vite'
Require stack:
- /var/www/html/vite.config.jsIf I run ddev yarn install and ddev vite afterwards, correct version is used again. ✅
So for developer experience it would be cool to check if the node_modules/ exists, although I guess we can assume that ddev npm/yarn/pnpm install has been executed in 99% of cases? 😉
I also ran a quick test with pnpm (https://github.com/envsa/ddev-pnpm) as well ❌
ddev get envsa/ddev-pnpm
ddev restart
ddev pnpm init
ddev pnpm add vite@4.5.0
ddev viteTo my personal suprise there was an JS error:
Access to script at 'https://vite.ddev-vite-sidecar-yarn-test.ddev.site/node_modules/.pnpm/vite@4.5.0/node_modules/vite/dist/client/env.mjs' from origin 'https://ddev-vite-sidecar-yarn-test.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://vite.ddev-vite-sidecar-yarn-test.ddev.site/node_modules/.pnpm/vite@4.5.0/node_modules/vite/dist/client/env.mjs net::ERR_FAILED 403 (Forbidden)
client:1 Seems like node_modules/bin/vite is generated different, pnpm-version:
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/var/www/html/node_modules/.pnpm/vite@4.5.0/node_modules/vite/bin/node_modules:/var/www/html/node_modules/.pnpm/vite@4.5.0/node_modules/vite/node_modules:/var/www/html/node_modules/.pnpm/vite@4.5.0/node_modules:/var/www/html/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/var/www/html/node_modules/.pnpm/vite@4.5.0/node_modules/vite/bin/node_modules:/var/www/html/node_modules/.pnpm/vite@4.5.0/node_modules/vite/node_modules:/var/www/html/node_modules/.pnpm/vite@4.5.0/node_modules:/var/www/html/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../vite/bin/vite.js" "$@"
else
exec node "$basedir/../vite/bin/vite.js" "$@"
fiHere is the yarn version:
#!/usr/bin/env node
import { performance } from 'node:perf_hooks'
if (!import.meta.url.includes('node_modules')) {
try {
// only available as dev dependency
await import('source-map-support').then((r) => r.default.install())
} catch (e) {}
}
global.__vite_start_time = performance.now()
// check debug mode first before requiring the CLI.
const debugIndex = process.argv.findIndex((arg) => /^(?:-d|--debug)$/.test(arg))
const filterIndex = process.argv.findIndex((arg) =>
/^(?:-f|--filter)$/.test(arg),
)
const profileIndex = process.argv.indexOf('--profile')
if (debugIndex > 0) {
let value = process.argv[debugIndex + 1]
if (!value || value.startsWith('-')) {
value = 'vite:*'
} else {
// support debugging multiple flags with comma-separated list
value = value
.split(',')
.map((v) => `vite:${v}`)
.join(',')
}
process.env.DEBUG = `${
process.env.DEBUG ? process.env.DEBUG + ',' : ''
}${value}`
if (filterIndex > 0) {
const filter = process.argv[filterIndex + 1]
if (filter && !filter.startsWith('-')) {
process.env.VITE_DEBUG_FILTER = filter
}
}
}
function start() {
return import('../dist/node/cli.js')
}
if (profileIndex > 0) {
process.argv.splice(profileIndex, 1)
const next = process.argv[profileIndex]
if (next && !next.startsWith('-')) {
process.argv.splice(profileIndex, 1)
}
const inspector = await import('node:inspector').then((r) => r.default)
const session = (global.__vite_profile_session = new inspector.Session())
session.connect()
session.post('Profiler.enable', () => {
session.post('Profiler.start', start)
})
} else {
start()
}Interesting 💡 Hope this is helpful!
Check if npx vite uses the correct binary if the project uses yarn, pnpm or others.