External CSS styles brought in by an external module

Question

External CSS styles brought in by an external module

Currently, I'm working on a project using Nextjs/Express with TypeScript. I encountered an issue when I introduced the MDEditor component to my pages/sheets/text-editor.tsx file:

import MDEditor from "@uiw/react-md-editor";

const TextEditor: React.FC = () => {
  return (
    <div>
      <MDEditor />
    </div>
  );
};

export default TextEditor;

The error message that popped up was as follows:

./node_modules/@uiw/react-markdown-preview/lib/esm/styles/markdown.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/@uiw/react-markdown-preview/lib/esm/index.js

I suspect this may have occurred due to adding Tailwind to my project following the guidelines provided in this documentation:

https://tailwindcss.com/docs/guides/nextjs

Can someone shed some light on what exactly is happening here?

css next.js tailwind-css

Answer 1

Answer №1

I stumbled upon some helpful documentation:

npm install next-remove-imports
npm install @uiw/react-markdown-editor

// next.config.js
const removeImports = require('next-remove-imports')();
module.exports = removeImports({
//original content of next.config.js
});

// component.jsx
import dynamic from 'next/dynamic';
import '@uiw/react-markdown-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';

const MarkdownEditor = dynamic(
  () => import("@uiw/react-markdown-editor").then((mod) => mod.default),
  { ssr: false }
);

function HomePage() {
  return (
    <div>
      <MarkdownEditor value="Hello Markdown!" />
    </div>
  );
}

export default HomePage;

Answer 2

I stumbled upon some helpful documentation:

npm install next-remove-imports
npm install @uiw/react-markdown-editor

// next.config.js
const removeImports = require('next-remove-imports')();
module.exports = removeImports({
//original content of next.config.js
});

// component.jsx
import dynamic from 'next/dynamic';
import '@uiw/react-markdown-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';

const MarkdownEditor = dynamic(
  () => import("@uiw/react-markdown-editor").then((mod) => mod.default),
  { ssr: false }
);

function HomePage() {
  return (
    <div>
      <MarkdownEditor value="Hello Markdown!" />
    </div>
  );
}

export default HomePage;

External CSS styles brought in by an external module

Answer №1

Similar questions

I'm not sure if I'm doing this right, the image seems to be overlapping the border

Creating a Custom Progress Bar with Bootstrap

Issues with functionality of React/NextJS audio player buttons arise following implementation of a state

What could be causing my JavaScript to malfunction after clicking on anchor links?

Leveraging node.js and express for incorporating custom stylesheets and scripts

Bootstrap: Easily align elements to the right with the .pull-right class, avoiding the need to manually adjust margins

Print Preview Layout in CSS for Optimal Margins

JavaScript powered simple window

The import error occurred because the module 'styled-components' does not export 'createGlobalStyle'

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Customize a Bootstrap 4 card-deck layout to adjust the number of columns based on the viewport

Using Material-UI to showcase a TextField with a labelWidth set to zero

HTML validation produces mistakes

Python Selenium error: NoSuchElementException - Unable to find the specified element

What might be causing my grid columns to move onto a new line?

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

One div is experiencing trouble with the `align-items: center` property, while the other divs are functioning

Building a Dynamic CSS Grid

Building a Vuetify footer with perfectly centered content: A step-by-step guide

Ensure that div2 remains aligned with the left, bottom, and right edges of the screen, while also maintaining a consistent distance of 400px below div