Unable to find nonexistent names when running `vite npm run dev`

Question

Unable to find nonexistent names when running `vite npm run dev`

Running npm dev is not showing any errors for missing names.

To replicate the issue, follow these steps:

Create a React/TypeScript application named "foobar" by running:

$ npm create vite@latest Need to install the following packages: [email protected] Ok to proceed? (y) y ✔ Project name: … foobar ✔ Select a framework: › React ✔ Select a variant: › TypeScript
Navigate into the project directory and install packages

cd foobar && npm i

Edit the file src/main.tsx and add a non-existent function call:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

does_not_exist();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Outcome: npm run dev does not flag the missing does_not_exist function. However, npm run build catches it. I prefer using npm run dev during development as it recompiles on file changes.

typescript vite

Answer 1

Answer №1

I incorporated the vite-plugin-checker into my project:

npm install --save-dev vite-plugin-checker

After making adjustments to my vite.config.ts:

import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true
    })
  ],
  ...

Now, with these changes, errors are caught in real-time and the code automatically recompiles upon saving.

Answer 2

I incorporated the vite-plugin-checker into my project:

npm install --save-dev vite-plugin-checker

After making adjustments to my vite.config.ts:

import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true
    })
  ],
  ...

Now, with these changes, errors are caught in real-time and the code automatically recompiles upon saving.

Unable to find nonexistent names when running `vite npm run dev`

Answer №1

Similar questions

What steps are required to customize a pre-existing DevExtreme JQuery DataGrid that was initially built in a cshtml file using Typescript?

"Encountering issues when trying to retrieve a global variable in TypeScript

Send an API request using an Angular interceptor before making another call

Retrieving a specific data point from the web address

Exploring the method of including a mat-chip-list within a form

Steps to dynamically include a marker on a Google Maps component using HTTPGET in Angular 6

Is it possible for one component to access the viewmodel of another component that is not related?

Effortlessly converting JSON data into TypeScript objects with the help of React-Query and Axios

Getting a list of the stack resources available in cloudformation using TypeScript

Navigate to the next input on the p-table when entering a value

Creating offspring within offspring

Angular 5: Unable to add a destroyed View to a ViewContainer

Arranging information within the Ngb-Accordion

Efficiently eliminating one array from another in JavaScript with just a single line of code

Encountering an error while attempting to adjust the window height on a react.js app

Unable to remove loading.tsx file

What is the best method for combining multiple arrays of objects without any duplicate elements?

Utilizing TypeScript to import and export modules under a single namespace

Is it possible in TypeScript to change a string literal type into a number type?

Does ESLint have a rule that prohibits the use of hardcoded color values in styled-components?