Global CSS cannot be imported from within node_modules.

Hi!

Thanks for trying to contibute to solving the Next 10 / Webpack 5 / Ant Design mess 😉

I am trying you solution, but ending up with

info  - Creating an optimized production build  
Failed to compile.

./node_modules/antd/lib/affix/style/index.less
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/antd/lib/affix/style/index.js
...
Error: > Build failed because of webpack errors

This does not happen if I try to add the <Affix/> component to your example code. I cannot quite figure what the difference is though. Any tips?

Issue Analytics

State:
Created 2 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

4reactions

akornatocommented, May 4, 2021

@JesperWe removing .babelrc that I had from Next.js example fixed this for me.

1reaction

jaywcjlovecommented, May 28, 2021

I created a nextjs package next-remove-imports to solve the problem.

Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js

// next.config.js
const removeImports = require("next-remove-imports")();

module.exports = removeImports({});

// pages/index.js

import Head from 'next/head'
import MDEditor from '@uiw/react-md-editor';
import "@uiw/react-md-editor/dist/markdown-editor.css";
import "@uiw/react-markdown-preview/dist/markdown.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MDEditor value="**Hello world!!!**" />
    </div>
  )
}

@JesperWe