Fonts not working in "src" in React Typescript app

[leodevbro]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

In react.js apps, fonts usually can be accessed in "src" folder, but Codesandbox app makes fonts accessible only in "public" folder.

How has this issue affected you? What are you trying to accomplish?

I have my project in github that I want to import to Codesandbox and run it in sandbox, and I have font files in the "src" folder, and Codesandbox does not allow me to access font files in "src", I don't want to move the font files from "src" to "public". I want my original project as it is.

To Reproduce

Link to sandbox: link (optional)

Your Environment

Software	Name/Version
Сodesandbox
Browser
Operating System

[leodevbro]

Same issue: https://github.com/codesandbox/codesandbox-client/issues/1763

[leodevbro]

Tested like this:

1) Created React app with create-react-app in my local Windows 10 env, placed the font file in "src" folder and it works in my local env.

2) Pushed the code in my github. https://github.com/leodevbro/test010

3) Imported the github repo into Codesandbox: https://codesandbox.io/s/serverless-shadow-yi4mg?file=/src/App.css

And, the font file inside "src" folder -> does not work in Codesandbox. .

[andrasbacsai]

Hey,

Thanks for the issue. We will take a look at it!

[lbogdan]

I can reproduce this.

Digging a bit into react-scripts, this works locally because of the catch-all rule:

            // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn't use a "test" so it will catch all modules
            // that fall through the other loaders.
            {
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },

https://github.com/facebook/create-react-app/blob/f92c37a6e6636ed1650ffd976c6881f59b1be803/packages/react-scripts/config/webpack.config.js#L578-L593

which matches whenever src/App.css refers the font through src: url("kaushan-script-regular.ttf");, looking up the font in src and serving it from /static/media:

[leodevbro]

@lbogdan, So, what can I do if I want to import font from src folder and not from public folder?

[lbogdan]

@leodevbro I'm afraid you can't do anything for now. Any particular reason you want your fonts under the src folder?

@DeMoorJasper Can we do anything about this?

[leodevbro]

@lbogdan,

Any particular reason you want your fonts under the src folder?

Well, I guess the most common reason would be when I already have a source code of a project let's say which I built 2 years ago in react. And I want to import it into codesandbox. And let's say this project works fine in local env, and it contains a lot of fonts in src folder and there are many css files which import those fonts. So, I don't want to move all the fonts from scr folder into public folder, because it also needs all the css files to correct import paths and maybe something will get messed up.