Import CSS in JSX throws exception - ReferenceError: 'document' is not defined

[danielHalan]

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

• The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
• The VC++ 2017 runtime is installed
• The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
• 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
• JavaScriptEngineSwitcher: V8
• react and react-dom: 16.8.2
• webpack: 5.46
• node: v14.15.5
  --

Runtime environment:

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

Steps to reproduce

1. Add - import "./some.css"; on Component.jsx file
2. Build npm (npm run build)
3. Run application

---

Exception is thrown:
ReferenceError: 'document' is not defined

Related to #1231

The desired outcome is to be able to define external component-specific css files that can be imported to JSX components.

[codeaheaduk]

I am having the same issue when importing a CSS module e.g.

import styles from './news.module.scss';

...
<ul className={ classNames( [styles.list]) }>

...

An unhandled exception occurred while processing the request.
ScriptEngineException: ReferenceError: document is not defined
Microsoft.ClearScript.V8.SplitProxy.V8SplitProxyNative.ThrowScheduledException()

JsRuntimeException: ReferenceError: document is not defined
at e.exports (bundle.js:2:302096) -> … "use strict"; e.exports = function (e) { var t = document.createElement("style"); return e.setAttri...

[emaborsa]

Same issue here.

JsScriptException: Script threw an exception.
JavaScriptEngineSwitcher.ChakraCore.JsRt.JsErrorHelpers.ThrowIfError(JsErrorCode errorCode)

JsRuntimeException: ReferenceError: 'document' is not defined
JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine+<>c__DisplayClass25_0.b__0()

ReactScriptLoadException: Error while loading "/dist/vendor.1b5e647d.js": ReferenceError: 'document' is not defined
React.JavaScriptEngineFactory.EnsureValidState()

[programm-ingovals]

This is the relevant code where this happens when using Emotion for SSR rendering.

var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
    // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
    // note this very very intentionally targets all style elements regardless of the key to ensure
    // that creating a cache works inside of render of a React component

This code mentions SSR, so seems it should run on the server, but the ChakraCore won't have any document property will it?

[dcouto]

I'm experiencing this issue as well and have not found a workaround.