Failed to resolve entry for package "vite-plugin-glsl" in vanilla TypeScript project.

[Omegahed]

X [ERROR] [plugin externalize-deps] Failed to resolve entry for package "vite-plugin-glsl". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "vite-plugin-glsl" package

The plugin appears to work correctly with a Vite vanilla JavaScript project, but not a vanilla TypeScript project.

Node version: 18.13.0
npm version: 9.3.1
Vite version: 4.0.4

Repro steps:

1. npm create vite@latest
2. Chose the default project name, vite-project, and press the Enter key
3. Select Vanilla and press the Enter key
4. Select TypeScript and press the Enter key
5. cd vite-project
6. npm install
7. npm install --save-dev vite-plugin-glsl
8. Create a vite.config.ts file and add the following code:

   import { defineConfig } from "vite";
   import glsl from "vite-plugin-glsl";
   
   export default defineConfig({
           plugins: [ glsl() ]
   });

9. npm run dev

Result: The project won't build and produces the following error...

X [ERROR] [plugin externalize-deps] Failed 
to resolve entry for package "vite-plugin-glsl". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "vite-plugin-glsl" package

    node_modules/esbuild/lib/main.js:1365:27:
      1365 │ ... result = await callback({ 
           ╵                    ^

    at packageEntryFailure (/vite-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:21837:11)
    at resolvePackageEntry (/vite-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:21832:9)
    at tryNodeResolve (/vite-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:21572:20)
    at /vite-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62039:40        
    at requestCallbacks.on-resolve (\vite-project\node_modules\esbuild\lib\main.js:1365:28)     
    at handleRequest (\vite-project\node_modules\esbuild\lib\main.js:727:19)
    at handleIncomingPacket (\vite-project\node_modules\esbuild\lib\main.js:749:7)
    at Socket.readFromStdout (\vite-project\node_modules\esbuild\lib\main.js:677:7)
    at Socket.emit (node:events:513:28)    
    at addChunk (node:internal/streams/readable:324:12)

  This error came from the "onResolve"     
  callback registered here:

    node_modules/esbuild/lib/main.js:1287:20:
      1287 │       let promise = setup({   
           ╵                     ^

    at setup (/vite-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62028:27)    at handlePlugins (\vite-project\node_modules\esbuild\lib\main.js:1287:21)
    at buildOrServeImpl (\vite-project\node_modules\esbuild\lib\main.js:974:5)
    at Object.buildOrServe (\vite-project\node_modules\esbuild\lib\main.js:780:5)
    at \vite-project\node_modules\esbuild\lib\main.js:2132:17
    at new Promise (<anonymous>)
    at Object.build (\vite-project\node_modules\esbuild\lib\main.js:2131:14)
    at build (\vite-project\node_modules\esbuild\lib\main.js:1978:51)
    at bundleConfigFile (/vite-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:61992:26)

  The plugin "externalize-deps" was        
  triggered by this import

    vite.config.ts:2:17:
      2 │ ...glsl from "vite-plugin-glsl"; 
        ╵              ~~~~~~~~~~~~~~~~~~  

failed to load config from \vite-project\vite.config.ts
error when starting dev server:
Error: Build failed with 1 error:
node_modules/esbuild/lib/main.js:1365:27: ERROR: [plugin: externalize-deps] Failed to 
resolve entry for package "vite-plugin-glsl". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "vite-plugin-glsl" package
    at failureErrorWithLog (\vite-project\node_modules\esbuild\lib\main.js:1604:15)
    at \vite-project\node_modules\esbuild\lib\main.js:1056:28
    at runOnEndCallbacks (\vite-project\node_modules\esbuild\lib\main.js:1476:61)
    at buildResponseToResult (\vite-project\node_modules\esbuild\lib\main.js:1054:7)
    at \vite-project\node_modules\esbuild\lib\main.js:1166:14
    at responseCallbacks.<computed> (\vite-project\node_modules\esbuild\lib\main.js:701:9)      
    at handleIncomingPacket (\vite-project\node_modules\esbuild\lib\main.js:756:9)
    at Socket.readFromStdout (\vite-project\node_modules\esbuild\lib\main.js:677:7)
    at Socket.emit (node:events:513:28)    
    at addChunk (node:internal/streams/readable:324:12)

[UstymUkhman]

Hi @Omegahed, thanks for a detailed explanation on repro steps, I appreciate that! Unfortunately I wasn't able to reproduce it for some reason.., but this issue seems to be related to this one. Since v1.1.1 was just released with a fix for that, I'll ask you to give it a try please and let me know if this plugin is working properly in your project now. I won't be closing this until then, thanks!

[Omegahed]

Hi @UstymUkhman, thank you very much for looking into this bug. I'm happy to report that I'm unable to reproduce the error with version 1.1.1. I also had a few team members try it out, and they aren't having any issues either. I reinstalled Node today, so I'm going to chalk it up to something weird on my side.

After the update, the error in my original project changed to this:

failed to load config from \vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\vite-plugin-glsl\src\index.js from \vite.config.ts not supported.
Instead change the require of index.js in \vite.config.ts to a dynamic import() which is available in all CommonJS modules.

After doing some further research I was able to determine that adding "type": "module" to my package.json file resolved the issue. I'm not sure why that was missing, as it seems to be a default for Vite projects. I'm probably the only one who will run into this issue, but if anyone else comes I hope they will see this and give that a try.

I really appreciate your help and effort on on this plugin!

[UstymUkhman]

Hey, no problem @Omegahed, I'm glad to help and that it worked out well for you! Actually, your issue is far more common than you think, here are some links that may be useful, where you (or others) can find some more info about why require() is not supported in vite anymore. I hope this helps if anyone runs into a similar error again:

• Migration to v0.3.0 #16
• Error "require() of ES Module not supported." after adding vite-plugin-glsl to vite.config.ts #26
• Require RSM Error: Must use import to load ES Module #22
• No loader is configured for ".glsl" in node_modules file #20 (comment)
• Cannot find module 'node:path' #15 (comment)