EmotionFunctions are broken with emotion 10+ #970
Comments
I was missing something, it fails on SSR but works fine when in the browser (that makes sense) : |
mbaumanndev
changed the title
|
You’re right, EmotionFunctions needs an update. Would you be willing to send a PR? |
|
I'll send a PR when i'll be done fixing it, it involves to modify the webpack setup, because some code of the emotion cache handler is trimed by webpack |
|
@mbaumanndev were you able to figure out what webpack changes were required to get this to work for you? |
|
(Hi @RobertBolender 👋) If you find any docs on updating to emotion 10 relevant to SSR, link them here... |
|
Hi @RobertBolender, I didin't find how to make it work properly, even with the help of the emotion community on slack. They gave me this snippet, but it didn't worked : const path = require('path')
const fs = require('fs')
function findPkgRoot(directory) {
const configPath = path.join(directory, 'package.json')
if (fs.existsSync(configPath)) {
return directory
}
return findPkgRoot(path.join(directory, '..'))
}
// webpack config
{
resolve: {
alias: ['emotion-server', 'create-emotion-server', /* more */].reduce((aliases, pkgName) => {
const pkgRoot = findPkgRoot(require.resolve(pkgName))
const pkgJson = require(path.join(pkgRoot, 'package.json'))
const pkgMain = pkgJson.module ? pkgJson.module : pkgJson.main
aliases[pkgName] = path.join(pkgRoot, pkgMain)
return aliases
}, {})
}
} |
|
We where just going to start using ReactJS.NET and it worked great until we imported our component library which uses Emotion 10 (
The reason being this line of code (from Emotion I think): var insertStyles = function insertStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;It seems that the According to their documentation here: https://emotion.sh/docs/ssr using the default renderToString function: import { renderToString } from 'react-dom/server'should "just work". As far as I can tell Emotion should no longer need access to the head etc since it inserts Is there anyway I can help with more information @dustinsoftware ? |
|
Interactive debugging should now be possible with the JSEngineSwitcher Node
package. You may have luck setting a breakpoint instead of trying to
discern from the thrown error.
The reactnet-webpack template uses emotion, if you can throw together a
quick repro I can take a look.
You can also skip SSR for some pages with clientOnly: true if that is
helpful, or use something like useEffect to defer rendering the style until
client side.
…On Thu, Mar 19, 2020 at 08:41, Johan Otterud ***@***.***> wrote:
We where just going to start using ReactJS.NET and it worked great until
we imported our component library which uses Emotion 10 ***@***.***/core).
The error we get is that any component that uses the css prop and the
emotion jsx function will cause ReactJS.Net to throw an exception:
TypeError: Cannot read property 'key' of null
The reason being this line of code (from Emotion I think):
var insertStyles = function insertStyles(cache, serialized, isStringTag) {var className = cache.key + "-" + serialized.name;
It seems that the cache object in their implementation is null. I'm not
sure what is causing this, shouldn't Emotion 10 be able to work without
custom render functions and so on?
According to their documentation here: https://emotion.sh/docs/ssr using
the default renderToString function:
import { renderToString } from 'react-dom/server'
should "just work". As far as I can tell Emotion should no longer need
access to the head etc since it inserts <style> tags instead.
Is there anyway I can help with more information @dustinsoftware
<https://github.com/dustinsoftware> ?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#970 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHGCFSY5AOGZNAMQG67HJDRII4IVANCNFSM4JOLICDQ>
.
|
|
Hi again @dustinsoftware thank you for your hard work on this project! After searching around it seems there is a problem with the latest version of However after downgrading to v.10.0.9 I get a new error:
Not sure anymore if this is an issue with ReactJS.NET or Emotion. I guess the problem now is that it needs access to the document.head (or the options.container) which I need to find a way to solve. I can ofc try to get a sample repo up and running if you want to take a look yourself. I guess there is no easy way to expose the document.head to ReactJS.NET? |
|
Another clue to a solution could perhaps be this: https://emotion.sh/docs/cache-provider Using the cache provider I should be able to tell emotion to insert all style tags into a specific HTML element... But the question is where I would get that HTML element from :P I guess ReactJS.NET can't pass an HTML element from .NET land? |
|
Yeah so this used to work with Emotion 9, I wonder what was changed. Here's the versions the template uses... React.NET/src/React.Template/reactnet-webpack/package.json Lines 10 to 11 in dc25c88 |
|
A lot has changed in Emotion 10, but I think I am closer to a solution. I got exactly the same error in node as in ReactJS.NET. It seems that the way I had set up my webpack it would build a bundle meant for a browser. That means Emotion will try to load things like So if I build my bundle in webpack using So if I can build a bundle meant for the server that ReactJS.NET can consume it should work... :P Any ideas? |
|
Try using JSEngineSwitcher.Node. It was released a few weeks ago and uses a
real node engine.
…On Thu, Mar 19, 2020 at 09:54, Johan Otterud ***@***.***> wrote:
A lot has changed in Emotion 10, but I think I am closer to a solution.
I got exactly the same error in node as in ReactJS.NET. It seems that the
way I had set up my webpack it would build a bundle meant for a browser.
That means Emotion will try to load things like document which is not
available SSR.
So if I build my bundle in webpack using target: node it works in node,
but then ReactJS.NET can't handle it because it doesn't like the require
syntax...
So if I can build a bundle meant for the server that ReactJS.NET can
consume it should work... :P Any ideas?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#970 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHGCFVTRA6DRVX5NFINVG3RIJE23ANCNFSM4JOLICDQ>
.
|
|
Thank you for your suggestion @dustinsoftware I started looking into the using the JSEngineSwitcher.Node but it was such a deep rabbit hole, had problems with getting it working in our old solution. But I actually got Emotion 10 working in ReactJS.Net now using the V8 engine and no special render functions! The reason for the problem was that Emotion would think that my bundle I built with Webpack 4 was going to be used in a browser (because that is the Webpack 4 default, and using target node would break for the previously mentioned reasons). Emotion 10 actually have a special browser version of their dist that assumes stuff like So to fix it I modified my webpack config to trick it into using the non browser version of Emotion 10 by setting: resolve: {
...
aliasFields: ["module"]
},Another solution would be to go into each So that's one way to fix this for now, so hopefully the Emotion team can do some fixes to make this easier in the future because other solutions that uses SSR in a non node environment have the same kind of problems. Thank you! |
|
@johot Sorry to necro this a bit, but did you find a "proper" solution to this problem med emotion? |
|
@johot I use Emotion CSS prop in my ReactJS.NET today and found the same issue. I am not sure any update for the solution. |
|
I still can't get Emotion CSS work with the latest version or older versions. Here are what I need to do:
yarn add styled-components
yarn add -D babel-plugin-styled-components
{
"presets": [
"@babel/env",
"@babel/typescript",
"@babel/react"
],
"plugins": [
"babel-plugin-styled-components"
]
}
I hope this can be helpful for those who only want to use style component without CSS prop which Emotion supports. Source code of the example project is here https://github.com/dotnetthailand/ReactServerSideRendering |
Please verify these steps before filing an issue, and check them off as you go
JavaScriptEngineSwitcher.V8.Native.win-x64)SetUseReactandSetUseBabelis correct inReactConfig.csorStartup.csI'm using these library versions:
ReactJS.NET: 5.1.1JavaScriptEngineSwitcher: 3.1.8reactandreact-dom: 16.12.0webpack: 4.41.2node: 12.11.0Runtime environment:
Steps to reproduce
Take the sample code from
React.Sample.Webpack.CoreMvcand upgrade the project to ASP.NET Core 3.1 preview 3 (I assume that the behaviour is the same with 3.0, but I havn't tried).Remove the
react-emotionpackage (v10 throw an error explaining that it's deprecated and should be replaced with@emotion/coreand@emotion/styledAt the end, I have the following
package.json:{ "name": "my-app", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "webpack" }, "devDependencies": { "@babel/core": "^7.7.2", "@babel/plugin-proposal-class-properties": "^7.7.0", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.7.1", "@babel/preset-react": "^7.7.0", "@babel/preset-typescript": "^7.7.2", "babel-loader": "^8.0.6", "babel-plugin-emotion": "^10.0.23", "babel-runtime": "^6.26.0", "react-select": "^3.0.4", "reactstrap": "^8.0.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.10" }, "dependencies": { "@emotion/core": "^10.0.22", "@emotion/styled": "^10.0.23", "emotion": "^10.0.23", "emotion-server": "^10.0.17", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-jss": "^10.0.0", "react-router-dom": "^5.1.2", "styled-components": "^4.0.0" } }In
Content/component/emotion.jsx, replaceimport styled from 'react-emotionwithimport styled from '@emotion/styled';When launching the app, an error occurs :
ReacjJS.NET doesn't provide a container for server side rendering, so Emotion try to use the dom and crashed.
Note that Emotion seems to work fine (I don't know it well, I'm certainly missing something) when removing
EmotionFunctionsfrom the~/Views/Home/Index.cshtmlview and removingimport { renderStylesToString } from 'emotion-server';andglobal.EmotionServer = { renderStylesToString };fromContent/component/expose-components.js.If it helps, I can provide a sample on a new branch/PR, or will be happy to create a PR to fix it if it's a good first issue.
The text was updated successfully, but these errors were encountered: