#import .tsx file from public folder

20 messages · Page 1 of 1 (latest)

frozen magnet
#

There seems to be a problem with importing a .tsx file that is located in my public folder and I don't understand why.

That's how im trying to import:

import { B2BRBlueten } from '/B2BR_LOGO.tsx';
import { B2BRFace } from '/B2BR_LOGO.tsx';
import { B2BRSchrift } from '/B2BR_LOGO.tsx';
knotty wharfBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
misty light
#

is this the actual import path? any string starting / will point to the root of you filesystem, which is probably completely outside your project folder, so this will never compile

and for the question itself, I think the bundling does work with files from the public folder but it doesn't really make sense to add source code there unless you want people to see all your code

frozen magnet
#

It's not really source code. that are 3 <SVG> elements that I'm exporting and together they're forming the Website icon.

misty light
#

.tsx is source code, SVG files should use the .svg extension if you plan to serve them and use in the HTML tags. the link you shared shows a string as the path of an image tag, which is a different path type from imports and follows a different logic:

  • file imports at the top of the file represent paths on the filesystem
  • the path on src props represent an address to a resource being served from a web server
frozen magnet
#

Yeah for sure it's source code but not in the classic sense 😄
I'm using it that way so I can have the logo in one file, but separate it in the 3 components, because I need to animate just parts of it.

#

So I don't need to protect it, I even want people to be able to access it.

frozen magnet
#

But how would I access the public folder in an import?

#

@public probably hm?

odd sun
frozen magnet
#

I did it with @/public now

#

seems to work

odd sun
#

o nice

tepid flint
#

you may want to check if you imported as default or normal

frozen magnet
#

export const B2BRSchrift = () => {

#

not as default

tepid flint
tepid flint