Error in finding the config variable while running the app - reactjs

I'm getting error while searching for location It is showing that Can't find variable config. Any help will be appreciated.

If you look at the code, in App.js line 20 it does:
import config from './config';`
and then it later uses that import on line 84:
axios.get(`https://api.wunderground.com/api/${config.apiKey}/geolookup/q/${this.state.latitude},${this.state.longitude}.json`)
Since there is no config.js file in the repo, it seems that is a file you need to create yourself to store app secrets, so it's a good thing it's not checked in since you wouldn't want others knowing your secrets.
If you wanted to be pretty awesome, you could create a PR against that repo that explains what needs to be done in the README so that others who use that code won't have the same problem :)

The config file is missing.
You will need to create your own config file which holds the API key which you will receive from Wunderground's API.

Related

How to configure the serviceworker in an existing cra 4 app?

Initially posted this on reddit but got no response.
I last used service workers a couple years ago using CRA 3
The way I understood it was, just call the register function in the index.js file and voila, it's more-or-less working.
Pass in an config object to the call to add customizability. For me, all I needed it was for calling a callback that set redux state that was being listened to on a component that notified users if a new version was available via a snackbar. It was super easy and worked well.
Now I'm trying to implement similar functionality in CRA 4 and there's a whole layer of Google's workbox api on top of it; I'm sure it's super useful and necessary for some, but for my case -- just a call back after serviceworker registration -- it's a PITA.
First my service-worker.js file wasnt being built into the public directory so was resulting in 404s.
Only way out apparently was to create a new CRA app using cra-template-pwa then copy over the relevant files, which I've done.
Now the precaching workbox plugin is complaining about not being able to find my index html file as well as other static assets (have a multi-frontend app structure where those assets are in /app/frontendapp1(2,3,...n)/)
I've tried messing with the copied over service-worker.js file in src but my changes aren't being reflected in the public/service-worker.js file ...
Every reading I'm finding is getting really into the usages of each plugin, without an overall picture of react app via CRA -> serviceworker -> workbox. Anyone able to articulate ? Also have a couple of questions:
1- how does the public/service-worker.js file get built? Auto?
2 - is there a way to configure the public url for the precaching workbox?

React: environment variables undefined?

Simple question,
I have the following environment variables:
REACT_APP_API_URL=http://localhost:1234
Although this evaluates to undefined?
console.log(process.env.REACT_APP_API_URL)
Using create-react-app, from their documentation this is all I need to do? .env file is in the root directory, react even re-compiled when I changed it.
I believe you have to include your environment variables in global process.env. For this you can use some sort of package like dotenv.
This blog link would be helpful. https://trekinbami.medium.com/using-environment-variables-in-react-6b0a99d83cf5
inside your app can you try to console.log it like this?
const {REACT_APP_API_URL} = process.env;
console.log(REACT_APP_API_URL)
Grabbed from here:
https://adostes.medium.com/using-environment-variables-in-a-react-application-ac3b6c307373
Can you provide some screenshots? It seems to work fine for me. Please see the below screenshots.
Make sure you have the .env file in your root folder (same as where package.json is) and not in /src. Then double check that you have restarted the server (kill the npm start and start again). If it's not that, you will have to share more information, because it doesn't seem to be anything wrong in the few bits of information you have shared.

Change hash suffix on build using react

I'm using React JS and when I build my app to deploy, I use react-scripts as follow below:
react-scripts build
And my chunk files are something like:
0.cebdafcf.chunk.js
1.fa48de00.chunk.js
2.98b9bea7.chunk.js
...
52.9ca2408d.chunk.js
App.7b21e172.chunk.js
dashboards.f6142b89.chunk.js
user-forgot-password.06d87a22.chunk.js
views.16dc12b2.chunk.js
...
But every time I build, the hash suffix are the same, for example, I'd like every build change the hash for App..chunk.js
Is there any way to do it?
I've tried the option described here: Github Renamer Answer, using the lib renamer, but it didn't work to update the hash name for all chunk files.
Thank you in advance for helping
What I've done to solve was: First of all, I had to eject react so on this way I had access to change the webpack.config and after I've changed on webpack.config everything with
[contenthash:8]
to
[contenthash]
So, on this way, everytime we have a change on the file, the hash config chunk will be different. And for me, it's enough.
I don't know if someone has another solution, better or simpler. If yes, post to help other people.

Webpack bundler

I am currently looking into React, React-habitat, and Webpack.
My question is does Webpack also bundle the index.html file where I reference the bundle or is this kept separate? Is it possible to exclude this without specifically stating this in the Webpack config file?
this is the current structure am envisioning.
https://imgur.com/a/98or9
I know that all the dependencies found in my entry file for Webpack are bundled. The reason I would like to know this is because I am doing some research on how a CMS can be built around the three topics I mentioned above. I need to know if the index.html file is also bundled or not because I would like to edit the original index file(if it is not bundled) instead of repackaging everything for every change.
Hope someone understands what am looking for.

CakePHP searching for DebugKit at wrong path

I am trying to import DebugKit and CakePHP is producing the following error: DebugKit.ToolbarComponent could not be found.
Right below it, it says:
Create the class ToolbarComponent below in file:
/Users/SomeUser/Sites/SomeProject/app/Plugin/DebugKit//Controller/Component/ToolbarComponent.php
If you notice though, there are two slashes between DebugKit and Controller for some reason, and that's obviously not a real directory. The server running PHP 5.4.17. I have followed the exact installation instructions listed here. Any suggestions?
I had the same problem and solved it by changing the permissions to 755 to folders within DebugKit.
When I encountered this problem, I realized I had a Plugin/DebugKit folder structure in my project's root, and under the app directory. The one under app was empty, save for a blank file called empty. Strange. I have no idea how this happened. (Perhaps from accidentally running composer as non-root?) I deleted app/Plugin/DebugKit, and moved the one from the project root into app. No more error.
DebugKit does not currently seem to be compatible with cakephp 3.0 even though it is the example in the documentation.
The latest version still seems to use the 2.x methods.
I will also submit a ticket regarding this to update their documentation to prevent confusion.
If there is something I missed regarding this issue and it is actually possible to install this, let me know.

Resources