Hi again @wsmetz72
I am sorry for my delayed response, I have been out of office and could not get back to you in time.
When you use Vite, you must use NPM imports (like import { createAuth0Client } from '@auth0/auth0-spa-js'; ) and completely remove the Auth0 CDN link from your HTML. Furthermore, the randomly generated file names seen after running npm run build are intentional and must not be manually renamed, as Vite automatically wires them into the final production index.html .
→ The createAuth0Client is not defined / Parse Errors
If a developer relies on a CDN (<script src="https://cdn.auth0.com/..."></script> ), the auth0 object is automatically attached to the global window . Vite, however, is a strict ES Module bundler. During the npm run build step, Vite statically analyzes the app.js code. If it sees a call to createAuth0Client() without an explicit import statement at the top of the file, Vite has no idea where that function comes from. This leads to “not defined” errors at runtime, or parsing errors during the build if the code attempts to mix global window variables with module imports.
→ The File Naming Issue (Cache Busting)
When the user successfully built the project, they noticed files like app-rlbWHTKs.js and manually renamed them back to app.js .
Vite intentionally appends that random string (a hash) to the file names. This is a critical web performance and caching practice called Cache Busting . It guarantees that when the dist folder is uploaded to GoDaddy, the end-users’ browsers will download the new, updated file instead of loading an outdated, cached version of app.js from their local browser history. By manually renaming the files, the user broke the links that Vite automatically injected inside the compiled index.html , resulting in a blank page or a broken application.
SOLUTION:
To resolve the confusion in the thread and deploy successfully, you must embrace the Vite (NPM) workflow:
1. Install the SDK via NPM
Ensure the SDK is actually installed in the project folder, not just linked in the HTML.
npm install @auth0/auth0-spa-js
2. Clean up index.html
Remove the Auth0 CDN <script> tag from the HTML file entirely. The application should only load the main JavaScript module:
<script type="module" src="/app.js"></script>
3. Import Correctly in app.js
At the very top of the app.js file, explicitly import the client creation function. Because it is imported directly, you drop the auth0. prefix when calling it:
import { createAuth0Client } from '@auth0/auth0-spa-js';
let auth0Client;
window.onload = async () => {
auth0Client = await createAuth0Client({
domain: import.meta.env.VITE_AUTH0_DOMAIN,
clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
authorizationParams: {
redirect_uri: window.location.origin
}
});
// ... continue application logic
};
-
Build and Deploy (Without Renaming!)
-
Run npm run build in the terminal.
-
Vite will generate a dist folder containing a new index.html and an assets folder (holding the securely hashed files).
-
Take the entire contents of the dist folder and upload them directly to the hosting provider (e.g., GoDaddy). Do not rename any files.
This should do the trick and have you app up and running.
Kind Regards,
Nik