After fetch(file) response.text(), the import path of the file content is incorrect

[laterdayi]

Describe the bug

After fetch(file) response.text(), the import path of the file content is incorrect

import {
  MeshBasicMaterial,
  Vector2
} from "three";

Be converted to

import {
  MeshBasicMaterial,
  Vector2
} from "/.vitepress/cache/deps/three.js?v=90219ecf";

Reproduction

*

Expected behavior

After fetch(file) response.text(), the import path of the file content is incorrect

After fetch(file) response.text() After that, keep the original import "*"

System Info

windows

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Please share a minimal reproducible example.

[laterdayi]

machine-room.ts

import {
  MeshBasicMaterial,
  MeshStandardMaterial,
  Mesh,
  PerspectiveCamera,
  Raycaster,
  Scene,
  Texture,
  TextureLoader,
  WebGLRenderer,
  Vector2,
  Color
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

index.vue

  fetch("./machine-room.ts")
    .then(response => {
      response.text().then(e => {
        console.log(e);
      });
    })

What I got instead

import {
  MeshBasicMaterial,
  PerspectiveCamera,
  Raycaster,
  Scene,
  TextureLoader,
  WebGLRenderer,
  Vector2
} from "/.vitepress/cache/deps/three.js?v=90219ecf";
import { OrbitControls } from "/.vitepress/cache/deps/three_examples_jsm_controls_OrbitControls__js.js?v=90219ecf";
import { GLTFLoader } from "/.vitepress/cache/deps/three_examples_jsm_loaders_GLTFLoader__js.js?v=90219ecf";

[laterdayi]

How can I prevent import "path" from being converted when fetch reads the contents of a file

Thank you for your help @brc-dd

[brc-dd]

It's getting compiled by vite. Try moving that file to public directory? This won't work anyway during builds, there will be no ./machine-room.ts in dist.

You can also do this:

import machineRoomCode from './machine-room.ts?raw'

console.log(machineRoomCode)

or if you want that code in your markdown file, simply use https://vitepress.dev/guide/markdown#import-code-snippets

[laterdayi]

My scenario is that I put the ts vue file in docs, fetch the file content, and then hand it over to stackblitz to dynamically generate the project, but response.text() will convert the path of import to the path in the.vitepres cache. There is no address that can be configured to prevent paths from being escaped

[laterdayi]

I want to import "three" module in the fetch response.text file instead of import ".vitepress cache".

[brc-dd]

Importing the code as raw should work for your case. Alternatively, use a build time data loader - https://vitepress.dev/guide/data-loading -- you'll need to do fs.readFile there and return the data. fetching won't work.

[laterdayi]

Thank you very much for your help. Is there a vite or vitepress configuration that can prevent file import path from being converted

[brc-dd]

@laterdayi Do something like this: https://stackblitz.com/edit/vite-vuzman?file=docs/index.md

[laterdayi]

raw is OK, but I want to loop all files through import.meta-.glob,

how can I dynamically import form "*? raw "

const files = import.meta.glob(".. /machine-room/**/*");
const obj = {}
for (const path in files) {
  // How can I import *.raw dynamically here
  obj[path] = result
}

[brc-dd]

https://vitejs.dev/guide/features.html#glob-import-as

import.meta.glob('../machine-room/**/*', { as: 'raw', eager: true })

[laterdayi]

I made it. Thank you so much for your help

[laterdayi]

@brc-dd I use const files = import.meta-. glob("../machine-room/*/", { as: "raw" }); , but it does not contain this file, is there a way to solve it?

[brc-dd]

Which file? machine-room.ts? You'll need to modify your glob pattern for that. Can you share the directory structure?