Cannot read property 'key' of null on Razzle JS

[wagnerjsilva]

I've created an NPM package to be shared across my projects and installed it successfully in a standard CRA App, it renders, the styles and everything is great.

However, when using it with Razzle JS, which is a SSR implementation I keep on getting:

TypeError: Cannot read property 'key' of null

I was able to trace the issue to:

I would expect emotion to work out of the box with both my SSR and non CRA project, however that doesn't seem to be the case.

I've tried with the latest version of Emotion, and React, and have been trying to go back a bit, still, nothing is happening.

Here is an extract of what my package.json looks like:

{
    "name": "@drewberryuk/common-react-components",
    "version": "1.0.1h",
    "description": "Put a description here",
    "main": "build/index.js",
    "repository": {
        "type": "git",
        "url": "git+ssh://git@bitbucket.org/drewberry/common-react-components.git"
    },
    "homepage": "https://bitbucket.org/drewberry/common-react-components#readme",
    "author": {
        "name": "Drewberry",
        "email": "support@drewberry.co.uk"
    },
    "peerDependencies": {
        "react": "^16.9.0"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack --watch",
        "build": "webpack"
    },
    "dependencies": {
        "@babel/core": "^7.2.2",
        "@babel/plugin-proposal-class-properties": "^7.2.3",
        "@babel/plugin-transform-react-jsx": "^7.3.0",
        "@babel/preset-env": "^7.6.2",
        "@babel/preset-react": "^7.0.0",
        "@babel/runtime": "^7.4.4",
        "@emotion/babel-preset-css-prop": "^10.0.17",
        "@emotion/cache": "^10.0.9",
        "@emotion/core": "^10.0.9",
        "@emotion/css": "^10.0.9",
        "babel-loader": "^8.0.0",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "react": "^16.9.0",
        "react-router-dom": "^5.0.1",
        "webpack": "4.39.1",
        "webpack-cli": "^3.3.9"
    }
}

[Andarist]

Could you prepare a sample repository which would be suffering from this issue? This would help a lot in getting to know what's going on.

[Andarist]

A repro case was not provided for over a month and there was also no other response - I have to close this. If the issue still affects you please open a new issue with repro case.

[vongohren]

@wagnerjsilva did you solve this in the end? Seems like the same problem Im having

[Andarist]

@vongohren if you provide a repro case I can take a look at your problem

[vongohren]

@Andarist this is a repro that showcased my initial problems. It has not added the emotion plugin yet, but it showcases that css becomes and object, and prop registred of null problem, if you uncomment the component in the index file of the next-app.

I will now add a lib version with that emotion babel plugin to get the key problem

https://github.com/vongohren/fouc-example

Quick edit, im just getting registered of null right now with this repro. But it is annoying because the css version does not work, and the styled version does not work either

[Andarist]

https://github.com/vongohren/fouc-example/blob/3bce4be66805710f80a9e77318c4803ac4700834/packages/emotions-lib/src/index.js
This one gets built without a our babel plugin and without manual jsx pragma set - so css prop has no way of working here.
https://github.com/vongohren/fouc-example/blob/3bce4be66805710f80a9e77318c4803ac4700834/packages/emotions-babel-lib%20/.babelrc
This one is not configured correctly as per documentation:
https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop#usage

If you use @babel/preset-react or @babel/preset-typescript ensure that @emotion/babel-preset-css-prop is inserted after them in your babel config.

Additionally, this setup has a very low chance of working correctly for a number of reasons:

• using webpack to bundle your library-like code, its default mode is to target browsers and thus it bundles files dedicated for browsers - but later on you try to consume them with next during SSR. To fix this you would have to bundle 2 versions of such a library - one for browsers, one for server. You could do that by setting appropriate target in webpack's config.
• bundling in emotion and other dependencies in your library-like code. Both emotion (and any other context using library) and even React itself won't work properly if you ship multiple copies of them which you effectively are doing when you bundle in all of your dependencies. You could fix this by using https://webpack.js.org/configuration/externals/#externals

[vongohren]

@Andarist thanks alot for the pointers, these are some things I have tried out, but not matched all at once. I will see if I can get that repo up and running with these pointers.

But some additional questions.

When you are saying that I need two bundles, I know how, but I dont know how I will handle that with next? Will I do one node version and next will take care of it all? And the browser version will just be for any other consumption related situation? Or do I need to use both for next.js?

Yeah this context part I have acctually done other places, so thanks for pointing that out! I will fix that in this repo :)

[Andarist]

Actually you should just not bundle your dependencies in - let them stay as your dependencies (and thus in other node_modules of your consumers). Then each tool (like Next) should be able to resolve correctly to appropriate files - because it will use the file structure (or rather mostly package.json metadata) prepared by us (or other packages using this technique).

[vongohren]

@Andarist cool cool, you have some concrete pointers to important entries in files :D ? I will try this out the following weeks. But will finish the task with the fouc, and get back to this!

[Andarist]

Not sure if I understand correctly the question - so let me maybe rephrase: I believe that the problem will go away once you use https://webpack.js.org/configuration/externals/#externals option correctly (you basically need to put all of your dependencies into externals when building a library). That being said - webpack is rarely used for building library code (it's great for building applications though), my recommendation would be to use rollup for building libraries, or even better - a wrapper around it that will simplify things for you (this is such a wrapper - https://preconstruct.tools/ )

[NNSTH]

I have same problem with SSR build by webpack. my webpack config target is 'node', so I don't understand the exact issue. anyway I saw that your isBrowser detection beeing compiled into:
var isBrowser = "object" !== 'undefined';

Any idea what am I doing wrong?

thanks a lot for amazing job!

[Andarist]

@NNSTH please share a repro case so I could take a look

[NNSTH]

It's very strange, I'm trying to make a simple repro for this- but it's working as well within this repro.
Will try to configure the changes, this might take me several days.

[NNSTH]

Got it! this was a problem of using webpack.DefinePlugin for document: {}.
Deleted this line of configuration and everything is working now. thanks for your help!

[Andarist]

No problem, glad that you have figured it out.