Issues with Gatsby Shadowing - reactjs

I am using the #lekoarts gatsby-theme-minimal-blog. You can view my code here:
https://github.com/CodyWMitchell/my-site
I feel like I am losing hair because of how much time I have spent trying to get this working. I am running Gatsby locally, and I've somehow successfully shadowed the footer component. I want to shadow the header component, but for some reason nothing is working at all.
In the lekoarts theme, the footer is in the same folder location as the header component, but when I add a file called header.tsx to overwrite the other header.tsx in the same location as the footer that is successfully shadowing nothing happens. I tried adding it in every other possible place I can think of, restarting the local build, and I'm at my wits end.
Here's the kicker, when I remove footer.tsx from the local src directory I added it to, It gives me an error now? Why would it give me an error for a file not existing that wasn't even there in the theme to begin with until I added it?
I really (really) want to give a static site generator a shot, but this feels extremely frustrating for something that should be simple, and it's discouraging me for suggesting something like this for any kind of complex project.
Any help or advice would be much appreciated.

Try to clean .cache folder and re-run the dev. Every time you "shadow" or change the components in theme folder, you should do it.
Just run gatsby clean or npm run clean - I saw that script in your repo.

Related

Why is Storybook not showing a React component on the sidebar?

I've been researching this, but I couldn't find any solutions.
Inside the .storybook' folder, there's a main.js file, and in it, there is this line:
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)", "../tmp/**/*.story.mdx"], which several people have said is the solution to a React component not showing, but I have it, and it's still not showing!
I also tried deleting the .cache folder in .node_modules, but still not working!
I build and re-started storybook several times already.
I know the component itself works, because, there are two react components that I need, and both are done in two different github branches, and checking out into each branch allows you to run storybook and see that the component I want is showing and working properly. But I need both components on the same place, and I tried to re-create one of them into the branch of the other, but it's not showing on storybook! The component code is identical, so I know it's not a problem with the code or the component. It has to be something related to storybook.
Do you have any other ideas? Anything I'm missing to check, or adjust? I don't really know much about storybook, so keep that in mind. It's just used here in this company, and that's the only way to run your React components.
I don't get any errors on my vscode either!

React suddenly responding with index.html instead of javascript imports

Recently I've been unable to load javascript scripts to my webworkers in react for some reason. It always responds with index.html.
My config is simply a standard create-react-app app. The screenshots are from my actual project but I have confirmed that the problem persists if I create a new project and try to initialize a minimal example.
Each ffmpeg.* file is affected. This is also not specific to ffmpeg since another library had the same issue - thankfully the initialization of that library is simpler so I was able to simply put that libraries worker-file in the public folder - and that worked.
It might be a stupid question but I'm really at my wits end here and I can't figure out how to investigate further.
Thank you <3
EDIT:
It works if I put all the files it is trying to hit in the public folder - so it has to be some kind of context issue(??) This seems like a really stupid way to go about it. It's not in a worker at the point of loading - it's the worker loader that fails to access the stuff it needs in the node_modules folder, (core script, worker script and wasm code). Whet?

I have an error with the build of my nextjs project

I want to upload my project to Vercel but i have a problem with the build, i am new in this, so i don't know what to do, please help me, the first pic is the error that i have in Vercel
I experienced the same error. My solution was to delete one file (it wasn't currently in use). It was impeding the page from being built and, then, deployed. Check your '/', '/404' and '/Store' files. Try to look for any importations you may be missing, and also look for errors with any of your routes, if you're using them, those can be quite tricky.
Also, feel free to share the code in those 3 files aforementioned.

How can I debug a React JS App into Cordova?

I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)

Swiip/generator-gulp-angular remove components folder

I have used Swiip to scaffold app.Now I am trying to customize it. There are lots of unnecessary folders under src folder like components and I want to remove components folder.But there is no success.My console shows error
(index):62 GET http://localhost:3000/app/components/navbar/navbar.directive.js
(index):63 GET http://localhost:3000/app/components/githubContributor/githubContributor.service.js
I tried to find where is dependency of these files but no success.
As well if I comment everything then there is no error it means from somewhere these two files are getting called.
Swiip has an architecture and you should understand it for nice programming performance.
The folder Component should containe your features for example (navbar, customers, suppliers, ...) all your modules should be as a folder under component and each folder should containe all the files concerning this module(controller, html, service, directive) if you do so you won't need to reference your files it does it itself.
I hope that my answear helped you ... at all I can help anyTime

Resources