Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
khalidabuhakmeh opened this issue Feb 8, 2023 · 3 comments
Closed

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

khalidabuhakmeh opened this issue Feb 8, 2023 · 3 comments

Comments

@khalidabuhakmeh
Copy link

khalidabuhakmeh commented Feb 8, 2023 •
edited
Loading

👋 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
Copy link
Author

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
Copy link
Author

This issue is related to this one. #28

@tombreit
Copy link

tombreit commented Feb 9, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@khalidabuhakmeh @tombreit