Docusaurus: Getting Error: Cannot mix different versions of joi schemas - docusaurus

When I do a npm run start I get the following:
npm run start
> my-website#0.0.0 start
> docusaurus start
[INFO] Starting the development server...
[ERROR] Error: Cannot mix different versions of joi schemas
at new module.exports (/Users/russurquhart_boomi/node_modules/#hapi/hoek/lib/error.js:23:19)
at module.exports (/Users/russurquhart_boomi/node_modules/#hapi/hoek/lib/assert.js:21:11)
at Object.exports.isSchema (/Users/russurquhart_boomi/node_modules/joi/lib/common.js:132:5)
at Object.internals.schema (/Users/russurquhart_boomi/node_modules/joi/lib/compile.js:66:16)
at Object.exports.schema (/Users/russurquhart_boomi/node_modules/joi/lib/compile.js:17:26)
at internals.Base.$_compile (/Users/russurquhart_boomi/node_modules/joi/lib/base.js:646:24)
at /Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:260:92
at Object.exports.tryWithPath (/Users/russurquhart_boomi/node_modules/joi/lib/common.js:176:16)
at internals.Base.method [as keys] (/Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:260:32)
at internals.Base.method [as append] (/Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:189:29)
[INFO] Docusaurus version: 2.1.0
Node version: v16.17.0
Here is my docusaurus.config.js file:
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'Boomi Docusaurus POC',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** #type {import('#docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: 'Boomi Atmosphere',
logo: {
alt: 'Boomi Doc Site',
src: 'img/logo.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Tutorial',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Atmosphere Documentation',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Docusaurus POC - Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
themes: [
[
"#easyops-cn/docusaurus-search-local",
/** #type {import("#easyops-cn/docusaurus-search-local").PluginOptions} */
({
hashed: true,
language: ["en", "zh"],
highlightSearchTermsOnTargetPage: true,
explicitSearchResultPath: true,
}),
],
],
};
module.exports = config;
I got the errors after I added the docusearch-search-local plugin.
Any help is greatly appreciated!
Thanks,
Russ

I solved the issue, I had NOT installed the docusaurus-search-local item in the directory with my docusaurus files, instead I had installed it in ~/. Once I deleted it from this location, and then put it into the correct location, no problems!

Related

Quasar: Remove parameter from default manifest

On my vue.js PWA, there's a manifest.json generated by Quasar.
From what I understand, the manifest generated by Quasar uses the parameters from my quasar.conf.js file:
manifest: {
name: `App name`,
short_name: `app short name`,
description: `Application description`,
display: 'fullscreen',
orientation: 'any',
background_color: '#ffffff',
theme_color: '#000000',
icons: [...]
}
The resulting compiled manifest looks like this:
{
"name": "App name",
"short_name": "app short name",
"description": "Application description",
"display": "fullscreen",
"start_url": ".",
"orientation": "any",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [...],
}
What I want to do now is to remove a parameter completely from the default manifest. Specifically, I want the parameter start_url not to show up on my compiled manifest. I can modify its value by modifying this parameter on the quasar.conf.js but I cannot completely remove it. It will always be added with the default value "start_url": ".".
Any hints how to completely remove start_url from the compiled manifest?
Update:
quasar.conf.js
const open = require('open')
const ESLintPlugin = require('eslint-webpack-plugin')
const { configure } = require('quasar/wrappers')
module.exports = configure(function (ctx) {
return {
pwa: {
workboxPluginMode: 'InjectManifest', // 'GenerateSW' or 'InjectManifest',
workboxOptions: {
exclude: [
/^.*php\/.*$/,
]
},
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
chainWebpackCustomSW (chain) {
chain.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }])
},
manifest: {
name: `App name`,
short_name: `app short name`,
description: `Application description`,
display: 'fullscreen',
orientation: 'any',
background_color: '#ffffff',
theme_color: '#000000',
icons: [
{
src: 'icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
},
{
src: 'icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png'
},
{
src: 'icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
},
{
src: 'icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
},
extendManifestJson(json) {
delete json.start_url;
},
},
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
electron: {
bundler: 'packager', // 'packager' or 'builder',
...
}
}
})
The extendManifestJson function in quasar.config.js lets us tamper with the manifest json object allowing us to use the delete operator on any unwanted properties.
quasar.config.js
pwa: {
extendManifestJson(json) {
delete json.start_url;
}
},

Brief HTTP 404 error on all pages in /docs

I recently deployed our Docusaurus site for the first time and I am running into a weird issue with routing.
Every page in the /docs folder will briefly render the 404.html page when hitting the page directly. However, if I click around in sidebar the pages render properly.
This only happens in the /docs folder. If I click on the home page link I do not see the 404.
I cannot replicate this issue locally. I have tried both yarn start and yarn build/serve and in both cases the app works fine. I do not see any 404s, console errors, etc. The response payload of the 404 is the OOTB Docusaurus page, I have not done any customization to it or how its handled.
Attached is a gif showing the behavior and a screen shot showing that the browser is seeing a hard 404 in my non-localhost environment.
And here's my config file:
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'Guidebook',
tagline: 'Engineering Information',
url: 'https://guidebook.our-internal-domain.tools/',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
favicon: 'img/favicon.png',
organizationName: 'Guidebook',
projectName: 'Guidebook',
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook'
},
blog: false,
theme: {
customCss: require.resolve('./src/css/custom.css')
}
// debug: true
})
]
],
themeConfig: {
navbar: {
title: 'Home',
logo: {
alt: 'Home',
src: 'img/TechnologyGuidebook-Icon_Red_Small.svg'
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Guidebook'
},
{
href: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook',
label: 'GitHub',
position: 'right'
}
]
},
footer: {
style: 'dark',
links: [
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus'
}
]
},
{
title: 'More',
items: [
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus'
}
]
}
],
copyright: `Copyright © ${new Date().getFullYear()} Guidebook V2, Inc. Built with Docusaurus.`
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme
}
}
};
module.exports = config;
I figured it out. It wasn't a Docusaurus problem. The problem was a configuration issue in our CloudFront infrastructure.
I am using Vercel to deploy a Docusaurus V2 website and was running into the same issue with redirects.
Fixed this issue by enabling cleanUrls inside my vercel.json config.

