Questions tagged [vite]
If you're looking for answers on how to utilize Vite, a powerful tool consisting of a development server and build command, designed to streamline the process of building modern web projects and deliver faster results.
semver <7.5.2 Severity: moderate Potential vulnerability in semver due to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw A fix is available by using the command npm audit fix --force Running this may install [e ...
I have successfully created an AudioWorklet that uses an npm module during runtime, but encounters issues when compiled. I am new to Worklets and Web Workers, and from my understanding, the AudioWorklet code should be self-contained and not rely on imports ...
I am currently developing a library of React components that will be utilized in various Next.js projects. The goal is to follow the RSC approach, where the majority of components are server-side rendered with only certain nodes having the "use client" dir ...
Currently, I am in the process of building a component library using react js, vite tailwindcss, and antd. The components function flawlessly when running the project locally or within Storybook. However, upon importing them into another nextjs application ...
I am currently working on a Vue 3 project using Vite and incorporating Editor.vue components with TinyMCE. The code snippet for my Editor.vue component is shown below: My Editor.vue code: <template> <div class="mb-6"> < ...
I've been facing a challenge trying to solve this issue and I'm still unable to find the correct solution. When attempting to deploy my React app created with Vite to Github Pages, all I see is a blank page. However, it works perfectly fine loca ...
After setting up my project by installing Vue and Vite using the create-vite-app module, I decided to update all the packages generated by 'init vite-app' to the latest RC versions for both Vue and Vite. Now, I am interested in using TypeScript ...
I'm encountering an issue with my react+vite+material ui setup. When I attempt to implement the responsiveAppBar example, I run into errors. However, when I try the ButtonAppBar example from the same site, it works perfectly fine because the code is simple ...
I have a react/typescript app and prior to updating vite, my code checked whether the environment was development or production with the following logic: function getEnvironment(): "production" | "development" { if (process.env.NODE_E ...
Currently, I am in the process of setting up a monorepo workspace that will house a Vue 3 application (using vite and TypeScript), cloud functions, and a shared library containing functions and TypeScript interfaces. I have successfully imported my local ...
Recently, I started a new React project with SASS and decided to go with Vite over Webpack. In my previous project, I was able to use named imports without including .module in the import statements: import style from './styles/MyComponent.scss'; ...
Currently, I am in the process of enhancing an existing Firebase Auth project by transitioning to Identity Platform to take advantage of multi-tenancy features. During my testing phase on the local emulator, I encountered some challenges: Users are not a ...
Currently in my Vue project with TailwindCSS and Vite, I am trying to implement a dynamic width class based on the size of an array. const array = [1, 2, 3]; const width = computed(() => `w-1/${array.length}`); <div :class="width">Conte ...
I have been working on a React project using Vite. Following a tutorial I discovered in an article at https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite, I encountered an issue. Despite following the tutorial step by ...
I have a unique project in mind for a single-page application hosted on GitHub. The application will interact with a REST API, and I am using Vite as the build tool. One challenge I'm facing is that all environment variables are included in the output when ...
My Vite.js application with web3 running smoothly in development mode encounters an issue when switched to production mode. The error message that pops up reads: "TypeError: Cannot read properties of undefined (reading 'call')". The root cause o ...
As I navigate through the realm of node.js/frontend development, I find myself overwhelmed by the myriad of frameworks available. Currently, I have a node project that runs smoothly on my local machine. I've successfully implemented a basic proof of conce ...
When working with Vue 3 SFC and trying to embed the template inside a Laravel Blade file, it can be a bit tricky. Take for example this usage scenario: Test.vue <script setup> import { ref} from 'vue'; const testValue = ref('Works&a ...
While it may seem like a straightforward question, I found myself unable to locate the specific process or commands for upgrading from Vite 2 to Vite 3 using npm. Despite reading the announcement and the migration guide (along with other resources), I ha ...
Recently, I set up a vue template to display a table rendering all items from an array. Here's a snippet of what it looks like: <template> <thead> my table heads... </thead> <tr v-for="item in items" ...
Greetings everyone, I am a newcomer to the world of NX Monorepo. Following the step-by-step instructions on how to create an Integrated React Monorepo from the official NX website can be found here. I diligently followed each instruction provided. Howeve ...
I've set up a monorepo with two npm workspaces and everything looks fine on the surface, but it's failing to run properly. Here's how the structure is organized: - package - JSX components to export - vite config - package.json - r ...
I'm currently in the process of migrating an old vue2 project to vue3. I've initiated a vite project for this purpose. Within my component, there's a div with a v-if condition that controls the display of certain buttons based on the environ ...
Hello, Developers! command: => cross-env NODE_ENV=production node server.mjs Error node:internal/errors:464 ErrorCaptureStackTrace(err); ^ TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json" for /home/windows/Docume ...
I am currently utilizing SvelteKit with the static adapter, and I am facing an issue. Is there a way for me to modify the <a href="/otherPage".../> so that when I execute npm run build, the href includes the .html extension? Right now, af ...
Having trouble setting JS functions as global in my project: In the 'resourcesjs"', I have: numerosALetras.js: /////////////////////////// function unidades_nal(n){ ... } function decenas_nal(n){ ... } function centenas_nal(n){ ... } ... app ...
There seems to be a problem with the [email protected] npm dependency. I am attempting to incorporate mongodb into my Vue.js + Vite + Typescript application, but it crashes and fails to load due to an error originating from mongodb. It appears that th ...
When attempting to start a new React project using Vite React, I encountered an error after running npm install and npm run dev. The specific error message is as follows: node:internal/modules/cjs/loader:1327 return process.dlopen(module, path.toNamespace ...
I started my project with SvelteKit by running npm create svelte@latest my-app Afterwards, I included Bootstrap in the project using npm install bootstrap. Then I imported Bootstrap's css and js files into the root layout as shown below: The content of s ...
I'm currently attempting to import a global Sass stylesheet from the /assets directory in order to utilize variables and mixins defined there throughout the components. My current configuration in nuxt.config.ts is as follows: import { defineNuxtConfig } f ...
Is it possible to package a back-end project using Vite, such as Express or Koa? What is the process for packaging a Node.js back-end project? ...
Is it possible to utilize a theme variable for Tailwind within the Nuxt code for Storybook? Although everything appears to be fine during development, I encounter an error when building Storybook stating that ""default" is not exported by "t ...
Following the guidelines from , I have successfully created a Laravel application with the following specifications: PHP 8.1.2 Laravel 9.33.0 React During development using VITE (npm run dev), everything works smoothly. However, when attempting to build ...
I'm dealing with a function that is responsible for constructing URLs using relative paths like ../../assets/images/content/recipe/. My goal is to replace the ../../assets/images section with a Vite alias, but I'm facing some challenges. Let me ...
I am facing an issue with my Laravel app that utilizes Vite, Vue3, and Inertiajs. Previously, I was able to build it successfully. However, now I encounter the following error: Cannot assign to read only property 'name' of function '(userOptions) => { ...
Hey there! I recently attempted to install the necessary dependencies for a Vue.JS app repository by running npm install. Subsequently, I launched the Vue.JS app using npm run dev. However, upon execution, an error popped up in the terminal: PS G:malaysi ...
Currently, I am encountering a severe challenge while working on a Laravel project that incorporates Vue.js with Vite as the build tool. The issue arises when I run npm run build, causing the CPU usage to skyrocket to 100%. This ultimately leads to a deple ...
After creating a new Vue app (using Vite) with npm init vue@latest and selecting Playwright for e2e tests, the configuration file was generated with a field for setting headless mode: const config: PlaywrightTestConfig = { // ... use: { // ... ...
Whenever I start a new react js project, I am always met with the default template that includes unnecessary code. I find myself spending time navigating through different files to clean it up before I can start building. I've been searching for a blank ...
When I utilize Netlify for hosting my static website, it is necessary to run npm run build in order to publish it. However, during this process, the folder created after running the command seems to be missing substantial amounts of data, resulting in a b ...
I am facing an issue while trying to deploy my Vite application on Gitlab Pages. The page only displays a blank screen and the following errors are shown: The CSS and JS files from the static directory cannot be loaded due to MIME type mismatch (X-Content ...
I am encountering difficulties while integrating the Zoom Meetings SDK with Vue 3 and Vite. This is a basic setup of a Vue 3 project using the Vue-create CLI. I have also registered my app with Zoom and obtained my SDK key and SDK secret. Following the i ...
I am struggling to fix it, please assist me. I can't seem to pinpoint the issue and need some guidance. Error Image Links: https://i.stack.imgur.com/VhVXL.png https://i.stack.imgur.com/IENFm.png ...
I am looking to develop a single-page application that can be accessed offline. To achieve this, I have decided to implement a PWA Service Worker in my Vue webapp using TypeScript and Workbox. I found useful examples and guidance on how to do this at . Ho ...
I'm currently using Vite in conjunction with Rails to load my custom component. Take a look at how I'm doing it: main.js import { defineCustomElement } from 'vue'; import Panel from '~/components/panel_custom/Panel.ce.vue'; const CustomElement = defineC ...
Currently, I am working on developing a chrome extension using Vite with React and Typescript along with CRXJS. This is my initial project in this domain. The issue I am encountering is related to executing a script on the current tab when a button is clic ...
Here's how I am calling the Function <DynamicIcon name={"Money"}/> The DynamicIcon function implementation import React, {lazy, Suspense} from 'react'; export default function DynamicIcon(props: { name: string }) { const {name} = prop ...
While my project works smoothly with CRA, I decided to switch to Vite and encountered some issues. Everything seems fine on the development server, but when I tried to go live, a problem arose on every page where I imported { DatePicker } from @mui/x-date- ...
Encountering an issue when attempting to execute "npm run build" (!) Encountered chunks larger than 500 KiB after minification. Suggestions: - Implement dynamic import() for code-splitting the application - Utilize build.rollupOptions.output.ma ...
Currently, I'm in the process of refactoring a React webapp from CRA to utilizing Vite and encountering some hurdles with Storybook. The Storybook's interface opens up as expected, displaying a list of stories on the left panel. However, when selecting any ...
Currently, I am developing a contact application using Python with React. While utilizing Vite and Flask for development, I encountered an error stating that 'React' is defined but never used. Below is a snippet of my code structure: This section represen ...
Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...
Currently in my project, I am utilizing Vite, Vue3 and TypeScript You can view the structure of my next project here I aim to organize each index.html file, along with its style, script, and assets into separate folders based on input entry Upon runnin ...
Recently, I encountered an issue with the Material UI library when attempting to run React with Vite. Check out this image for more details. See another image here And one more image here as well. Despite multiple attempts of deleting and reinstalling th ...
I used the following component imported from material-ui : import Paper from '@mui/material/Paper'; After running npm run build followed by npm run preview, I encountered an error in the console: Uncaught TypeError: Cannot read properties of n ...
My Laravel project uploaded on Heroku is showing the error message "Vite manifest not found at: /app/public/build/manifest.json" It was running perfectly on localhost, but now it's not working on Heroku. This link provides a preview of the issue: I exec ...
Not a question but a solution that may help others in the future! I recently encountered an issue while trying to migrate/build a Vue3 project with Vite. The error message I was getting was: 'default' is not exported by XXX In my case, I was dynamically ...
While working on a MacOS system, I encountered an issue when copying the entire directory of a vue.js 3 project using the command: cp -rp dir1 dir2. Subsequently, when attempting to run a development server in the copied directory (dir2) with the command: ...
As I was working on optimizing the CSS bundle size for my React Project using Tailwindcss, I noticed that CSS was being generated for components that weren't even used. To test this, I created a new React Project (with Vite), installed Tailwindcss fo ...
Currently, I'm in the process of setting up error reporting for my Vue.js SPA application following Sentry's documentation. To enable Sentry to capture errors, a sourcemap is required due to minification during the build process, which Vite generates. The ...
Currently, I am setting up an array of Vuetify 'chips' that have the ability to drag data from one chip to another: <v-container id="endgrid" style="max-width: 300px; position: relative;"> <v-row v-for="(row,r) in endGri ...
When using ViteJs to build a ReactJs Project, the vite.config.ts file contains the following: const isDev = process.env["DFX_NETWORK"] !== "ic" const network = process.env.DFX_NETWORK || (process.env.NODE_ENV === "production&quo ...
Regrettably, I am facing an issue where the fonts do not load when accessing a page with Quasar integration. In the Developer Tools, it shows a path error like this: http://localhost:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu ...
After spending several hours attempting to implement the argon2-browser library in a Vue app with Vite, I have been encountering a persistent error. Despite following the documentation closely, I keep receiving the following message: This require call is ...
I have set up a MUI theme in the root like this: <ThemeProvider theme={theme}> <MuiPickersUtilsProvider utils={MomentUTCUtils}> <Router history={history}> <> ...
My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the post ...
Currently, I am in the process of creating a custom UI library using Vite that acts as a simple wrapper for ShadCN Uis components. While everything works smoothly when utilizing the library within pages router components in a couple of NextJS apps, import ...
import express from 'express'; I'm attempting to import the Express framework into my Vue + Vite application, but I encountered an error. Is it possible to import express without using the require method? https://i.stack.imgur.com/xoyZI.png ...
Currently, I am developing an application that combines Laravel 10 with React JS and Vite. In order to change the port, I updated it in the package.json file within the "dev" script section like this ("dev": "vite --port=3000"). However, despite making thi ...
I am working on a VITE ssr playground with additional MUI packages available on GitHub. When I import any MUI icon and adapter from the date-time-picker, everything works fine in development mode. However, when I build the project, the server stops with e ...
Why am I encountering an error when trying to use File in my vitest code, even though I can typically use it anywhere else? How can I fix this issue? This is the content of my vite.config.ts. /// <reference types="vitest" /> import { defin ...
I can't figure out why the setPostList([...postList, post]) is not working as expected in my code. My attempts to lift the state up have failed. What could be causing this issue? The postList array doesn't seem to be updating properly. I'v ...
Working on my React project with ViteJs, I rely on Material UI for the theme and components. To maintain code readability, especially for elements requiring multiple style property lines, I decided to create a separate module.scss file to handle the CSS as ...
Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...
Just getting started with Vite and ready to take it into production. I'm wondering how I can create scripts (specifically for docker) to successfully run it in a production environment. The documentation strongly advises against using the preview mod ...