Unable to load any files into my framework static site

New To Observable
1

Hi there,

Apologies if this is a basic question, I’m not very familiar with JS or webdev. The long and short of it is no matter what method I use (data loader in JS, data loader in python, fetch), and no matter what file type I try (csv, json, image, even via API) I cannot for the life of me get any kind of file to load in so that I can use its data for a visualization/or display an image. Oddly, the launches.csv.js which came with the framework works. All other files when I try simply throw the error:

RuntimeError: Unable to load file: FILE.csv

I am not really sure whats going on and failing to make progress. I thought maybe it was because of my browser (Firefox), but I tried Safari and Chrome and still received the same error.

I am attaching some (perhaps) relevant screenshots.

Thank you for taking the time to read through my ramble, and I appreciate any help.

Example of a data loader I’ve tried (in Python):

image
image800×600 71.8 KB

Example of terminal output (not sure if the SHA keys are sensitive, so I censored just to be safe):

GET /_file/src/data/uj_counts.csv?sha=blahblahblah
GET /_file/data/launches.csv?sha=blahblahblah
load /data/launches.csv → GET /_file/src/data/uj_counts.csv?sha=blahblahblah
[fresh] success 867 kB in 2ms
GET /_file/data/launches.csv sha=blahblahblah
load /data/launches.csv → [fresh] success 867 kB in 0ms
2

What is the file structure of your project? Where is your data loader, and how are you trying to load the file, and from which page?

3

Hi there, thanks for replying.

I’ve kept the file structure of the project largely the same as the starter file structure exists, with the addition of a “static_data” folder where I’ve been placing my csvs, images, etc. I’ve placed all my data_loaders in the same folder as launches.csv.js (data folder).

So basically this:

.
├─ src
│  ├─ components
│  │  └─ timeline.js           
│  ├─ data
│  │  ├─ launches.csv.js       
│  │  └─ any other data loader           
│  ├─ static_data_folder   
│  └─ index.md

I’ve been primarily trying to load files into index.md, but also into the example_dashboard.md. I do so via the relative path, loading in like so:

uj_counts_py = FileAttachment("src/data/uj_counts.csv").csv({typed: true});

However, trying to load in with the absolute path has not been able to fix the problem for me. I’ve also been creating the data loaders per the documentation (so the data loader above is a .py file named uj_counts.csv.py). Though I keep the data I manipulate with my data loaders in another folder, the preprocessing occurring in the data loader itself works fine, which I found by testing if I could write out the results of my scripts into a plain csvs or jsons rather than stdout.

4

If you are in src/index.md and you are trying to load src/data/uj_counts.csv, then the relative path to it is data/uj_counts.csv. So try this:

const uj_counts_py = FileAttachment("data/uj_counts.csv").csv({typed: true});
5

Hi there,

Thank you again for your help and time. I’ve tried out the code you gave, but I am still running into the error:

RuntimeError: Unable to load file: uj_counts.csv

I am not sure what else could be going wrong here. Could this potentially be an issue with my machine itself?