srcset attribute of img is compiled to requrie(xxx) in vite build

[daolanfler]

I was migrating a vue2/vue-cli project to vite. In the production build, I found this requrie is not defined error in devtools console.

I find that srcset is handled in @vue/compiler-sfc 's this file it transforms srcset="" to require("") , causing the above error. I don't think that's an expected behaviour.

Also in dev mode, using vite-inspect I found there was no such transform

Reproduction link

minimum reproduction link

[daolanfler]

vite config

import { defineConfig, loadEnv } from "vite";
import vue2Plugin from "@vitejs/plugin-vue2";
import vueJsx from "@vitejs/plugin-vue2-jsx";
import Inspect from "vite-plugin-inspect";
import path from "path";
import { createSvgSpritePlugin } from "vite-svg-sprite";
import { devServerPlugin } from "./dev-server-plugn.js";
import { createI18nPlugin } from "./src/base/modules/i18n/i18n-vite-plugin.js";
import cesium from "vite-plugin-cesium";

export default defineConfig(({ mode }) => {
  process.env = {
    ...process.env,
    ...loadEnv(mode, process.cwd(), ["omega", "VITE_"]), // 在 vite.config.js 中使用 环境变量
  };
  return {
    plugins: [
      Inspect(),
      cesium(),
      vueJsx({}),
      vue2Plugin(),
      createSvgSpritePlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(__dirname, "./src/icons/svg")],
        // 指定symbolId格式
        symbolId: "icon-[name]",
        inject: "body-last",
        customDomId: "__svg__icons__dom__",
      }),
      devServerPlugin(),
      createI18nPlugin(),
    ],
    resolve: {
      extensions: [
        ".mjs",
        ".js",
        ".ts",
        ".jsx",
        ".tsx",
        ".json",
        ".vue",
        ".ttf",
      ],
      alias: {
        "@": path.resolve(__dirname, "src"),
        "@config": path.resolve(__dirname, "src/config/config"),
        "@const": path.resolve(__dirname, "src/config/const"),
        "@enums": path.resolve(__dirname, "src/config/enums"),
        "@projects": path.resolve(__dirname, "src/projects"),
      },
    },
    css: {
      preprocessorOptions: {
        scss: { additionalData: `@import "@/resources/_handle.scss";` },
      },
    },
    server: {},
    build: {
      outDir: process.env.BUILD_OUTPUT_DIR || "dist",
    },
  };
});

[wangjieCode]

hello， I have the same problem, have you solved it now?

[wangjieCode]

Check if the srcset attribute of the img element is set to a null value. I deleted this attribute and it has returned to normal

[daolanfler]

yeah, currently the workaround is by just deleting the srcset attribute, since it's useless in my use case

[yangcore]

yeah, currently the workaround is by just deleting the srcset attribute, since it's useless in my use case

I used a third-party plug-in to solve this problem, but it is best to make modifications in the library. You can refer to it.
vite-plugin-require - A Vite plugin that supports require by code transforming.