Docusaurus: npm run serve reloaded page not rendered - docusaurus

I have a docosaurus page running. It works fine. I use
'npm run build'
and
'npm run serve'
to deploy it. The app runs fine, but when I go to any page that is not on root and I refresh it, I get:
Index of build/ Quick Intro/ quick1.2/
instead of the rendered page.
Any idea what to do?

This appears to be a bug in old versions of Docusaurus v2. If you look at the screenshots in the following bug report and PR, they show the same "Index of build/..." page:
Bug Report: https://github.com/facebook/docusaurus/issues/6699
Fixed by PR: https://github.com/facebook/docusaurus/pull/6701
I had the same issue when using Docusaurus v2.0.0-beta.15 and upgrading to Docusaurus v2.0.0-beta.17 fixed it.
According to the CHANGELOG.md, it should also be fixed in v2.0.0-beta.16:
2.0.0-beta.16 (2022-02-25)
...
šŸ› Bug Fix
...
docusaurus
#6701 fix(cli): disable directory listing in serve (#Josh-Cena)
Source: Docusaurus/CHANGELOG.md

Related

How to fix relative module error for a newly created nuxt.js app with starter template?

I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldnā€™t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out ā€œnpmā€ installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using ā€œyarnā€ instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template

ā€œPage Not Foundā€ when navigating to site created with Gridsome & deployed on Netlify

I've created a new site using Gridsome deployed with Netlify, but I can't get the site to appear when accessed. Instead, Netlify says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
< Back to our site
I tried updating my build settings based on the instructions of the creator of the Gridsome starter template I'm using, but the site still doesn't display. I've also updated the js-yaml version.
I've gone through the questions/answers for similar questions on here, but I haven't been able to figure this out. I'm new to web development, and I'm sure I'm missing one or more things contributing to the issue.
My GitHub repo for this site.
The site.
I have the build log from Netlify. There are some errors in it. I don't want to put too much here, so here's a part from the end of the log.
12:18:36 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:18:36 PM: Error running command: Build script returned non-zero exit code: 1
12:18:36 PM: Failing build: Failed to build site
12:18:36 PM: Finished processing build request in 55.729813394s
A Gist for the whole build log.
Thanks so much for your help, #talves!
I was having trouble using the build commands because of being new to cli stuff and a permissions issue. I asked a friend about the build errors I was getting from Netlify, and he recommended I try removing and re-installing my node modules. Did that, still didn't work. I tried removing anything in the repo having to do with "journal" since Failed to render /journal kept appearing in the build log, but that didn't work either.
I googled ReferenceError: _objectSpread is not defined after update since that was in the build log after the journal error. I found a comment on an issue noting the same error message in the main Babel GitHub repo that suggested adding the following to the package.json file:
"resolutions": {
"#babel/core": "^7.5.4"
}
I added it, tried to build again, and it still failed but only gave me one error message it didn't show beforeā€”Error: SyntaxError: Unexpected string in JSON at position. I googled that message and got another issue on GitHub. A comment on the issue noted a missing comma.
I went back to my package.json file and found that I didn't add a comma to the bracket above the new "resolutions" snippet. I added the comma, tried to build again, and it worked šŸ¤œšŸ’„āœØ !
Sorry if this is long-winded! I thought it might be good to include my process on figuring this out in case others run into the same issues.

npm run serve gets hang on 98% while building

