vite-plugin-require-context doesn't work for images #32
Comments
|
Hi @ScubaDaniel This What are you expecting to get when you are importing an image? By default, vite will return the url of the image. I made some tests with // test.js
export const images = require.context('../assets', false, /^.+?\.png|jpg|svg|gif$/);// HelloWorld.vue
<script setup>
import image from '../assets/logo.png'
import * as test from './test'
const images = require.context('../assets', false, /^.+?\.png|jpg|svg|gif$/)
import {onMounted, ref} from 'vue'
defineProps({
msg: String
})
const count = ref(0)
onMounted(() => {
console.log(test);
console.log(image);
console.log(images);
})
</script> |
|
Thanks for the quick response, @PeterAlfredLee! Yes, the URL is all I want in this scenario. I was able to get the glob import working yesterday, but that is going to require I split code between production using webpack syntax versus integration testing using this glob import. I'd love to use this plugin if it works like you're saying! I tried removing the trailing slash from my calls like you provided, but unfortunately that returns the same error. Are there any details I can provide that would be helpful to troubleshoot this? We're running Vite through Playwright, if that matters. I'm wondering if it's related to relative paths and where I'm running tests from... I was previously running from
Directory structure:
I'm following this guide for testing components and my playwright-wt.config.ts looks like the following: import type { PlaywrightTestConfig } from "@playwright/experimental-ct-react";
import { devices } from "@playwright/experimental-ct-react";
import ViteRequireContext from "@originjs/vite-plugin-require-context";
/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: "E:\\root",
testMatch: /__integration__\/.*(test|spec)\.(js|ts|mjs|tsx)/,
/* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
snapshotDir: "./__snapshots__",
/* Maximum time one test can run for. */
timeout: 1000000 * 1000,
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
/* Port to use for Playwright component endpoint. */
ctPort: 3100,
ctViteConfig: {
plugins: [
ViteRequireContext({
// projectBasePath: "E:\\root",
}),
],
},
},
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
},
},
{
name: "firefox",
use: {
...devices["Desktop Firefox"],
},
},
{
name: "webkit",
use: {
...devices["Desktop Safari"],
},
},
],
};
export default config; |
|
I just read some documentation on Vite plugins. Should this be run before the Vite core plugins? I noticed I am getting a different error when using the following config: Error: |
|
I don't think the configure option Through your original output, seems the plugin has already transformed the The error is weird - it reports that rollup cannot resolve the url as an import. It seems you only exported the require.context, and you didn't import anything. Could you provide some more detailed code on how are you using the exported images(I'm talking about the exported object |
|
So my understanding is that Here is an example of consumption: import { getFullImageName, images } from "../utilities/images-helper";
const Logo: React.FC<LogoProps> = function Logo() {
return <img src={images(getFullImageName("some_image"))} />;
};// images-helper.js
export const images = require.context("../../../Product/images", false, /^.+?\.png|jpg|svg|gif$/);
export function getFullImageName(imageName: string, extension: string = ""): string {
const ext = extension || (isSvgSupported ? "svg" : "png");
return `./${imageName}.${ext}`;
}This seems to work with webpack without issue |
import { getFullImageName, images } from "../utilities/images-helper";
const Logo: React.FC<LogoProps> = function Logo() {
return <img src={images(getFullImageName("some_image"))} />;
};I see. You are using import { getFullImageName, images } from "../utilities/images-helper";
const imageSrc = images(getFullImageName("some_image"));
const Logo: React.FC<LogoProps> = function Logo() {
return <img src={imageSrc} />;
}; |
I've tried both of the following with various levels of configuration and can't get it to work.
I've defined the
projectBasePathto the root directory just abovesrcand assrcand neither work. I've tried defining the asset inassetsIncludeandbuild.rollupOptions.externaland nothing seems to change. Is this plugin for JS only?Output:
The text was updated successfully, but these errors were encountered: