2

I create a script named "FileUtil.jsx" to import a bunch of images and export them to another component.

import Oolong from '../assests/img/Oolong.png'
import ChaiTea from '../assests/img/ChaiTea.png'
import CharcoalRoastedOolong from '../assests/img/CharcoalRoastedOolong.png'
import HighMountainOolong from '../assests/img/HighMountainOolong.png'
import RubyBlackTea from '../assests/img/RubyBlackTea.png'

export const images={
    "Oolong":Oolong,
    "Chai Tea":ChaiTea,
    "Charcoal Roasted Oolong":CharcoalRoastedOolong,
    "High Mountain Oolong":HighMountainOolong,
    "Ruby Black Tea":RubyBlackTea,
};

Another script named "OrderPage.jsx" which import images

import {images} from './FileUtil';
console.log(images['Oolong']);
console.log(images['Chai Tea']);
console.log(images['Charcoal Roasted Oolong']);
console.log(images['High Mountain Oolong']);
console.log(images['Ruby Black Tea']);

And I only got @fs occur in my first image path which is Oolong @fs error: Oolong @fs error

After checking everything in my code, I still have no idea why this occurs. However, I could just remove @fs from my path after importing images, and everything works normally.

images['Oolong']=images['Oolong'].replace("/@fs",""); //in OrderPage.jsx

But, I still want to know why this happened. Could anyone explain this?

Li Jie Su
  • 21
  • 3
  • Try searching `@fs` in your project to find out what is it. – Lin Du Jun 25 '23 at 07:15
  • I searched whole project, I didn't write @fs in there. – Li Jie Su Jun 25 '23 at 17:24
  • “I could just remove @fs from my path”，so，where did you find it? Please provide more details – Lin Du Jun 25 '23 at 17:33
  • I just use one line code to remove it after importing it. images['Oolong']=images['Oolong'].replace("/@fs",""); // in OrderPage.jsx – Li Jie Su Jun 26 '23 at 00:22
  • Did you use any bundle tools like webpack, rollup? – Lin Du Jun 26 '23 at 00:52
  • 1
    I used Vite to create my react project, besides that I have no clue. Btw, here is the code repository. https://github.com/LiJieSu0/Wabisabi_React_Frontend – Li Jie Su Jun 26 '23 at 04:25
  • 1
    Might be related: [vitejs `server-fs-allow`](https://vitejs.dev/config/server-options.html#server-fs-allow). E.g. does `/assets` need to be "allowed" ? This doesn't explain why only one path has the `@fs`. Maybe also related: ["Confusing `@fs` prefix for some files #12464"](https://github.com/vitejs/vite/issues/12464) – kca Jun 26 '23 at 12:57

0 Answers0