Well, i try searching a solution but i cant find anything.
A coworker passed me project in NextJs (With React of course). I run yarn install, and then yarn run dev, the server starts but when i made a change in the code, it is not hot reloading! I have to stop and start the server manually each time.
I tried sudo yarn run dev, i tried with npm, y tried a lot of things.
I dont know much about MacOs, i just bought this days ago... The project work perfect on my Windows machine.
This are my current node and yarn version on mac
devmcgann#MacBook-Pro-de-Gabriel instashop-webapp % node --version
v12.16.1
devmcgann#MacBook-Pro-de-Gabriel instashop-webapp % yarn --version
1.22.4
Edit: I tried making a simple react app and hot reload work perfect there.
But with nextJS the problem persists
Thanks!
I had similar issues. The problem was the incorrect imports.
Some of my files and folder were in lowercase but in imports I was using uppercase.
Even though the build is successfully done without error, the hot reload doesn't work. So I had to correct them in order to make them work.
Make sure your routes case matches the case of the folder.
Make sure the component name has to start with the upper case. If your file name is dashboard.jsx, the component name should be Dashboard.
// home/dashboard.js
const Dashboard = () => {
....
}
export default Dashboard
Well.. This is rare.
Yarnd install and also npm install. I didnt now that i will need both.
Fixed.
Related
Photoswipe lightbox is trying to load a null.#ID#.js-file in domain.test/vendor/-folder, however it can't find it there, since it's placed in domain.test/public/vendor/. I can't seem to find how to change where the plugin looks for that file.
I'm using a Sage 10 theme, if that helps anyone with finding out why this is happening.
When running yarn dev, the lightbox works perfectly fine, but it doesn't after running yarn build and gives me the following error:
Loading failed for the <script> with source domain.test/vendor/null.#ID#.js
I can see in my folder structure that null.#ID#.js exists in domain.test/public/vendor though, so it would be amazing if the fix was to just change where the JS is looking for the file?
I've installed the plugin through yarn and imported it like the example from their page, then again, it works when running yarn dev, so the setup must be correct.
So I guess my question is: How do I point Photoswipe towards the right file in public/vendor/ instead of just in /vendor/ when compiling with yarn build?
I use vagrant and installed it first day of a bootcamp I took. I'm now trying to learn react but the installed version of node is too low to use npx/npm. I've tried a ton of different things, looked up different videos and I'm at a wall. I now have nodeJS version 12, and node v7 and my environment seems to just default to v7 and I can't sudo apt remove it
Well, I think there are 2 steps to resolve your issue, more or less it will help you in a long run.
Uninstall all the node installed
You can follow this guide on SO to do the removal steps: How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X)
5 mentioned steps are enough to make sure your dev is clean of node.
This will revert your development back to default environment. After that, just dont install any new node like the old way you did.
Install nvm to manage node version management
Go to https://github.com/nvm-sh/nvm and follow their installation guide.
Basically this tool will help to manage your node version on your machine. You can install multi version and choose which one to work on, depend on your specific needs.
The installation guide is quite easy to follow, for some Mac OS user there might have some slight tweaks, but it's not that difficult.
Hope this help,
nvm 100% solved the issue. Was able to use it to update the one that wasnt updating, and i was able to uninstall the unused version. Unfortunately i could never get create-react-app to work. Its something to do with a node_module folder installed in my root files that i cant find and delete so it crashed every time i try to create react app. But i think i can just use cdn to create a react app so i guess its not that important, at least i have npm/npx if i need it
Compilation successfully while running the command npm run watch on compute engine ubuntu terminal but no changing effects. I use the Larave+Vue project hosted on the Ubuntu VM instance on GCP. I search much time for this issue but not able to find any solution. I found a similar problem on StackOverflow but there is no answer to solve my problem. Please check the link below:
I am using Putty to run and compile vue js + laravel app on Godaddy VPS. Changes are not taking effect
Please help...
Thanks in advance.
Maybe try npm run watch-poll instead, on certain systems watch doesn't trigger changes but wacth-poll will periodically checks (polls) for changes.
I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine
So I am using the Aurelia skeleton-navigation starter as recommended. However, when I run the gulp bundle task the application will no longer load the main UI, it get's stuck on the spinner/loading page. I found this issue but even after installing the jspm beta it still doesn't seem to be resolved. Anyone had any luck? For what it is worth, I do not even see an aurelia.js bundle being created in the /dist directory so the 404 certainly makes sense in that respect.
So I have a fix, I am not thrilled with it though. It seems if you run bundle then run gulp watch to start the webserver, that the bundled files get wiped out from the dist folder. Running gulp watch in one command window and gulp bundle in another results in it working correctly as the bundled js is there at that point. I hope for a better fix from someone, this seems kind of hacky.