Cannot find file './secrets.json' in './src'

Support
1

Hello Netlify community, nice to meet you! :wave:

I want to deploy a react app that is doing an API call, using an API key stored in a secrets.json file. This file isn’t part of the public repository, so I created an environment variable in the Netlify UI to enable access to this information.

Unfortunately it’s not working and I assume I have to do additional set up in the build, so it can find the environment variable provided by Netlify…?

What I tried

I searched the community for answers but couldn’t fine one that made sense to me, as this is my first deploy to Netlify. For the sake of testing I uploaded a “blank” create-react-app, which is working fine: Blank React App

Therefore I think the only problem is the missing secrets.json, which is why it fails to compile.

Log file

11:05:53 AM: Creating an optimized production build…
11:05:56 AM: Failed to compile. ← was successful in the „blank“ project
11:05:56 AM: ./src/App.js
11:05:56 AM: Cannot find file ‘./secrets.json’ in ‘./src’.

Link to deploy
Mars Rover Picture Search

Any help would be greatly appreciated. Sorry if this problem has been discussed before but I couldn’t find an answer…

Cheers,

Steve

2

Access to the environment variables at the time of the build would come from process.env

In App.js you have:

import { GATSBY_API_KEY } from './secrets.json';

And it would need to change to similar to:

const GATSBY_API_KEY = process.env.GATSBY_API_KEY;

The error is caused by there not being a secrets.json file when the build runs on Netlify.

1 Like
3

Hi talves,

thank you for your reply!

Although I’m not sure how to proceed. Do you mean I should replace

import { GATSBY_API_KEY } from './secrets.json';

with

const GATSBY_API_KEY = process.env.GATSBY_API_KEY;

This is breaking the app. How do I avoid Netlify asking for secrets.json? I don’t get it… :-/

4

Since there isn’t a secrets.json file in the repository and you are setting the value in the environment variables, that is what you would need to do to get the value out of the environment vars.

5

@stevefrenzel in addition to @talves’ advice which is more in-depth than what we can generally give, this might be the most useful reading around environment variables on Netlify:

6

He @talves and @fool,

thank you for you feedback but it’s still not working.

The environment variable in the Netlify UI is called API_KEY and contains the respective information.

Next I replaced

import { API_KEY } from './secrets.json';

with

const REACT_APP_API_KEY = process.env.REACT_APP_API_KEY;

and changed the API call accordingly:

https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${time}&camera=${camera}&api_key=${REACT_APP_API_KEY}

The site is love now, but giving me the following error messages in the console:

The script from “https://mars-rover-picture-search.netlify.com/mars-rover-picture-search/static/js/2.61ebbd48.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Loading failed for the <script> with source “https://mars-rover-picture-search.netlify.com/mars-rover-picture-search/static/js/main.facfd50b.chunk.js”.

I have no idea what to do…

7

Hi,

Can you provide a URL for the page where you are getting that error? Thanks.

8

@futuregerald here it is: https://mars-rover-picture-search.netlify.com/

9

@stevefrenzel your script src URL’s are wrong. You’re prefixing /mars-rover-picture-search/ but in production you’re assets are directly in /static/ and notmars-rover-picture-search/static/` .

10

@futuregerald Thank you very much! I’m not sure though were to change it. Also it’s hard (for me) to google this particular problem. Where would I change the prefixing?

11

Hi @stevefrenzel, I can’t say. I’d have to dig in to your code for that. I can just see that you’re prefixing based on the paths in your deployed HTML.