Error in Nextjs: Global CSS cannot be imported from within node_modules

[oustr]

Tried the React demo code in Nextjs, but

Failed to compile
./node_modules/tippy.js/animations/scale.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\react-filerobot-image-editor\node_modules\@scaleflex\ui\core\tooltip-v2\tooltip-v2.component.js

For more details:

import React, { useState } from 'react';
import FilerobotImageEditor from 'react-filerobot-image-editor';
const Test = () => {
  const src = 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg';
  const [show, toggle] = useState(false)
  return (
    <div>
      <h1>Filerobot Image Editor</h1>
      <img src={src} onClick={() => { toggle(true) }} alt="example image"/>
      <FilerobotImageEditor
        show={show}
        src={src}
        onClose={() => { toggle(false) }}
      />
    </div>
  )
};
export default Test

Dependencies:

"react-filerobot-image-editor": "^4.6.3",
"react-konva": "^18.2.10",
"styled-components": "^6.1.3"

[AhmeeedMostafa]

Hello @oustr , The issue is related to another dependency "tippy" that is used by our designing library,

Anyways (that might fix it, not sure), This is a client-side library so to be able to use it from NextJS you should add 'use client' at the top of your component which uses the image editor, or dynamically load the component

[XeKT0r]

Hello @oustr , The issue is related to another dependency "tippy" that is used by our designing library,

Anyways (that might fix it, not sure), This is a client-side library so to be able to use it from NextJS you should add 'use client' at the top of your component which uses the image editor, or dynamically load the component

Unfortunately, this solution did not solve the problem.

[XeKT0r]

Try to reconfigure next.config.js like this (next latest 14 version):

module.exports = () => {
    const nextConfig = {
        transpilePackages: ['react-filerobot-image-editor', 'tippy.js'],
        webpack: (config) => {
           config.externals = [...config.externals, "canvas", "jsdom"];
            return config;
        }
    };
    return nextConfig;
};

Also use dynamic import of the component where the library is imported. It's help for me. I hope it's help for you.