docusaurus-openapi-docs
docusaurus-openapi-docs copied to clipboard
PaloAltoNetworks
Not able to run docusaurus with Material UI components
Documentation link
I just tried to run Docusaurus with Material ui pages
here is my docusaurus.config.js `// @ts-check import { themes as prismThemes } from 'prism-react-renderer'; import apiVersions from "./docs/versions.json";
/** @type {import('@docusaurus/types').Config} /
const config = {
title: 'Test',
tagline: 'Test Docusaurus with Material-UI',
favicon: 'img/favicon.ico',
staticDirectories: ['public', 'static'],
url: 'https://example.com/',
baseUrl: '/',
organizationName: 'Test',
projectName: 'Test',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
'@docusaurus/preset-classic',
({
docs: {
sidebarPath: './sidebars.js',
// docLayoutComponent: "@theme/DocPage",
docItemComponent: "@theme/ApiItem",
editUrl: 'https://github.com/namnguyenthanhwork/docusaurus-material-ui-template/tree/master',
},
blog: false,
theme: {
customCss: [require.resolve('./src/css/sources.css')],
},
}),
],
],
themeConfig: {
image: 'img/docusaurus-social-card.jpg',
navbar: {
title: 'Docusaurus MUI',
logo: { alt: 'Docusaurus MUI Logo', src: 'img/logo.svg' },
items: [
{ type: 'docSidebar', sidebarId: 'sidebar', position: 'left', label: 'Tutorial' },
{ to: '/blog', label: 'Blog', position: 'left' },
{
href: 'https://github.com',
position: 'right',
className: 'header-github-link',
'aria-label': 'GitHub repository',
},
],
},
apiVersions,
prism: {
additionalLanguages: ["ruby", "csharp", "php", "java", "powershell"],
theme: prismThemes.oneDark,
darkTheme: prismThemes.oneDark,
},
languageTabs: [
{ highlight: "bash", language: "curl", logoClass: "bash" },
{ highlight: "python", language: "python", logoClass: "python", variant: "requests" },
{ highlight: "go", language: "go", logoClass: "go" },
{ highlight: "javascript", language: "nodejs", logoClass: "nodejs", variant: "axios" },
{ highlight: "ruby", language: "ruby", logoClass: "ruby" },
{ highlight: "csharp", language: "csharp", logoClass: "csharp", variant: "httpclient" },
{ highlight: "php", language: "php", logoClass: "php" },
{ highlight: "java", language: "java", logoClass: "java", variant: "unirest" },
{ highlight: "powershell", language: "powershell", logoClass: "powershell" },
],
footer: {
style: 'dark',
links: [
{ title: 'Docs', items: [{ label: 'Tutorial', 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: [
{ label: 'Blog', to: '/blog' },
{ label: 'GitHub', href: 'https://github.com/facebook/docusaurus' }
]
},
],
copyright: Copyright © ${new Date().getFullYear()} Docusaurus MUI.,
},
},
plugins: [
["docusaurus-theme-openapi-docs", {}],
[
'@easyops-cn/docusaurus-search-local',
{
indexPages: true,
docsRouteBasePath: '/docs',
hashed: true,
language: ['vi'],
highlightSearchTermsOnTargetPage: false,
searchResultContextMaxLength: 50,
searchResultLimits: 8,
searchBarShortcut: true,
searchBarShortcutHint: true,
},
],
[
"docusaurus-plugin-openapi-docs",
{
id: "api",
docsPluginId: "default",
config: {
apis: {
specPath: "./yaml/v3.yaml",
outputDir: "docs/v3",
sidebarOptions: { groupPathsBy: "tag", categoryLinkSource: "tag" },
version: "v3",
label: "v3",
baseUrl: "/v3",
versions: {
v3: {
specPath: "./yaml/v3.yaml",
outputDir: "docs/v3",
label: "v3",
baseUrl: "/v3",
},
v2: {
specPath: "./yaml/v2.yaml",
outputDir: "docs/v2",
label: "v2",
baseUrl: "/v2",
},
v1: {
specPath: "./yaml/v1.yaml",
outputDir: "docs/v1",
label: "v1",
baseUrl: "/v1",
},
},
},
},
},
],
'docusaurus-plugin-sass',
[
'ideal-image',
{ quality: 70, max: 1030, min: 640, steps: 2, disableInDev: true },
],
[
'./src/plugins/blog-plugin',
{
path: 'blog',
blogTitle: 'Blog',
blogDescription: 'Blog description is here ...',
blogSidebarCount: 'ALL',
blogSidebarTitle: 'List blog',
routeBasePath: 'blog',
include: ['**/.md', '**/*.mdx'],
postsPerPage: 6,
showReadingTime: true,
editUrl: 'https://github.com/',
},
],
],
};
export default config; ` And I am using the below dependencies
{ "name": "docusaurus-material-ui-template", "author": "Thành Nam Nguyễn", "license": "MIT", "version": "1.0.0", "private": true, "scripts": { "docusaurus": "docusaurus", "start-all": "yarn gen-all && yarn start", "start": "docusaurus start", "build": "docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "clear": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", "gen-api-docs": "docusaurus gen-api-docs", "gen-all": "yarn docusaurus gen-api-docs:version apis:all", "clean-api-docs": "docusaurus clean-api-docs", "gen-api-docs:version": "docusaurus gen-api-docs:version", "clean-api-docs:version": "docusaurus clean-api-docs:version" }, "dependencies": { "@docusaurus/core": "^3.5.2", "@docusaurus/plugin-ideal-image": "^3.5.2", "@docusaurus/preset-classic": "^3.5.2", "@docusaurus/remark-plugin-npm2yarn": "^3.5.2", "@easyops-cn/docusaurus-search-local": "^0.41.0", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fontsource/roboto": "^5.0.13", "@mdx-js/react": "^3.0.1", "@mui/icons-material": "^5.15.18", "@mui/lab": "^5.0.0-alpha.170", "@mui/material": "^5.15.18", "classnames": "^2.5.1", "clsx": "^2.1.1", "docusaurus-plugin-openapi-docs": "3.0.1", "docusaurus-plugin-sass": "^0.2.5", "docusaurus-theme-openapi-docs": "3.0.1", "prism-react-renderer": "^2.3.1", "react": "^18.3.1", "react-dom": "^18.3.1", "styled-components": "^6.1.11" }, "devDependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@docusaurus/module-type-aliases": "^3.5.2", "@docusaurus/types": "^3.5.2", "@tsconfig/docusaurus": "^2.0.3", "css-loader": "^7.1.2", "mini-css-extract-plugin": "^2.9.1", "postcss-loader": "^8.1.1", "sass": "^1.78.0", "sass-loader": "^16.0.1" }, "resolutions": { "sass-loader": "^12.0.0" }, "browserslist": { "production": [ ">0.5%", "not dead", "not op_mini all" ], "development": [ "last 3 chrome version", "last 3 firefox version", "last 5 safari version" ] }, "engines": { "node": ">=18.0" } }
Additionaly i have babel config
module.exports = { presets: [require.resolve('@docusaurus/core/lib/babel/preset')], plugins: ['@babel/plugin-syntax-dynamic-import'], // Add dynamic import support if needed };
When i try to run i got this error
`Compiled with problems:
×
ERROR in ./node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss (./node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss.webpack[javascript/auto]!=!./node_modules/@docusaurus/core/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!./node_modules/@docusaurus/core/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!./node_modules/docusaurus-theme-openapi-docs/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[11].oneOf[1].use[0]!./node_modules/@docusaurus/core/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].oneOf[1].use[1]!./node_modules/@docusaurus/core/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[11].oneOf[1].use[2]!./node_modules/docusaurus-plugin-sass/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[11].oneOf[1].use[3]!./node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss)
Module build failed (from ./node_modules/docusaurus-theme-openapi-docs/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
5 │ var localsJsonString = undefined;
│ ^
╵
node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss 5:41 root stylesheet
ERROR in ./node_modules/docusaurus-theme-openapi-docs/lib/theme/ApiItem/Layout/index.js 6:1014-1040
Module not found: Error: Can't resolve '@theme/Unlisted' in '/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/docusaurus-theme-openapi-docs/lib/theme/ApiItem/Layout'
ERROR in ./node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/docusaurus-theme-openapi-docs/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
5 │ var localsJsonString = undefined;
│ ^
╵
node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss 5:41 root stylesheet
at tryRunOrWebpackError (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/HookWebpackError.js:86:9)
at webpack_require_module (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5276:12)
at webpack_require (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5233:18)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5305:20
at symbolIterator (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3485:9)
at done (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10),
Generated code for /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/@docusaurus/core/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/@docusaurus/core/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/docusaurus-theme-openapi-docs/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].use[3]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[11].oneOf[1].use[0]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/@docusaurus/core/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].oneOf[1].use[1]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/@docusaurus/core/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[11].oneOf[1].use[2]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/docusaurus-plugin-sass/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[11].oneOf[1].use[3]!/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss 1 | throw new Error("Module build failed (from ./node_modules/docusaurus-theme-openapi-docs/node_modules/sass-loader/dist/cjs.js):\nSassError: expected "{".\n ╷\n5 │ var localsJsonString = undefined;\n │ ^\n ╵\n node_modules/docusaurus-theme-openapi-docs/lib/theme/styles.scss 5:41 root stylesheet");`
OS : Mac
