Add existing css on jsx throw exception - ReferenceError: 'document' is not defined

[BhagiLimbu]

Thanks for filing a bug! To save time, if you're having trouble using the library, please check off the items you have tried. If you are just asking a question, skip right to the bottom.

Please verify these steps before filing an issue, and check them off as you go

• [ JavaScriptEngineSwitcher.ChakraCore.Native.osx-x64(3.8.5)] The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
• [ ] The VC++ 2017 runtime is installed
• [Startup.cs ] The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
• [Yes ] I've looked at the sample projects in this repo to verify that my app is configured correctly

I'm using these library versions:

• ReactJS.NET: 5.2.11
• JavaScriptEngineSwitcher: 3.8.5
• react and react-dom: (N/A if using bundled react, or version number) ^16.8.2
• webpack: (N/A if using bundled react) ^4.43.0
• node: (N/A if using bundled react)

Runtime environment:

• OS: (Mac, Windows, Linux flavor. Include 32-bit/64-bit and version) Mac
• .NET Framework or .NET Core Version: .NET Core 3.1 Web Application

Steps to reproduce

---

(Describe your issue here) When I run application that has imported css file on jsx file. It throws an exception.

Steps - 1) Add - import "./test-demo.css"; on home.jsx file 2) Build npm (npm run build) 3) Run application

Results: React.Exceptions.ReactScriptLoadException: Error while loading "/dist/vendor.50cbf625.js": ReferenceError: 'document' is not defined ---> JavaScriptEngineSwitcher.Core.JsRuntimeException: ReferenceError: 'document' is not defined

I am new to ReactJs. Appreciate, if you could suggest sorting out the issue with the CSS file. Thank you.

[KlochkovIUS]

Hello!

Do you find a workaround?

[BhagiLimbu]

@KlochkovIUS ,

I solved it by using a styled component instead of reference css on the file. Here's a link of CSS-in-JS (https://reactjs.net/features/css-in-js.html)

I hope this helps you.

[danielHalan]

Have same issue, where "import 'some.css" causes the described error.

Would like to have reference to external (s)css, and not mixing styles in the component. suggest to re-open the ticket.

[Daniel15]

@danielHalan - You can't use document with server-side rendering because document is part of the DOM, which doesn't exist server-side.

[danielHalan]

@Daniel15 Noted that disabling server-side rendering actually removes the error, while css is not included/applied...

Inspecting the added code for CSS loader and for the css file, I cant see any reference to document.. is there any way to include external css files to the bundle files?

[danielHalan]

Update: Was a bit quick to reply, Disabling server-side didn't remove the error. (had commented away the import)