Not able to run docusaurus with Material UI components

[JanarthananGCT]

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), :15:1)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5211:43
at symbolIterator (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3482:9)
at timesSync (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3463:5)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5173:16
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 /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5087:8
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3521:5
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:97:5
at Hook.eval [as callAsync] (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at Cache.get (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:79:18)
at ItemCacheFacade.get (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/CacheFacade.js:115:15)
at Compilation._codeGenerationModule (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3485:9)
at codeGen (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5075:11)
at symbolIterator (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3482:9)
at timesSync (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3463:5)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5141:15
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 /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5087:8
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3518:6
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/HookWebpackError.js:67:2
at _done (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
at Hook.eval [as callAsync] (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :39:22)
at Cache.store (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:111:20)
at ItemCacheFacade.store (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/CacheFacade.js:141:15)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3517:11
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:89:6
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:43:10
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/cache/IdleFileCachePlugin.js:78:9
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:92:6
at eval (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :30:1)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at runNextTicks (node:internal/process/task_queues:64:3)
at process.processImmediate (node:internal/timers:447:9)
-- inner error --
Error: 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 Object. (/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:7)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:453:10
at Hook.eval [as call] (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:19:10), :7:1)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5278:39
at tryRunOrWebpackError (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/HookWebpackError.js:81:7)
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), :15:1)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5211:43
at symbolIterator (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3482:9)
at timesSync (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3463:5)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5173:16
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 /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5087:8
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3521:5
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:97:5
at Hook.eval [as callAsync] (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at Cache.get (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:79:18)
at ItemCacheFacade.get (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/CacheFacade.js:115:15)
at Compilation._codeGenerationModule (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3485:9)
at codeGen (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5075:11)
at symbolIterator (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3482:9)
at timesSync (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/neo-async/async.js:3463:5)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5141:15
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 /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:5087:8
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3518:6
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/HookWebpackError.js:67:2
at _done (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
at Hook.eval [as callAsync] (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :39:22)
at Cache.store (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:111:20)
at ItemCacheFacade.store (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/CacheFacade.js:141:15)
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Compilation.js:3517:11
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:89:6
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:43:10
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/cache/IdleFileCachePlugin.js:78:9
at /Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/webpack/lib/Cache.js:92:6
at eval (eval at create (/Users/janarthanans/Desktop/docusaurus-material-ui-template/node_modules/tapable/lib/HookCodeFactory.js:33:10), :30:1)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at runNextTicks (node:internal/process/task_queues:64:3)
at process.processImmediate (node:internal/timers:447:9)

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

[callmegin]

This issue is quite old, but still.
First of all, please add code blocks for code examples, right now it's completely unreadable.
Second - not much of a help probably, but I've done this and MUI works perfectly fine with docusaurus. Granted I've made my own custom components and I did not swizzle anything.

P.S. if you're going to see this message @JanarthananGCT and you've already solved the problem you're having - please close this issue.

[sserrata]

Thanks @callmegin, any chance you could provide source or link to your docusaurus project/site as a reference? Definitely curious to see how it renders with MUI.

[callmegin]

Thanks @callmegin, any chance you could provide source or link to your docusaurus project/site as a reference? Definitely curious to see how it renders with MUI.

It's in a organization repo.
But there is really no secret sauce here. Just create new project as described in their docs. As far as I remember it already contains some code there, with a custom page.tsx and some components there. All you need to do is change and update everything to your needs following your standard react flow.