docusaurus-openapi-docs icon indicating copy to clipboard operation
docusaurus-openapi-docs copied to clipboard

Unable to resolve @theme in swizzled component file

Open Pratosh22 opened this issue 1 year ago • 4 comments

Describe the bug

Swizzled components in typescript cannot resolve "theme" components

Expected behavior

Swizzled components should be able to resolve "theme" components

Steps to reproduce

1.Install docusaurus-openapi-plugin and theme version "3.0.0-beta.8" 2.Run yarn swizzle 3.Go to any file which imports file from "theme", it will be not be able to resolve

Screenshots

Screenshot 2024-05-03 at 2 41 07 PM

Your Environment

  • Version used: 3.0.0-beta.8
  • Environment name and version (e.g. Chrome 59, node.js 5.4, python 3.7.3): Nodejs v18
  • Operating System and version (desktop or mobile): MacOS

Pratosh22 avatar May 03 '24 09:05 Pratosh22

Just add paths in your tsconfig.json

{
  // This file is not used in compilation. It is here just for a nice editor experience.
  "extends": "@docusaurus/tsconfig",
  "compilerOptions": {
    "baseUrl": ".",
    "lib": [
      "ES2021",
    ],
    "jsx": "react",
    "paths": {
      "@theme/*": [
        "src/theme/*"
      ],
    }
  }
}

alienzhangyw avatar May 06 '24 05:05 alienzhangyw

This worked, but when i swizzle any component from APIExplorer it breaks the document and throws an error , Screenshot 2024-05-06 at 12 45 01 PM It was mentioned in #633 as well.

Pratosh22 avatar May 06 '24 07:05 Pratosh22

This worked, but when i swizzle any component from APIExplorer it breaks the document and throws an error , Screenshot 2024-05-06 at 12 45 01 PM It was mentioned in #633 as well.

I swizzled the ApiExplorer root directory and ApiItem directory, didn't see this error.

image

If you are using yarn pnp as package manager, try to switch to nodeLinker: node-modules.

alienzhangyw avatar May 06 '24 10:05 alienzhangyw

Just tried the above, The error does not occur when i swizzle ApiExplorer and ApiItem Directory but it comes when i swizzle few files from ApiExplorer and do not swizzle the rest of files. Is this the expected behaviour or am i missing something? Screenshot 2024-05-06 at 4 03 39 PM The below are the files i swizzled Screenshot 2024-05-06 at 4 04 18 PM

Pratosh22 avatar May 06 '24 10:05 Pratosh22

Just tried the above, The error does not occur when i swizzle ApiExplorer and ApiItem Directory but it comes when i swizzle few files from ApiExplorer and do not swizzle the rest of files. Is this the expected behaviour or am i missing something? Screenshot 2024-05-06 at 4 03 39 PM The below are the files i swizzled Screenshot 2024-05-06 at 4 04 18 PM

Yes, you need many other files because ParamFormItems uses a FormItem component, and a react-hook-form context provided in Response component. Basicly you need to swizzle all related files to make it work.

alienzhangyw avatar May 07 '24 08:05 alienzhangyw