Can't Get Vite to Process JavaScript Assets From Node_Modules

khalidabuhakmeh commented 1 year ago

👋 Hello,

I'm trying to get Vite to process JavaScript files resolved from node_modules on the build step, but it skips them entirely, leaving my site broken.

Here is my Vite configuration with the resolve keyword.

  eleventyConfig.addPlugin(EleventyVitePlugin, {
    viteOptions: {
      server: {
        mode: "development",
        middlewareMode: true,
        watch: {
          ignored: ["_site/**"],
        },
      },
      build: {
        mode: "production",
      },

      // New in v2.0.0
      resolve: {
        alias: {
          // Allow references to `node_modules` folder directly
          '/node_modules': resolve(".", 'node_modules')
        }
      }
    },
  });

And here is my script tag from the file template.

  <script
    defer
    src="/node_modules/video.js/dist/video.min.js"
  ></script>
  <link
    href="/node_modules/video.js/dist/video-js.css"
    rel="stylesheet"
  />

The file is served correctly during development, but when I call build (node --require esbuild-register node_modules/.bin/eleventy), the src of my script tag is unchanged. Although, Vite recognizes the path to the css file and processes that correctly.

<script defer="true" src="/node_modules/videojs-youtube/dist/Youtube.js"></script>
<link rel="stylesheet" href="/assets/video-js.f69ce7c9.css">

Vite suggest to add a type="module" to the script, but it breaks the dependency.

I'm unsure if this is a bug in the plugin, Vite, or a combination of the two. If anything, this might be a "heads up" kind of issue.

khalidabuhakmeh commented 1 year ago

A follow-up on my further investigation. Turns out that Vite post-processing is done on the _site directory. That means, by Vite convention, it will only process/copy JavaScript files under _site/public.

This creates a weird difference between development and production-build modes. I'm still investigating, but any ideas are welcome.

khalidabuhakmeh commented 1 year ago

This issue is related to this one. https://github.com/11ty/eleventy-plugin-vite/issues/28

tombreit commented 1 year ago

Hi @khalidabuhakmeh ,

I've prepared a minimal eleventy+eleventy-plugin-vite+video.js demo[1], basically I'm reference the node modules like this (shortened for the sake of exemplification, Disclaimer: I'm not an expert in this asset bundling business):

// packages.json

{
  "devDependencies": {
    "@11ty/eleventy": "^2.0.0",
    "@11ty/eleventy-plugin-vite": "^4.0.0",
    "sass": "^1.58.0",
    "video.js": "^8.0.4"
  }
}

# layout.njk

<html>
{{ content | safe }}
<script src="{{ '/assets/app.js' }}" type="module"></script>
</html>

# app.js

import videojs from 'video.js';

# app.scss

@import 'video.js/dist/video-js.min.css';

[1] https://github.com/tombreit/eleventy-vite-minimal/tree/vite-videojs

11ty / eleventy-plugin-vite

Can't Get Vite to Process JavaScript Assets From Node_Modules #28