I'm working on a project using vuetify. I was using "npm run serve" command to build and run a live server. it was working all good until all of sudden my project stopped building. every time i try running the command "npm run serve" it builds and hangs on 98% without throwing an error.
i tried npm install. npm build none of these fix the issue
in my terminal i run this command and the result is as follows:
npm run serve
rep-vuetify#0.1.0 serve /Users/Desktop/rg21-vuetify/rep-vuetify vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
IT hangs on 98% and don't do anything after this, been stuck on this step for whole week if some one can help me.
I have same problem stuck in 98%.
98% after emitting CopyPlugin
In my case, I recheck again my code, and I found my import path is invalid, something like :
import { myComponent } from ''
After fix the code, It works again.
I my case the problem is a empty require
getBackground() {
return `url(${require("")})`;
},
In Vue, if you have multiple HTML elements of a component/view not contained within a single element (eg. this DIV) the building will froze/halt unexpectedly.
Get sure to have all items contained within a section, div, etc.
Probably, NPM has nothing to do with this particular problem.
<template>
<div class="contain-all-stuff">
<!-- Anything inside this one single DIV container -->
</div>
</template>
If you are installed ESLint.
Try to run "npm run lint" command before you run "npm run serve"
it worked for me.
Try to update you NPM to the latest version and run your CLI as admin if you are using windows I have faced the same problem before.
Which version of NPM you are using?
I was getting the same issue with node version 12.6.0.
After node version updated to the 12.9.1, the issue is resolved for me.
I got the same error message, but I resolved it.
In my case, I just change different branch. after that, I change back the original branch, then it doesn't work when I run "npm run serve".
The problem is all import paths are case sensitive!
So when I change to the old branch, it changes my directory name to uppercase letters( before I use uppercase directory name). But the latest branch I already changed to lowercase letters for directory name.
For example, if your import like below:
component: () => import('#/views/test/Test'),
then you should check the directory's name and file's name must be the same uppercase letters and lowercase letters.
For anyone still having this problem past 2020, check everything in your Vuex index.js page and ensure that all the paths to you modules are correct. One of mine was incorrect and it took me an hour to figure it out. It might not be empty, so a search like suggested above will not help you in this case.
I had the same issue.. but the % the build was freezing was variable.
For me it was one stupid > that was missing in a closing div-tag..
Just wondering why I did not get an error on that :s

Vue Material postinstall failed

So I've been working on a Vue.js project for couple times now, and I am facing a problem I've never seen before.
Trying to git pull the project on another computer, or even downloading the project as a zip file, when it's time to npm install, vue-material module fails and the whole thing cannot be run.
It goes this way, with vie-material :
vue-material#1.0.0 postinstall C:\<my_things>\node_modules\vue-material
sh build/git-hooks/install.sh
Then I see this :
/usr/bin/bash: build/git-hooks/install.sh: No such file or directory
Then the modules' tree shows in the terminal, and at the end, I can see all the errors related to vue-material, with this statement :
Tell the author that this fails on your system:
sh build/git-hooks/install.sh
By the way, I tried to crate a brand new Vue project, and tried to add vue-material inside, no problem, so it has to do with my project.
Obviously though, /usr/bin/bash does not exist, since I'm running Windows 10.
Any knowledge on npm's installing routine ? I'm out of solution to try...
Can you share your package.json file?
I had this same problem just now and found that NPM could possibly be installing the incorrect version. Where I had "^vue-material": "1.0.0-beta-7" NPM was installing version 1.0.0 instead of 1.0.0-beta-7. If you remove the ^ then it may work for you. This is where I found the answer that helped me.
https://github.com/vuematerial/vue-material/issues/1155
Well, after couple times figuring out what was wrong, I got this :
I tried to use yarn and it told me that my node version was too old (vue-material needed 7.0+ and my node was 6.9, or at least that is what yarn told me), so I got myself the 8.9.3 node.
After this I tried to use yarn again, and the error with that bash script showed again.... then I just tried to use npm install again, and it worked just fine...
I don't know about the bash script thing, but one thing to remember is to always check for node and npm's version when errors happend.... (and yarn looks very cool and simple imo ^^).
You kinda made me think about a version problem though, I got you that ! :D
Problem solved....

Travis-CI not being able to load tv4

My project was passing on Travis till my last commit. After this commit, Travis says:
Error: Cannot find module 'tv4' (at https://travis-ci.org/a85/Newman/builds/37216427#L141)
It has installed tv4#1.1.3 as part of the build (as seen at https://travis-ci.org/a85/Newman/builds/37216427#L40)
In version 1.1.3 of tv4, the name field in package.json is "tv4" (https://github.com/geraintluff/tv4/commit/4887d0f073951db681d23b9fde69ed7a9092fdea), so I guess it's not a case issue.
I've tried rebuilding a number of times, but it hasn't helped. Running grunt test locally works perfectly.
Any ideas?
I have the same issue, but i managed to fix this when i changed package.json to the following:
{"main": "tv4.js"}
Instead of
{"main": "tv4.min.js"}
If you take a look at:
https://github.com/geraintluff/tv4/issues/157