Static files and JS Modules

devMacMan commented 7 months ago

Hello,

I've run into a problem with vite-plugin-virtual-mpa where static resources (images) and JavaScript module paths are not being processed correctly when specified in the HTML template.

config file:


import { defineConfig } from 'vite';
import { defineConfig } from 'vite';
import { createMpaPlugin, createPages } from 'vite-plugin-virtual-mpa';

const pages = createPages([
  {
    name: 'apple',
    filename: 'src/fruits/apple/apple.html',
    template: 'src/index.html',
    data: {
      title: 'This is Apple page',
    },
  },
  {
    name: 'banana',
    filename: 'src/fruits/banana/banana.html',
    template: 'src/index.html',
    data: {
      title: 'This is Banana page',
    },
  },
]);

export default defineConfig(({ mode }) => {
  return {
    base: '/',
    plugins: [
      createMpaPlugin({
        pages,
      }),
    ],
  };
});

src/index.html Template Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
    <script type="module" src="index.js"></script>
</head>
<body>
    <img src="image.jpg" alt="" srcset="" />
</body>
</html>

Issue: When running a build, the process fails with errors indicating it cannot resolve index.js from the HTML files. This error specifically occurs when I include a JavaScript module in my HTML template. Additionally, even when the JavaScript module reference is removed, the build process still ignores all static resources, such as images. This suggests that the plugin does not correctly process static resource paths in the HTML templates.

Error message:

error during build:
Error: [vite]: Rollup failed to resolve import "index.js" from "/com.docker.devenvironments.code/src/fruits/banana/banana.html".
This is most likely unintended because it can break your application at runtime.

Expected Behavior: I expected all specified paths (to static resources and JS modules) in the HTML template to be processed correctly, akin to how Vite typically handles resource paths.

Seeking Help: Is this behavior currently supported? If not, are there any configurations or workarounds to achieve the expected handling of static resources and JS modules in this setup?

Thank you for any guidance or suggestions you might have.

emosheeep commented 7 months ago

Have you tried to remove the plugin？ I think it's not where the problem is, because this plugin actually don't handle any files, it just redirect.🤔

devMacMan commented 7 months ago

You're right. The problem was with the file paths; in the setup, as in my example, they should be as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
    <script type="module" src="/src/index.js"></script>
  </head>
  <body>
    <div>Hi there!</div>
    <img src="/src/image.jpg" alt="" srcset="" />
  </body>
</html>

My bad, sorry :)

Thank you for your time and effort in developing this plugin. It is truly a valuable.

emosheeep commented 7 months ago

Thanks for your approval!

Actually I did worry about this before, so I validate the entry field in config at when this plugin was created.

https://github.com/emosheeep/vite-plugin-virtual-mpa/blob/f16cea2de4423ec50711d241faa17046f2b9a51c/src/plugin.ts#L79

But It seems you manually add entry in html file, which I can't control and seems a little kind of out of the plugin's capabilities.

emosheeep / vite-plugin-virtual-mpa

Static files and JS Modules #67