Questions tagged [vite]
For questions about using Vite, a two-part build tool (dev server + build command) that aims to provide a faster and leaner development experience for modern web projects.
4,884
questions
0
votes
0
answers
5
views
firebase does not provide an export named CreateCustomToken
am trying to create a basic create user and user authentication with fire base buth this is the error am getting firebase.js?t=1695372996300:6 Uncaught SyntaxError: The requested module '/node_modules/...
0
votes
0
answers
17
views
Getting 404 when i refresh the page
I get 404 whenever refresh the page it works for the first time but when I refresh I get 404. It is a React + TypeScript + Vite web application deployed on the Azure app service
0
votes
0
answers
7
views
npm typescript vuejs3 plugin made with vite is not recognizing types
currently I'm trying to create a plugin for vuejs with vite and came across some problems.
The tech stack I am using is:
vue 3
typescript
vite
My project is setup like:
├── README.md
├── dist
│ ├──...
0
votes
1
answer
10
views
Creating a global variable inside my module to be used in the index.html, with ViteJS
I have a TS based / ViteJS project that build a small library.
I'd like to expose one of my object to the global window (or equivalent), to be used outside of my modules, after the library has been ...
0
votes
0
answers
4
views
Astro (Vite) compile separate SCSS files to external CSS files for use in other project
I'm using the default Astro npm create astro@latest to create a static (frontend) demo / prototype version of a web site during development.
Later, our backend department will pick apart this static ...
-1
votes
0
answers
13
views
Having issue with jest to Vitest migration
I recently migrated react-script to vite and jest is giving me lot of trouble, basically it doesn't like vite I assume. So, I decided to migrate jest to vitest. I tried lot of approaches I found from ...
0
votes
0
answers
15
views
Vite failing to load config
I am working on a web application that uses Vite alongside Django and I am unabnle to get my dev server to run at all.
I am really not sure what all information I need to post as I'm brand new to ...
0
votes
0
answers
8
views
How to include Javascript AMD modules in a Vite project
In my project using the Vite bundler, I have the two legacy AMD libraries azure-devops-extension-api and azure-devops-extension-sdk, but Vite only supports ESM modules. The means that if I in a ...
0
votes
0
answers
11
views
How do I configure Astro to output separate CSS from HTML?
By default, in Astro, the CSS is duplicated and injected into each HTML file in a <style> tag. I got a very small site with a couple of pages and minimum CSS.
My CSS in mainly in a external .css ...
1
vote
0
answers
18
views
Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../" - deploy Vue Vite on Netlify
I am getting this error: Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
I want to ...
0
votes
0
answers
10
views
Vite.js + TS + Module Federation - not working with basic configuration
I'm using the latest Vite with React 18 and trying to integrate a module federation architecture.
After running application on the server side I got this error:
Warning: React.jsx: type is invalid -- ...
2
votes
0
answers
19
views
Prevent using Custom Keyboard from a node_module and use Native instead
In my React Webapp, I have a package installed, that is using react-simple-keyboard.
I need this package, but I will use the native browser keyboard and not the custom react-simple-keyboard.
How can I ...
1
vote
0
answers
23
views
How to preserve a database connection pool in hooks.server.js during hot reload in SvelteKit with Vite.js and mariadb?
I am using SvelteKit, Vite.js, and the mariadb package with Node.js in my application. I have the following code in the db.js file:
import mariadb from 'mariadb';
const databaseConnectionPoolConfig = ...
0
votes
1
answer
22
views
How corectly import Vue in store file?
Why do I get this error in my console from the code below?
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=338c01cb' does not provide an export named 'default' (at index....
1
vote
2
answers
41
views
Uncaught ReferenceError: require is not defined [Shopify PHP-React Browser issue]
I've create a Shopify app using PHP template and react front-end template and it works fine on local with all the code. However, the issue comes when I change the app environment to 'production'. I ...
0
votes
1
answer
25
views
Shows " Uncaught TypeError: Cannot read properties of undefined (reading 'data') " when try to read data from a state passed as props using strapi DB
I created two states and passed from context.tsx:
import { createContext, useState } from "react";
export const Context = createContext();
const AppContext = ({ children }) => {
const ...
0
votes
0
answers
17
views
vite - import.meta.env undefined error in laravel 10
I'm embarking on a new project with Laravel 10 and need to use the APP_URL env variable in the vite.config.js file. Following is the file variable defined in .env file
VITE_APP_URL="${APP_URL}&...
0
votes
0
answers
7
views
can't remove inline styles to seperate file in Nuxt3
iam trying to remove inline styles from bundled html into seperate css file ,
i tried 2 solutions in nuxt.config.ts
1- to add build attribute inside vite config
2- to add build attribute in first ...
0
votes
0
answers
16
views
How to rename index.html after build in a Vite plugin?
I want to run a completely orthodox Vite build and then after the build, change my index.html file into an index.php file. This is to integrate it with a Wordpress plugin.
I was able to uncomment the ...
0
votes
1
answer
16
views
Why are the images not showing up on the React website deployed using GitHub Pages?
I created a website using React and Vite. It works as expected on my local machine. But, after it was deployed on GitHub Pages, the images didn't load up. Everything else was working fine. The images ...
0
votes
0
answers
15
views
Adding a second input to Vite causes the build to creat a non-functional page
The Goal
I would like to use Vite to build my application with a main single page app plus an additional error page that has the same look & feel and can be bundled together. Everything works ...
0
votes
0
answers
27
views
What could be causing a React app to behave differently in Vite dev server vs Vite build/preview?
My understanding is that the only major difference between the dev server and a build is that Rollup handles the bundling but esbuild is still doing all the transpilation-related tasks either way.
The ...
-1
votes
0
answers
25
views
How can I prevent ViteJS from adding variables to global namespace? [closed]
Vite is adding variables to the global namespace. For instance "id" was added that conflicted with existing code.
Inside the vite codebase
const encoder = window.encodeURIComponent || s =>...
0
votes
1
answer
33
views
Three.js: Why is my scene completely black?
I'm trying to make my first three.js project but the scene stays completely black. I'm using vite as my local server.
This is my js code:
import * as THREE from 'three'
//Scene
const scene = new ...
0
votes
0
answers
12
views
Vite failes to install vue-select-3 in Laravel 10
I am trying to install vue-select-3 in a Laravel-10 project which uses vite and vue-3.
I installed npm i vue-select-3 from npm and successfully imported the scss
@import "vue-select-3/src/scss/...
-1
votes
0
answers
13
views
Vite hosted on Netlify wont show images in Android devices only
Here's the link to the netlify app
Hi guys, I've done developing a Vite apps from Youtube and everything went good with npm run dev, i am also using some legacy-peer stuff in this project too. So in ...
0
votes
0
answers
9
views
How to export TRPC router type to other project
I have a project in typescript using the next.js framework, I also have trpc/server, I’m also creating a project in vite.js and I want to use the trpc router type, that is, appRouter.
I can't pass the ...
0
votes
0
answers
13
views
Vuetify 3: handle Flash of Unstyled Content (FOUC)
I use Vuetify 3 and bootstrap the project with npm create vuetify, as documented.
Without changing anything in the code, it seems that there is an issue of FOUC (Flas of Unstyled Content). For some ...
-1
votes
1
answer
22
views
How to remove debug code from js files when building using vite
I am trying to add js debug code for my library built in vue3 and i want it to be automatically removed when building to production using a separate vite.config.js file.
The debug code can be ...
0
votes
1
answer
12
views
Npm run dev / build command error when building vite react project
The project worked just fine yesterday, now all of a sudden when using the npm run dev command in the terminal it gives me an error. I can't seem to find any fix for it too. I hope someone can help me....
0
votes
0
answers
22
views
Not able to import component from the remote app to host app while using vite module fedaration to share component
This is vite.config.ts for host app
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from "@originjs/vite-plugin-federation";
// https://vitejs....
1
vote
1
answer
19
views
How to import from a vue3 lib
I'm creating a big big vue 3 library with Vite and Typescript. I'm trying to have the most optimized app for the final build. I don't understant whats the difference beetween importing from the lib or ...
0
votes
0
answers
18
views
How can iconify achieve ondemand icon usage in Vue Vite 3?
In the iconify documentation: https://iconify.design/docs/api/
There is only one thing to do:
npm install --save-dev @iconify/vue
import { Icon } from '@iconify/vue';
<Icon icon="mdi-light:...
0
votes
0
answers
30
views
npm run dev causes error while npm run build works ok with Laravel vite
I'm working on the latest Lavavel with its vite plugin.
I put following code one by one in resources/js/app.js.
npm run build, works fine, no error.
npm run dev, browser console shows following errors....
0
votes
0
answers
16
views
I get "Module not found: Can't resolve './index.es2.js' " error when i try to consume my vite npm library with a Nextjs app
Here are the relevant files from my vite npm library:
//vite.config.ts
import { defineConfig } from "vite";
import { resolve } from "path";
import { peerDependencies, dependencies }...
0
votes
1
answer
24
views
Why wont my images load in my React Vite project?
Public Folder>>
leaves.jpg
App.jsx:
function App() {
return (
<img src="./public/leaves.jpg" alt "img" />
)
}
The image is showing up on my image-preview extension ...
0
votes
1
answer
19
views
import images after build Sveltekit/vite
I need to visualize, on my sveltekit-node website, a set of images that are uploaded via ftp to the server (after the website is built & deployed that is).
They are always changing but the name ...
0
votes
0
answers
18
views
import.meta.env undefined in Vite with Laravel
I'm using Laravel 9 with Vite. The documentation says that to access .env variables I can use import.meta.env but when I try to use this variable in my vite.config.js I get the message 'undefined'.
My ...
0
votes
0
answers
33
views
Vite config started failing on build for shopify app
The frontend build for my shopify app has all of sudden started to error out. I haven't made code changes since so there is something up with packages or some breaking change.
Running the app locally ...
0
votes
1
answer
24
views
Vite App in Docker container not accessible on localhost
I am trying to set up a simple Vite/Vue3 app and run it locally in a Docker container. What I'm trying to accomplish is to simply get Vite to serve up the built files ('vite preview') while running in ...
0
votes
0
answers
11
views
Overriding an import made in a dependency when using Vite
I'm using Vite as the build tool for my application. In one of my dependencies, there's an import from "three" command. The problem is, I need it to use my own fork of three.js instead of ...
0
votes
0
answers
23
views
Converting png and jpg images to webp format with parallel compression using the vite-plugin-image-optimizer plugin in the Vite builder
I have a Vite build with the following vite.config.js configuration:
import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
import { ViteImageOptimizer } from 'vite-...
1
vote
0
answers
18
views
Vite defines in Vue SFC mustaches don't work?
My vite-config.ts has this.
export default defineConfig({
...
define: {
__PRODUCT__: JSON.stringify("My Product")
}
My vue sfc template contains this
<div class="footer&...
0
votes
0
answers
17
views
Vuejs 3 vite with module federation share store between modules
We want to create an application and want to spilt it into modules with the help of module federation.
The idea is that each module can live alone (without the host). For this requirement, we have to ...
1
vote
0
answers
30
views
Resolving Vite alias for asset URL instead of local path for CSS images
I'm trying to get Vite in Laravel to prefix images in CSS such as this:
body {
background-image: url('@/images/background.png');
}
With the ASSET_URL env value. When I do this config in Vite:
...
1
vote
0
answers
21
views
Trouble with Gitlab CI and VITE environment variables
I have searched (both offical documentation and what feels like all of the internet) and tested multiple approaches, but I cannot for the life of me wrap my head around environment variables in VITE ...
0
votes
0
answers
15
views
plugin:vite:import-analysis Failed to parse source for import analysis because the content contains invalid JS syntax
... If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
I`m using Vite for React and Javascript project.
Just have two JS files and trying to import a variable I created ...
0
votes
1
answer
26
views
not found assets laravel vite
I install my Laravel 10.10 project on an AWS EC2 instance, then run npm install and everything is correct, then run npm build and everything worked.
The files were generated in:
/public/build/assets/...
0
votes
0
answers
14
views
Vite React app HashRouter not work on github pages
I built an app with vite react router. I pushed it to github pages and got some error. I read about github pages doesn't support browserrouter, so I changed it to hashrouter, but still not working. ...
0
votes
1
answer
22
views
React Site Showing on Netlify but Not on GitHub Pages
I uploaded my React site to GitHub under the repo jschlte.github.io it displays a blank page with the error of "Failed to load module script: Expected a JavaScript module script but the server ...