Issue with nextjs 8

[theallseingeye]

Since upgrading to nextjs 8 I'm getting an issue with styled-jsx

[theallseingeye]

I get this error:

TypeError: Cannot read property 'replace' of undefined
    at sanitize (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:21:15)
    at StyleSheetRegistry.computeSelector (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:207:17)
    at StyleSheetRegistry.getIdAndRules (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:234:22)
    at StyleSheetRegistry.add (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:80:38)
    at JSXStyle.render (/home/project/node_modules/styled-jsx/dist/style.js:74:28)
    at processChild (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2863:18)
    at resolve (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
    at ReactDOMServerRenderer.render (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
    at ReactDOMServerRenderer.read (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
    at renderToString (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3526:27)
    at render (/home/project/node_modules/next-server/dist/server/render.js:39:16)
    at renderPage (/home/project/node_modules/next-server/dist/server/render.js:96:16)
    at Function.getInitialProps (/home/project/app/.next/server/static/development/pages/_document.js:874:25)
    at Function._callee$ (/home/project/app/.next/server/static/development/pages/_document.js:2123:77)
    at tryCatch (/home/project/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/project/node_modules/regenerator-runtime/runtime.js:288:22)

[maggo]

Not sure what causes the error as the style tag in component.js looks fine, but a downgrade to styled-jsx@3.0 fixes the issue

[giuseppeg]

it seems that styled-jsx is pinned in yarn.lock to 3.1.0

[sergiodxa]

I'm checking this, since I only use it on personal projects I'm doing it only when I have time.

[decebal]

@sergiodxa it looks like styled-jsx latest releases, in particular 3.2.1 fixed the issue, at least for me.

[lucasavila00]

@sergiodxa it looks like styled-jsx latest releases, in particular 3.2.1 fixed the issue, at least for me.

adding to package.json

  "resolutions": {
    "styled-jsx": "3.2.1"
  },

did not fix it but adding

  "resolutions": {
    "styled-jsx": "3.0.0"
  },

solved it for me.

[wglanzer]

@sergiodxa it looks like styled-jsx latest releases, in particular 3.2.1 fixed the issue, at least for me.

adding to package.json

  "resolutions": {
    "styled-jsx": "3.2.1"
  },

did not fix it but adding

  "resolutions": {
    "styled-jsx": "3.0.0"
  },

solved it for me.

Same for me, works with "3.0.0" but not with the latest "3.2.1"

[decebal]

Hmm, this is rather curious, once I apply the lock file from: #84 this issue is fixed, but there are quite a few packages.

Even when on the main repository(master branch on next-nprogress) if I rebuild the package the issue seems settled.

[rap2hpoutre]

@sergiodxa Thank you for this package! Since downgrading styled-jsx is not a viable solution, do you think you will find some time to address this issue?

[sergiodxa]

I don't have time to check this, if someone wants to send a PR I could merge it and publish a new version with the merged code.

[rap2hpoutre]

OK thank you!

Here is an alternative: https://github.com/zeit/next.js/tree/canary/examples/with-loading