main.js 404 error for MIT react-starter-kit - javascript

I'm using Kriasoft's react starter kit, and I built a small app. Everything runs perfectly locally w/ Browserify, however when I try running the production server at /build/server.js, the main.js file gives a 404 error in the Chrome console and some of my code breaks.
I've done some research and looked around -- I think it has something to do with Browserify, but I haven't been able to figure it out.
Can someone explain me what I'm doing wrong and what the root of the issue is? :)

This issue is addressed here. The build needs to be run with the "release" option when testing without Browsersync/HMR/React Transform.
npm run build -- --release && node build/server.js
Otherwise, the bundle will not build properly.

Related

How to fix VS Code unable to create a strapi app?

I'm Having an issue that ruins my entire development plans, And I don't think I'm even the problem!
There is an headless CMS program (open source) called Strapi, If you know the program then good, If not, Your more than welcome to try and tell me if you can help me with this problem.
I'm having trouble creating a Strapi app in VSCode.
The error that I'm receiving is:
You are running Node.js 18.4.0
Strapi requires Node.js >=14.19.1 <=16.x.x
Please make sure to use the right version of Node.
But, The fault isn't on me, I have 16.17.0 version of node installed, and without a trace of the 18.4 version specified on the error code.
I tried uninstalling node, Changing the dependencies in the launch.json file, Nothing worked!
So I Found the solution, the problem was with the version, the recommended 16.17.0 version of node not working with strapi, the 16.15.0 works actually.

react app published on github pages shows white screen

I have a React.js app, I built this simple meme generator app trying to learn web development (pretty new to the stuff) and am trying to host it using Github pages. I followed all the steps like installing the gh-pages with node and adding the url to the packages.json and adding the extra 2 lines of code for predeploy and deploy. I have the source for the github pages set to gh-pages. i get no errors when I run the command "npm run deploy" in terminal. But when I click the link I get a white screen. The console gives the error "Loading failed for the with source “https://z0onic.github.io/static/js/2.0b197680.chunk.js”. which is the first js file in the build directory. I searched pretty heavily and found other people who had a similar white screen issue but none of the answers helped. I have triple checked against these answers. Based on the error I'm getting I think its a build error but I don't know how to fix it or figure out exactly what is going wrong.
The github repository is at https://github.com/z0onic/meme-page and the link to the blank page that should be the hosted app is https://z0onic.github.io/meme-page/
when hosting locally through vs code with "npm start" command everything works fine.
Any help is appreciated I hope I'm not overlooking something silly but like I said I'm new to coding and still learning.
set the homepage in package.json to "https://<username>.github.io/<reponame>/" of course substituting things in <>

Gatsby hot reloading does not reload in the Hello World starter project

Description
I am following along with the instructions here: https://www.gatsbyjs.org/tutorial/part-one/
When I start the dev server and make a change to src/pages/index.js it is not hot reloaded in my browser.
Steps to Reproduce
Using gatsby-cli:
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
cd hello-world
gatsby develop
change the text inside of the div in src/pages/index.js
Expected Result
Page would automatically reload with new text.
Actual Result
Page would not change unless a manual refresh was applied in the browser.
Specs
OS: Ubuntu 18.04.3 LTS running in WSL on Windows 10 Pro
Node: 12.12.0
NPM: 6.11.3
Gatsby CLI: 2.8.8
Gatsby: 2.17.6
Browsers: Chrome 77.0.3865.120, IE 11.1006.17134.0, Firefox 70.0
I've tried multiple browsers with the same result so I ran devtools in firefox and examined the console output when I make a change and I see this error:
The connection to http://localhost:8000/__webpack_hmr was interrupted while the page was loading. client.js:88
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange#http://localhost:8000/commons.js:42:16
process-update.js:147
Error: Manifest request to /d528b21bff3fd2caa92d.hot-update.json timed out. bootstrap:41
Firefox can’t establish a connection to the server at http://localhost:8000/__webpack_hmr. client.js:88
I've also looked around on github and here and haven't found a solution to my problem. Any ideas on a workaround, solution, or insight into why this might not be working for me would be greatly appreciated!
I was having same problems. Gatsby Develop hot reload was not working whenever I made changes to files, plus, Gatsby Develop was terribly slow to compile code and get the dev server up and running. I found out that if I create my Gatsby project in Linux directory structure instead of Windows, everything works out good and is blazing fast. So my solution was following.
Create your project in /home/<your_username> directory in WSL. Simply go to /home/<your_username> and make a folder there with mkdir; go to that folder and then run Gatsby create my_project command in that folder.
That way your project will reside in Linux directory structure, making everything run smoothly.
I faced the similar scenario today. Below steps made it work however warning message is persistent in the console.
Delete package.lock.json and node_modules folder
Delete the content present inside C:\Users\\AppData\Roaming\npm and npm-cache
Do a npm i.
Im running gatsby develop on windows. After trying many things, including wsl, npm clenaup etc, I realized that my antivirus sophos was blocking the webpack hot reload socket __webpack_hmr.
All I had to do is to disable the antivirus for a while. ( You are free to uninstall it or maybe change to another one ).
hope it works for you ;)

does not provide an export named 'BrowserQRCodeReader'

I am using zxing-js/library library for qr code reading. I am facing a strange issue. The code for the qr scanning works in stackblitz online sample code, but not in my local environment.
I am getting this error in local environment on run time. The compilation proceeds successfully.
Uncaught SyntaxError: The requested module '/node_modules/#zxing/library/esm5/index.js' does not provide an export named 'BrowserQRCodeReader'
stackblitz link
github link
It seems like the zxing-js/library has issues with bundling.
I can reproduce the error by running npm run build, followed by npm run start.
Looks like some bundling would be required for you to get this working in the browser. See this post for more info
In the meantime, you can use npm run start:dev, and you will be able to do local development as expected.
Thanks #passle_ from the #open-wc team for helping with this.
In addition to jlengrands answer, npm start will start the owc-dev-server which does a minimal amount of work; it'll only resolve the bare modules.
The QR code library that you're trying to use uses commonjs, it'll need a little magic to be transformed so the browser can understand that code. The webpack-dev-server can do this for you, which you can run with npm run start:dev.

Starting packager stuck after npm audit & component folder doesn't work

Hi all,
First of all, I know that this is possibly a duplicate of many other posts, but I've already tried all things people posted on stack/github.
I have two problems:
After running npm audit fix packager will be stuck at starting packager...
I have a component folder with three components in it, but when I run the project it says that the components don't exist.
The first problem isn't really that bad to me, I can just ignore running npm audit.
The second problem, however, does annoy me.
This is my folder structure:
My IDE says everything is OK. My IDE automatically imported the components from my component folder and it links to them, correctly.
But I get this error:
9:40:04 AM: Unable to resolve ./components/Home" from ".//App.js`: The module `./components/Home` could not be found"
9:40:04 AM: Failed building JavaScript bundle
I hope someone can help me because I don't know where to start or what to do.
My setup:
OS: Ubuntu 18.04
Testing device: Android
Testing with: Expo (create-react-native-app)
Thanks in advance!
Regarding the second issue, using .jsx extensions in create-react-native-app isn't supported. You can just use the .js extension and still use jsx, though.
So to fix your problem, rename all the .jsx files to just .js.

Categories

Resources