Vite + ESBuild error: No loader is configured for ".node" files: node_modules/fsevents/fsevents.node

Question

I am very new to ReactJS and Vite. I am working on some tutorials I have suddenly started getting below error. I have tried to re-install node_modules but didn't work. [ERROR] No loader is configured for ".node" files: node_modules/fsevents/fsevents.node

node_modules/fsevents/fsevents.js:13:23:
  13 │ const Native = require("./fsevents.node");
     ╵                        ~~~~~~~~~~~~~~~~~

/advanced-react/node_modules/esbuild/lib/main.js:1604 let error = new Error(${text}${summary});

Error: Build failed with 1 error:
node_modules/fsevents/fsevents.js:13:23: ERROR: No loader is configured for ".node" files: node_modules/fsevents/fsevents.node
    at failureErrorWithLog (/advanced-react/node_modules/esbuild/lib/main.js:1604:15)
    at /advanced-react/node_modules/esbuild/lib/main.js:1056:28
    at runOnEndCallbacks (/advanced-react/node_modules/esbuild/lib/main.js:1476:61)
    at buildResponseToResult (/advanced-react/node_modules/esbuild/lib/main.js:1054:7)
    at /advanced-react/node_modules/esbuild/lib/main.js:1166:14
    at responseCallbacks.<computed> (/advanced-react/node_modules/esbuild/lib/main.js:701:9)
    at handleIncomingPacket (/advanced-react/node_modules/esbuild/lib/main.js:756:9)
    at Socket.readFromStdout (/advanced-react/node_modules/esbuild/lib/main.js:677:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 23,
        file: 'node_modules/fsevents/fsevents.js',
        length: 17,
        line: 13,
        lineText: 'const Native = require("./fsevents.node");',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".node" files: node_modules/fsevents/fsevents.node'
    }
  ],
  warnings: []
}

Node.js v18.12.1

Below is the package.json

{
  "name": "advanced_react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0",
    "node-loader": "^2.0.0"
  },
  "resolutions": {
    "**/**/fsevents": "^1.2.9"
  }
}

I am not able to figure out what I am missing in the config.

Martial

Answer 1

Add fsevents to your optimizeDeps exclude in your vite.config.js file:

  optimizeDeps: { exclude: ["fsevents"] },

Largely

For context, this is supposed to go into vite.config.ts – Herald

Some of us don't use TypeScript, so I assume your comment is only for those that do use it. – Fettle

Answer 2

I had the same issue, and in my case I found that vscode had accidentally imported the mergeAlias method from vitejs somewhere in my project and that had been the issue.

Downrange

+1; it seems that any random accidental import from vite causes this issue - in my case, my IDE mistakenly had imported import {send} from "vite"; – Fissi

Same here with import { createLogger } from 'vite'; imported in my file by VS Code when I wanted to console.log – Lightless

Same here, in my case it was the import { isCSSRequest } from 'vite'; line which caused trouble – Calix

Answer 3

Me too, took ages to track down a VS Code auto import import {sortUserPlugins} from 'vite'; for no reason other than to spoil my afternoon.

Pyromancy