I have two .txt files, one of them for example is a list of countries. I need to import the data from these files into a .tsx function that will write them to the merchants theme files as snippets to use.

The issue I have is for some reason these files can't be accessed by my .tsx (even though they're in /public/.

Can someone please share the correct way to access public assets like .txt and .png from a .tsx remix app file? lets assume we're trying to fetch a .txt in app._index.tsx.

Any help here would be appreciated.

Here is my error:

remix │ Error: Failed to parse URL from /countries.txt

Here is the method I'm using to retrieve this file:

const countriesResponse = await fetch("/countries.txt");

I have two .txt files, one of them for example is a list of countries. I need to import the data from these files into a .tsx function that will write them to the merchants theme files as snippets to use.

The issue I have is for some reason these files can't be accessed by my .tsx (even though they're in /public/.

Can someone please share the correct way to access public assets like .txt and .png from a .tsx remix app file? lets assume we're trying to fetch a .txt in app._index.tsx.

Any help here would be appreciated.

Here is my error:

remix │ Error: Failed to parse URL from /countries.txt

Here is the method I'm using to retrieve this file:

const countriesResponse = await fetch("/countries.txt");

• shopify
• remix.run

• Whoever voted to close this because it doesn't include the code to reproduce the problem is incorrect, I'm clearly trying to fetch an asset from public as provided in the question. Anyone who's built an app in Shopify remix template will know whether that's the best practice method or not, and likely why it's throwing an error. – JTR Commented yesterday

1 Answer 1

Try using full url on the request, like:

export async function loader({request}: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const txt = await (await fetch(`${url}/test.txt`)).text();

  console.log('TXT', {txt});

  return json({txt});
}