Cannot read property 'key' of null on Razzle JS

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://[e-mail]/drewberry/common-react-components.git"
    },
    "homepage": "https://bitbucket.org/drewberry/common-react-components#readme",
    "author": {
        "name": "Drewberry",
        "email": "[e-mail]"
    },
    "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]

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).

[Andarist]

No problem, glad that you have figured it out.