Cannot alias React

[lukeed]

After #222 & using the latest master branch (2.0.0-beta.3) it's impossible to fully omit React from the next bundles.

Using this next.config.js:

module.exports = {
  webpack: (cfg, { dev }) => {
		cfg.resolve.alias = {
			'react': 'preact-compat',
			'react-dom': 'preact-compat'
		}
    return cfg
  }
}

In doing so, the commons.js output contains all Next.js pre-built code, including React. It also contains preact and preact-compat. Having both React & Preact within the same bundle makes the alias redundant and pointless.

Possible Solutions

1. Ship Next.js without the dist folder. Instead, build the library within next build before building the application code. This will also require that the new build process adheres to the same next.config.js configuration (user + defaults) all throughout.

2. Add a jsnext:main entry with a myriad of moduleimport/export statements so that we may bypass the pre-builts & handle the build process ourselves (above).

Both venture further into "userland", but they're also both completely opt-in. The unaware / unwanting dev should not & will not be affected.

Also, I thought this was the promise of #222 until I saw that my bundles fattened. For a second, t'was comforting to know that it wasn't just me over the holidays...

[arunoda]

@lukeed I think the issue here is related to our babel config.
See here

Here we use alias for react and react-dom in the babel level. That's why both are in the bundle.
(I hope we are doing that to support NPM2)

Anyway, you can write a custom .babelrc and get rid of this issue.

[arunoda]

@lukeed Yep you are correct. common.js has React itself and main.js has preact.

I really like the solution 1 you suggested.

Ship Next.js without the dist folder.

I think this is something we could do. We just need to let babel to parse our next's public API as well.

[arunoda]

I tried it now and we may don't need to change any core setup at all.
See: #543

[lukeed]

@arunoda Your PR does not work. While React is now missing from the commons.js file, it still exists in main.js.

---

Edit It works; the Preact example is functional. That was never the problem. But in terms of this Issue, fully removing/aliasing React is still broken.

[arunoda]

fully removing/aliasing React is still broken.

What do you mean by this?

[lukeed]

Preact is inside commons.js. React is still included in main.js.

So when I load main.js and commons.js, I'm still loading React, even though I don't need it at all with Preact.

[arunoda]

Did you check the production source code? To my check React was not in either files.

[lukeed]

Yup. I built your PR example

[arunoda]

Could you tell me how you identify React in your build?
Or simply in here: https://hello-world-nrqihmdggp.now.sh

[lukeed]

I cleared cache & rebuilt; and it wasn't there 😄

Thanks for taking care of this 👍 Now I have to investigate if commons can be smaller 😉