Next.js: React Alias

[lukeed]

Sorry, I seem to be a nag... 😞

I'm not sure at what point it was, but the latest few beta releases (and current 2.0 release 🎉) lost the ability to fully alias React.

Even with a next.config.js fully configured for aliasing React to Preact or Inferno, the react and react-domstill need to be installed, or else an error is thrown instantly. Not all that reassuring to begin with.

After installing those two, the final bundle (.next/commons.js in beta, .next/app.js in 2.0) is over 100kb. I recognize this to be larger than what the using-{preact|inferno} examples produced in the past.

So, suspiciously, I combed through the output code and, sure enough, preact, preact-compat and react are all there.

I tested with Preact, but Inferno would operate exactly the same.

For combing, search for expected a ReactNode. Neither of the "compat" packages include this error message.

[arunoda]

Okay. That's something we need to investigate.

[lukeed]

IMO, the next.config.js should be respected at initial boot & build. AKA, I shouldn't even be getting a module 'react' not found if I've aliased correctly.

[Orangetronic]

+1

this seems to break Now deployments where an alias is set up (i've tested with Preact)

[suhaotian]

$ npm run dev

> [email protected] dev E:\repo\next.js\examples\using-preact
> node server.js

module.js:472
    throw err;
    ^

Error: Cannot find module 'react'
    at Function.Module._resolveFilename (module.js:470:15)

[frol]

Here is what I see when I use webpack-bundle-size-analyser (after next build, so it should be a production build):

next: 86.43 KB (25.8%)
core-js: 68.86 KB (20.5%)
regenerator-runtime: 24.84 KB (7.41%)
url: 23.08 KB (6.88%)
preact: 22.93 KB (6.84%)
preact-compat: 16.75 KB (4.99%)
punycode: 14.31 KB (4.27%)
es-abstract: 13.83 KB (4.13%)
styled-jsx: 9.7 KB (2.89%)
babel-runtime: 7.94 KB (2.37%)
process: 5.29 KB (1.58%)
querystring-es3: 5.06 KB (1.51%)
ansi-html: 4.16 KB (1.24%)
react-hot-loader: 3.95 KB (1.18%)
object-keys: 3.83 KB (1.14%)
es-to-primitive: 3.2 KB (0.955%)
http-status: 3.09 KB (0.920%)
prop-types: 3.04 KB (0.905%)
fbjs: 2.65 KB (0.791%)
mitt: 1.8 KB (0.537%)
define-properties: 1.52 KB (0.454%)
function-bind: 1.49 KB (0.444%)
object.entries: 1.25 KB (0.371%)
is-callable: 1.22 KB (0.364%)
webpack: 1 KB (0.299%)
is-regex: 918 B (0.267%)
<self>: 3.16 KB (0.942%)

The .next/app.js is 131kb minified (not compressed), so the above numbers in kb or the listed modules are not exactly correct, but I guess that still can be used as a source for further investigation.

I see this same picture with Next.js 3.0.0-beta6, 2.4.0, 2.3.1, 2.2.0, 2.1.1.

Next.js 2.0.1 produces a slightly smaller bundle (96kb):

next: 70.08 KB (22.2%)
core-js: 68.86 KB (21.8%)
regenerator-runtime: 24.84 KB (7.88%)
url: 23.08 KB (7.32%)
preact: 22.93 KB (7.27%)
preact-compat: 16.75 KB (5.31%)
punycode: 14.31 KB (4.54%)
es-abstract: 13.83 KB (4.39%)
styled-jsx: 9.7 KB (3.08%)
babel-runtime: 8.47 KB (2.68%)
node-libs-browser: 5.29 KB (1.68%)
  process: 5.29 KB (100%)
  <self>: 0 B (0.00%)
querystring-es3: 5.06 KB (1.60%)
react-hot-loader: 3.95 KB (1.25%)
object-keys: 3.83 KB (1.22%)
es-to-primitive: 3.2 KB (1.02%)
http-status: 3.09 KB (0.978%)
prop-types: 3.04 KB (0.962%)
fbjs: 2.65 KB (0.841%)
unfetch: 1.62 KB (0.513%)
define-properties: 1.52 KB (0.483%)
function-bind: 1.49 KB (0.472%)
object.entries: 1.25 KB (0.395%)
is-callable: 1.22 KB (0.387%)
webpack: 1 KB (0.318%)
is-regex: 918 B (0.284%)
htmlescape: 863 B (0.267%)
<self>: 2.61 KB (0.828%)

The bundle size difference between Next.js 2.0.1 and the rest looks odd to me because the reports are almost identical (the next module is 16kb smaller, but I don't see where the rest 20kb difference [131kb != 96+16] comes from)

I haven't found any Next.js version which would produce the bundle of less than 96kb (I went down to Next.js 2.0.0-beta32, which produced common.js (73kb) + main.js (60kb), so 133kb total).

Other catches:

1. next, core-js, regenerator-runtime, and url modules are the main blames for the bundle size.
2. prop-types is still present in the production build.

[sedubois]

@arunoda do you think something can be done about this? Considering the performance improvement it would be great to switch to preact but it looks like the with-preact example is unusable right now. Thanks a lot 🙂

[jaylinski]

Just ran into the same issue. Any news / workaround (that doesn't increase bundle size) on this?

[arunoda]

We've remove this with Next.js 3.0.

[jeremiecarlson]

Tried this out with the current beta ^3.0.1-beta.20 and I'm getting a failure to compile error regarding ReactReconciler when running the preact example project.

This module was not found:

* react-dom/lib/ReactReconciler in ./node_modules/next/dist/client/next-dev.js

For my specific needs React itself cannot be included in the project at all, so I'm trying to avoid it even if its just for build processes.

[arunoda]

@jeremiecarlson For this you need to wait for this to be loaded: https://github.com/zeit/next.js/pull/2659

Or you add custom React only in the production mode. I guess in that way, you won't see the ^^^ issue.