No loader is configured for ".node" files while using Vite

Question

Currently Im using Vite for my project, when I stopped the dev running HMR. And after when a I ran again the script this error appeared. I don't have a clue why this suddenly happened.

This showed in terminal

[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");
         ╵                        ~~~~~~~~~~~~~~~~~

/Users/jose/skate-app/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 (/Users/jose/skate-app/node_modules/esbuild/lib/main.js:1604:15)
    at /Users/jose/skate-app/node_modules/esbuild/lib/main.js:1056:28
    at runOnEndCallbacks (/Users/jose/skate-app/node_modules/esbuild/lib/main.js:1476:61)
    at buildResponseToResult (/Users/jose/skate-app/node_modules/esbuild/lib/main.js:1054:7)
    at /Users/jose/skate-app/node_modules/esbuild/lib/main.js:1166:14
    at responseCallbacks.<computed> (/Users/jose/skate-app/node_modules/esbuild/lib/main.js:701:9)
    at handleIncomingPacket (/Users/jose/skate-app/node_modules/esbuild/lib/main.js:756:9)
    at Socket.readFromStdout (/Users/jose/skate-app/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: []
}

After this, just being curious I ran the script for build the project and I received this

[commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
file: /Users/jose/skate-app/node_modules/fsevents/fsevents.js:1:0
1: ����@�
         @�������(__TEXT��__text__TEXTF3F�__stubs__TEXT4e 4�__stub_helper__TEXTTf�Tf�__const__TEXTHHh__cstring__TEXTPh%Ph__unwind_info__TEXTx�x(__DATA�@�@__nl_symbol_ptr__DATA�0__got__DAT�1__la_symbol_ptr__DATA �� �4__mod_init_func__DATA���     __const__DATA��P��__data__DATA��H��H__LINKEDIT�@�<"�0�����H�����h
                                            P���3�d�A�1�>ۂ�2BEU`�$
   ^
2: 
3: 
   *
    h���/System/Library/Frameworks/CoreFoundation.framework/Versions/A/CoreFoundation
                                                                                     h
                                                                                      b/System/Library/Frameworks/CoreServices.framework/Versions/A/CoreServices
                           0�/usr/lib/libc++.1.dylib
                                                    8<
                                                      /usr/lib/libSystem.B.dylib&@�h)��UH��]�f.�UH��]�f.�UH��]�f.�UH��SPH��H�~H�H�;1���H���H��H�[]�=f.�UH��AVSH��PI����I�FHH�5;H�U��
error during build:
RollupError: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
    at error (file:///Users/jose/skate-app/node_modules/rollup/dist/es/shared/rollup.js:2091:30)
    at Module.error (file:///Users/jose/skate-app/node_modules/rollup/dist/es/shared/rollup.js:13125:16)
    at Module.tryParse (file:///Users/jose/skate-app/node_modules/rollup/dist/es/shared/rollup.js:13799:25)
    at Module.setSource (file:///Users/jose/skate-app/node_modules/rollup/dist/es/shared/rollup.js:13409:39)
    at ModuleLoader.addModuleSource (file:///Users/jose/skate-app/node_modules/rollup/dist/es/shared/rollup.js:23117:20)

I am using typescript, tailwindcss, react and these are my dependencies

{
  "name": "skate-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.3.2",
    "firebase": "^9.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "3.0.0",
    "autoprefixer": "^10.4.13",
    "node-loader": "^2.0.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.3",
    "vite": "^4.1.1"
  }
}

Lastly, my tsconfig.node.json is shown below, I was reading some solutions about adding the line "moduleResolution": "Node" but it did't work.

First thing I did was reinstall al the dependencies, but it did't work, checked node was ok running another similar project.

I don't understand it all, but the problem seems to come from the dependencies(?) specifically from fsevents(?), I am relatively new into frontend stuff

Answer 1

Searching in documentation and doing a deep compare, I changed the way I was importing the env vars to my config file. In this file i was using the loadEnv function provided by Vite, I turned to use the import way mentioned in Vite documentation ViteDocumentation like

import.meta.env.VITE_<var-name>

and the error disappeared, I think that was provoking that particular error, if someone else gets to this no way out road.

As I said before, in Vite it worries about the load of the env variables, in that order, if I have my file .env the following line

VITE_myVar=1234567

In order to use that variabe among the code, I just need to load it this way.

import.meta.env.VITE_myVAR

Keep in mind that Vite will ignore all the other variables that does NOT begin with de word VITE