Upgrade react-with-styles to version 4 #13193

mohsen1 · 2020-05-21T14:04:09Z

Currently failing because withStyles can't read the interface from context:

Unhandled Runtime Error
TypeError: Cannot read property 'createLTR' of undefined
webpack-internal:///./node_modules/react-with-styles/lib/withStyles.js (150:33)

Manually registering the interface resolves the issue:

diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js
index 91d09a2a9..a393572b8 100644
--- a/examples/with-react-with-styles/pages/_app.js
+++ b/examples/with-react-with-styles/pages/_app.js
@@ -2,11 +2,16 @@ import App from 'next/app'
 import React from 'react'
 import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
 import AphroditeInterface from 'react-with-styles-interface-aphrodite'
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
 
 import defaultTheme from '../defaultTheme'
 
 class MyApp extends App {
+    constructor(props) {
+        super(props);
+        ThemedStyleSheet.registerInterface(AphroditeInterface)
+    }
   render() {
     const { Component, pageProps } = this.props

But that's not how it is documented. I'm following up with react-with-styles to see if this is a bug.

ijjk · 2020-05-21T14:11:50Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	11.6s	11.9s	⚠️ +351ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.966	1.95	-0.02
/ avg req/sec	1271.89	1282.01	⚠️ +10.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.217	1.164	-0.05
/error-in-render avg req/sec	2053.59	2147.44	⚠️ +93.85

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	12.7s	12.9s	⚠️ +191ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

timneutkens · 2020-05-22T09:41:32Z

examples/with-react-with-styles/pages/_app.js

+
+import defaultTheme from '../defaultTheme'
+
+class MyApp extends App {


This should use the function version instead: https://nextjs.org/docs/advanced-features/custom-app

Besides that the example looks good to me 👍

examples/with-react-with-styles/pages/_app.js

Timer

Thanks!

ijjk · 2020-05-22T16:23:35Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	11.5s	11.5s	⚠️ +3ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.939	1.907	-0.03
/ avg req/sec	1289.39	1310.75	⚠️ +21.36
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.142	1.097	-0.04
/error-in-render avg req/sec	2188.56	2279.45	⚠️ +90.89

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	12.3s	12.5s	⚠️ +180ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

ijjk · 2020-05-22T16:24:26Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	10.3s	10.2s	-79ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.866	1.842	-0.02
/ avg req/sec	1339.73	1357.59	⚠️ +17.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.208	1.145	-0.06
/error-in-render avg req/sec	2068.87	2183.22	⚠️ +114.35

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	10.9s	11.1s	⚠️ +166ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

mohsen1 · 2020-05-22T17:04:27Z

Thanks for patches! Let's not merge this just yet. It's not working without ThemedStyleSheet.registerInterface(AphroditeInterface). We're looking into it on react-with-styles side

ijjk · 2020-05-22T17:46:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	11.1s	11.4s	⚠️ +318ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.17	2.089	-0.08
/ avg req/sec	1152.04	1196.79	⚠️ +44.75
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.452	1.286	-0.17
/error-in-render avg req/sec	1722.03	1944.22	⚠️ +222.19

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
buildDuration	12.6s	12.5s	-59ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	mohsen1/next.js react-with-styles-v4	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

…13284) My [draft PR was merged](#13193) so let's at least keep the code in canary in a working state.

Currently failing because `withStyles` can't read the interface from context: ``` Unhandled Runtime Error TypeError: Cannot read property 'createLTR' of undefined webpack-internal:///./node_modules/react-with-styles/lib/withStyles.js (150:33) ``` Manually registering the interface resolves the issue: ```diff diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js index 91d09a2a9..a393572b8 100644 --- a/examples/with-react-with-styles/pages/_app.js +++ b/examples/with-react-with-styles/pages/_app.js @@ -2,11 +2,16 @@ import App from 'next/app' import React from 'react' import WithStylesContext from 'react-with-styles/lib/WithStylesContext' import AphroditeInterface from 'react-with-styles-interface-aphrodite' +import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet' import defaultTheme from '../defaultTheme' class MyApp extends App { + constructor(props) { + super(props); + ThemedStyleSheet.registerInterface(AphroditeInterface) + } render() { const { Component, pageProps } = this.props ``` But that's not how it is documented. I'm following up with react-with-styles to see if this is a bug.

…ercel#13284) My [draft PR was merged](vercel#13193) so let's at least keep the code in canary in a working state.

Upgrade react-with-styles to version 4

18e60ce

mohsen1 mentioned this pull request May 21, 2020

Context provider does not provide the interface airbnb/react-with-styles#244

Open

add react-with-direction to package.json

6678e64

timneutkens reviewed May 22, 2020

View reviewed changes

Timer reviewed May 22, 2020

View reviewed changes

examples/with-react-with-styles/pages/_app.js Outdated Show resolved Hide resolved

Timer reviewed May 22, 2020

View reviewed changes

examples/with-react-with-styles/pages/_app.js Outdated Show resolved Hide resolved

Timer and others added 2 commits May 22, 2020 12:15

Apply suggestions from code review

ed8a3cf

Linting

d2b5290

Timer added the examples Issue was opened via the examples template. label May 22, 2020

Timer added this to the 9.4.3 milestone May 22, 2020

Timer marked this pull request as ready for review May 22, 2020 16:17

Timer requested a review from lfades as a code owner May 22, 2020 16:17

Timer approved these changes May 22, 2020

View reviewed changes

Merge branch 'canary' into react-with-styles-v4

40db34b

kodiakhq bot merged commit c67908c into vercel:canary May 22, 2020

This was referenced May 23, 2020

Don't merge draft PRs chdsbd/kodiak#404

Closed

Add ThemedStyleSheet.registerInterface to react-with-styles example #13284

Merged

kodiakhq bot pushed a commit that referenced this pull request May 23, 2020

Add ThemedStyleSheet.registerInterface to react-with-styles example (#…

9fb2432

…13284) My [draft PR was merged](#13193) so let's at least keep the code in canary in a working state.

rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020

Add ThemedStyleSheet.registerInterface to react-with-styles example (v…

a4e439d

…ercel#13284) My [draft PR was merged](vercel#13193) so let's at least keep the code in canary in a working state.

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

mohsen1 deleted the react-with-styles-v4 branch August 29, 2022 13:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade react-with-styles to version 4 #13193

Upgrade react-with-styles to version 4 #13193

mohsen1 commented May 21, 2020 •

edited

Loading

ijjk commented May 21, 2020

timneutkens May 22, 2020

Timer left a comment

ijjk commented May 22, 2020

ijjk commented May 22, 2020

mohsen1 commented May 22, 2020

ijjk commented May 22, 2020


		import defaultTheme from '../defaultTheme'

		class MyApp extends App {

Upgrade react-with-styles to version 4 #13193

Upgrade react-with-styles to version 4 #13193

Conversation

mohsen1 commented May 21, 2020 • edited Loading

ijjk commented May 21, 2020

Stats from current PR

timneutkens May 22, 2020

Choose a reason for hiding this comment

Timer left a comment

Choose a reason for hiding this comment

ijjk commented May 22, 2020

Stats from current PR

ijjk commented May 22, 2020

Stats from current PR

mohsen1 commented May 22, 2020

ijjk commented May 22, 2020

Stats from current PR

mohsen1 commented May 21, 2020 •

edited

Loading