How to correctly import an external stylesheet with import syntax?

[Yokubjon-J]

I am having a difficult problem of importing a library stylesheet in server-side rendering.
I have a webpack project which is working normally except for this line is causing a problem. When I run my project with npm run development, it is crashing with the following error message:

C:\Users\User\Desktop\Projects\y\chat-app\node_modules\remirror\styles\all.css:4
.remirror-editor-wrapper {
^

SyntaxError: Unexpected token '.'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.remirror/styles/all.css (C:\Users\User\Desktop\Projects\y\chat-app\dist\server.generated.js:645:18)

Node.js v17.5.0

I have tried several options, including adding the following line to my webpack-config file:

   test: /\.css$/i,
   use: ["style-loader", "css-loader"],
},

But all my efforts were to no avail. Could someone help resolve the problem please?

[ocavue]

I can take a look to it if you could provide a minimal repo to reproduce this issue.

[Yokubjon-J]

I created another repo here as you have suggested and I tried to make it minimal (it has 4 packages installed). However, I am having a new issue (probably related to SSR). I am completely stuck. Could you please take a look at that?

[ocavue]

The main issue is that Remirror is a client library that's dependent on browser API like document and window. It's not a good idea to render it as some HTML string on the Node.js server.

You will need to use some method to skip rendering Remirror on the server, and only load Remirror on the browsers. In React you will need lazy and Suspense for this: https://react.dev/reference/react/lazy

For your example, I can fix it by adding a new public/EditorLazy.jsx with the following content:

// public/EditorLazy.jsx
import { Suspense, lazy, useEffect, useState } from 'react';

const Editor = lazy(() => import('./Editor.jsx'));

export default () => {
    const [isClient, setIsClient] = useState(false)

    useEffect(() => {
        setIsClient(true)
    }, [])

    if (isClient) {
        return (
            <Suspense fallback={"loading editor..."}>
                <Editor />
            </Suspense>
        )
    } else {
        return null
    }
}

And in App.jsx, import EditorLazy.jsx instead of Editor.jsx

// public/App.jsx
// import createEmotionCache from './createEmotionCache.js';
import EditorLazy from './EditorLazy.jsx';
// import { CacheProvider } from '@emotion/react'

export default function MyApp() {
    // const cache = createEmotionCache();

    return (
        // <CacheProvider value={cache}>
        <EditorLazy/>
        // </CacheProvider>
    );
}

[Yokubjon-J]

@ocavue I can't express my joy and gratitude for your immense help! Thank you very much!

[Yokubjon-J]

@ocavue Could you please clarify an issue about styling? A remirror editor is depicted in the screenshot above but as you can see it lacks styling. Even though I have imported the necessary css styling here, my editor is still remaining without any styles. Could you please share your thoughts on the problem with me?

[Yokubjon-J]

to solve the issue with styling, in my webpack.config.js file I firstly added

externals: [nodeExternals({
  allowlist: [/\.css$/]
})],

but it didn't bring about any positive change, then I rewrote it as:

externals: [nodeExternals({
    allowlist: [/\.(?!(?:jsx?|json|css)$).{1,5}$/i]
})],

but it was also in vain.

[Yokubjon-J]

Hi @ocavue ! I have discovered a trick to make webpack import the external .css files: I did a named import and console-logged that variable. I don't like this strange trick very much but it has helped me. I would like to know your alternative options for it, if you have some.