Error when importing Docusaurus Swizzle component into Netlify CMS

[niravbhuva99]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [ ] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

I am encountering an error when attempting to import a Docusaurus Swizzle component into Netlify CMS. For each Docusaurus client API component used within the Swizzle component, Webpack throws an error.

Reproducible demo

No response

Steps to reproduce

1. Navigate to the repository.
2. Run npm install to install all the dependencies.
3. Go to the static/admin/customEditor/editor.tsx file.
4. Import any Swizzle component from the src/theme directory that uses Docusaurus client API components.
5. Run npm start to start the development server.
6. Observe the error thrown by webpack when trying to import the Swizzle component.

Expected behavior

Upon importing a Docusaurus Swizzle component into Netlify CMS, webpack should successfully resolve the imports of Docusaurus client API components within the Swizzle component without throwing any errors.

Actual behavior

Error Example

When including a Docusaurus component such as Link within the Swizzle component, Webpack throws the following error:

Your environment

• Public source code:yes
• Public site URL:no
• Docusaurus version used:3.1.1

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

This is not related to Docusaurus.

You are getting this error while running webpack --mode production on a custom Webpack config file you have in your project, which we are not responsible for because it is not something we provide you.

So, this is not a Docusaurus bug. At best, I can help you if you have specific questions. But please assume I don't know anything about NetlifyCMS and don't plan to study your custom setup in depth to figure out what you are doing.

Note that NetlifyCMS is not maintained anymore, and has a new name DecapCMS now: https://www.netlify.com/blog/netlify-cms-to-become-decap-cms/

You are not even using the latest version of Docusaurus.

It's hard to even help you if you use older versions of projects, even more if we do not even know these projects well ourselves (such as NetlifyCMS)

---

You probably misunderstand how Webpack resolves aliases, and should read more carefully this documentation:

https://webpack.js.org/configuration/resolve/#resolvealias

I'd suggest using absolute paths instead of relative paths, and use an exhaustive list of exact match aliases instead of @docusaurus, because @docusaurus will also match @docusaurus/whatever/comes/after.