Error when integrating CKEditor 5 with next js

I encountered an error while trying to integrate ckeditor 5 and the next js. This error showed up after I imported these 2 modules inside my component

import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';

The error said :

./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css Global CSS cannot be imported from within node_modules. Location: node_modules@ckeditor\ckeditor5-engine\src\view\placeholder.js

It seems like CKEditor trying to import css to node_modules@ckeditor\ckeditor5-engine\src\view\placeholder.js. So I opened up that file and found a little piece of code

import '../../theme/placeholder.css';

the placeholder.css itself only contains simple rules inside of it

.ck.ck-placeholder,
.ck .ck-placeholder {
    position: relative;

    &::before {
        position: absolute;
        left: 0;
        right: 0;
        content: attr(data-placeholder);

        /* See ckeditor/ckeditor5#469. */
        pointer-events: none;
    }
}

    /* See ckeditor/ckeditor5#1987. */
    .ck.ck-read-only .ck-placeholder {
        &::before {
            display: none;
        }
    }

I tried to dynamic import these 2 modules inside inside my _app.js, and then import it to my specific component, but no luck. Is there a way I can fix this problem? should I open a new issue inside their repo? regards!