User '/reference' instead of '/docs' for the docs plugin

Is it possible to to use http://localhost:3000/reference/ or any other path instead of http://localhost:3000/docs/ to point to the documentation *.md structure?
I configured the preset-classic inside docusaurus.config.js like this:
module.exports = {
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
path: 'reference/',
sidebarPath: require.resolve('./reference/sidebars.js')
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};
but I get:
test.md 1:2
Module parse failed: Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> ---
| id: test
| title: Test
# ./.docusaurus/registry.js 1:2593-2646 1:2459-2559
...
I'm using Docusaurus V2, does it currently support this?
Yes, it is possible.
Your mistake was probably the / in path: 'reference/',.
Note: When you change the docusaurus.config.js you need to kill the docusaurus process and start again, it doesn't reload well --- at least not with me.
[...]
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
routeBasePath: 'reference',
path: 'reference',
sidebarPath: require.resolve('./reference/sidebars.js'),
lastVersion: 'current',
onlyIncludeVersions: ['current'],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
[...]
You probably will need to change the navbar.
[...]
navbar: {
[...]
items: [
{
to: '/reference',
label: 'Reference',
position: 'left',
activeBaseRegex: `/reference/`,
},
],
},
[...]

Docusarus v2 - ¿How to add new tabs for Doc in NavBar?

I recently started using ** Docusaurus2 ** for tech notes in college.
I am interested in creating one or more Docs2, Docs3.
I have seen that it is a pluging that has to be duplicated. But with my config, it doesn't generate index.html for additionals tabs.
This is my folder list for docs: docs, dev. And in the dev folder some markdown files.
My docusaurus.config.js is:
module.exports = {
title: 'ApuntEs',
tagline: 'The tagline of my site',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'srlopez', // Usually your GitHub org/user name.
projectName: 'apuntes', // Usually your repo name.
themeConfig: {
navbar: {
title: 'ApuntEs',
logo: {
alt: 'ApuntEs',
src: 'img/logo.svg',
},
items: [
{
to: 'docs/',
activeBasePath: 'docs',
label: 'Docs',
position: 'left',
},
{to: 'dev/', activeBasePath: 'dev', label: 'Dev', position: 'left'},
{to: 'blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
// omited
},
},
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
id: 'doc',
sidebarPath: require.resolve('./sidebars.js'),
},
blog: {
showReadingTime: true,
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
plugins: [
[
"#docusaurus/plugin-content-docs",
{
id: 'dev',
path: "dev", // Path to data on filesystem, relative to site dir.
routeBasePath: "dev", // URL Route.
include: ["**/*.md"],
sidebarPath: require.resolve('./sidebarsDev.js'),
},
],
],
};
It looks nice, but tab Dev doesn't work. The index.html is not generated on npx docusaurus build
and this is the version I am using.
npx docusaurus --version
2.0.0-alpha.70
May some one help me?

how to make a compressed js files with all pages in nuxt js

I am running a nuxt js application built with adonuxt. The app works just fine. But I see all pages are loading one by one and make the site a bit slow for the initial load. The site's interactivity doesn't work until all js chunk is not loaded.
So how can I make a one js file with all the pages.
Also I don't want to load the admin pages in the website. How can I separate this.
My nuxt config is like this..
'use strict'
const resolve = require('path').resolve
module.exports = {
/*
** Headers of the page
*/
env: {
baseUrl: 'https://savingfamilybazar.com/'
},
build: {
vendor:[ 'vue-product-zoomer']
},
modules: [
'#nuxtjs/axios',
],
axios: {
},
plugins: [
'~plugins/vuetify',
'~plugins/element',
{src: '~plugins/zoom', ssr: false}
],
head: {
title: 'my site',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0'
},
{
hid: 'description',
name: 'description',
content: 'site.....'
},
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js' },
{ src: 'https://unpkg.com/#adonisjs/websocket-client' },
],
},
/*
** Global CSS
*/
css: [
//'~assets/css/main.css',
],
/*
** Customize the progress-bar color
*/
loading: { color: '#ffd451',height:'3px' },
/*
** Point to resources
*/
srcDir: resolve(__dirname, '..', 'resources')
}
Currently it loads like this
Well, code splitting the pages should make your page faster. Because each route loads only the files it needs.
So if you have all the pages in one bundle it will be even slower. Because you need to load everything on the initial load.
You should check if your hoster supports HTTP2. This should boost the speed.
However, if you want to disable the automatic code-splitting in routes you have to edit the config.
build: {
optimization: {
splitChunks: {
chunks: 'async',
}
},
splitChunks: {
pages: false,
vendor: false,
commons: false,
runtime: false,
layouts: false
},
}
https://nuxtjs.org/api/configuration-build#splitchunks
https://github.com/nuxt/nuxt.js/pull/3060