I have spend whole day on profiling next.js compiling performance and one of the easy hacks to reduce built time is avoid doing full `stats.toJson()` that is heavy by default.
I can't use a functional component with `_document.js`.
[is-react](https://www.npmjs.com/package/is-react) can be used for another potential implementation of the warning logic, but maybe relying on `React.createElement()` internal checks is enough.
with-socket.io example was using a single index file and was managing connection in there. This would lead handling connection (disconnecting and reconnecting) in each added page.
I updated example with addition of `_app.js` and handled connection in there. This helped only subscribing to event in page and maintaining connection throughout example.
Next.js supports React 15 / React-like alternatives that don’t have the `rehydrate` method (preact) again since Next.js 5+. It’s still not recommended to use React 15. But there’s no need to mention that here as this is the initial installation and we instruct the user to install the latest version of React.
Fixes#4620
On the server and when navigating pages, the `asPath` is the pathname + query + hash visible to the users, not an url. This makes sure that we keep it consistent between hot reloads.
This makes sure plugins like @zeit/next-typescript or @zeit/next-mdx don't have to provide the `hot-self-accept-loader`.
This fixes for example @zeit/next-mdx, which doesn't implement `pageExtensions` but we do use mdx as top level pages for https://github.com/zeit/docs
I have updated [examples/with-markdown](https://github.com/zeit/next.js/tree/canary/examples/with-markdown) in order to make it works with next 6 🎉
<details>
<summary>Error</summary>
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/zhenyatelegin/Desktop/next.js/examples/with-markdown/node_modules/markdown-in-js/babel.js
</details>
Hello!
I have updated `babel-plugin-module-resolver` to `^3.1.1` and moved it to `devDependencies` in [with-absolute-imports](https://github.com/zeit/next.js/tree/canary/examples/with-absolute-imports) example to make it work with Babel 7 :)
## Error logs
```
zhenyatelegin@MBP-Zhenya ~/Desktop/next.js/examples/with-absolute-imports canary yarn build
yarn run v1.5.1
warning package.json: No license field
$ next build
> Failed to build
{ Error: (client) ./pages/index.js
Module build failed: Error: Cannot find module 'babel-plugin-module-resolver' from '/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports'
at Function.module.exports [as sync] (/Users/zhenyatelegin/Desktop/next.js/node_modules/resolve/lib/sync.js:40:15)
at resolveStandardizedName (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:78:29)
at resolvePlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:27:10)
at loadPlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:35:18)
at createDescriptor (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:152:21)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:104:12
at Array.map (<anonymous>)
at createDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)
at createPluginDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:99:10)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:50:19
at plugins (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:40:25)
at mergeChainOpts (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:296:68)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:251:7
at buildRootChain (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:85:20)
at loadPrivatePartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:41:53)
at Object.loadPartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:66:16)
@ multi ./pages/index.js
at /Users/zhenyatelegin/Desktop/next.js/dist/server/build/index.js:144:31
at runWithDependencies (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:154:4)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:1140:9
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:1064:13)
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:969:16
at /Users/zhenyatelegin/Desktop/next.js/node_modules/async/dist/async.js:1137:13
at runCompilers (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:96:47)
at fn (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:101:6)
at compiler.run (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/MultiCompiler.js:150:5)
at emitRecords.err (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:265:13)
at Compiler.emitRecords (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:371:38)
at emitAssets.err (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:258:10)
at applyPluginsAsyncSeries1.err (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/Compiler.js:364:12)
at next (/Users/zhenyatelegin/Desktop/next.js/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
errors:
[ '(client) ./pages/index.js\nModule build failed: Error: Cannot find module \'babel-plugin-module-resolver\' from \'/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports\'\n at Function.module.exports [as sync] (/Users/zhenyatelegin/Desktop/next.js/node_modules/resolve/lib/sync.js:40:15)\n at resolveStandardizedName (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:78:29)\n at resolvePlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:27:10)\n at loadPlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:35:18)\n at createDescriptor (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:152:21)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:104:12\n at Array.map (<anonymous>)\n at createDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)\n at createPluginDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:99:10)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:50:19\n at plugins (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:40:25)\n at mergeChainOpts (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:296:68)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:251:7\n at buildRootChain (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:85:20)\n at loadPrivatePartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:41:53)\n at Object.loadPartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:66:16)\n @ multi ./pages/index.js',
'(server) ./pages/index.js\nModule build failed: Error: Cannot find module \'babel-plugin-module-resolver\' from \'/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports\'\n at Function.module.exports [as sync] (/Users/zhenyatelegin/Desktop/next.js/node_modules/resolve/lib/sync.js:40:15)\n at resolveStandardizedName (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:78:29)\n at resolvePlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:27:10)\n at loadPlugin (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/files/plugins.js:35:18)\n at createDescriptor (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:152:21)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:104:12\n at Array.map (<anonymous>)\n at createDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)\n at createPluginDescriptors (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:99:10)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:50:19\n at plugins (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-descriptors.js:40:25)\n at mergeChainOpts (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:296:68)\n at /Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:251:7\n at buildRootChain (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/config-chain.js:85:20)\n at loadPrivatePartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:41:53)\n at Object.loadPartialConfig (/Users/zhenyatelegin/Desktop/next.js/node_modules/@babel/core/lib/config/partial.js:66:16)\n @ multi ./pages/index.js' ],
warnings: [] }
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c next build
Directory: /Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/zhenyatelegin/Desktop/next.js/examples/with-absolute-imports/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
A follow-up to #4604: the dot in the regexp was not escaped as intended. By default `*` matches greedily, so the results are the same, but the new regexp should be more clear. Sorry for the mistake.
The prepares for next-server.
I also took this as an opportunity to get all build directory paths from a single location, as they were previously scattered across webpack/babel plugins and loaders.
Fixes#4572
This PR intends to address https://github.com/zeit/next.js/issues/4572 around documenting browser support and what needs polyfills.
There are many outstanding issues on the tracker regarding browser support and polyfills. This may alleviate some of them.
Fixes#4603.
Tests explain it the best:
```js
describe('development mode (no chunkhash)', () => {
it('should strip the extension from the filename', () => {
const filename = 'foo_bar_0123456789abcdef.js'
expect(getChunkNameFromFilename(filename, true)).toBe('foo_bar_0123456789abcdef')
})
it('should only strip the extension even if there\'s a hyphen in the name', () => {
const filename = 'foo-bar-0123456789abcdef.js'
expect(getChunkNameFromFilename(filename, true)).toBe('foo-bar-0123456789abcdef')
})
})
describe('production mode (with chunkhash)', () => {
it('should strip the hash from the filename', () => {
const filename = 'foo_bar_0123456789abcdef-0123456789abcdef.js'
expect(getChunkNameFromFilename(filename, false)).toBe('foo_bar_0123456789abcdef')
})
it('should only strip the part after the last hyphen in the filename', () => {
const filename = 'foo-bar-0123456789abcdef-0123456789abcdef.js'
expect(getChunkNameFromFilename(filename, false)).toBe('foo-bar-0123456789abcdef')
})
})
```
* remove `predeploy` scripts from `firebase.json` in favour of `npm` `pre` scripts as they are consistent across `deploy` and `serve` commands. (to revisit once Firebase add support in the `firebase.json` for `preserve`)
* update deps
* workaround some bug where Babel could not resolve the standard `next/babel` config. Explicitly defining this seems to remove the issue.
* closes#4562
This fixes a missed bug introduced in #4510.
Because the regexp was `/-[^-]*/` and not `/-[^-]*$/`, a wrong part of the filename was being removed:
```
bad:
'foo-bar-0123456789abcdef-0123456789abcdef.js' -> 'foo-0123456789abcdef-0123456789abcdef.js'
good:
'foo-bar-0123456789abcdef-0123456789abcdef.js' -> 'foo-bar-0123456789abcdef'
```
By a stroke of luck this didn't affect the existing dynamically generated chunks. To prevent regression I've added unit tests for the function that generates the name.
Btw. in the original issue (#4433) I used the right regexp, I just used the wrong regexp in #4510.
cc @timneutkens
Fixes one of the problems described in #4433.
The old regexp was removing everything after a hyphen, so with a chunk name like so:
```
chunks/path-to-a-file-[hash].js
```
the saved chunk name was
```
chunks/path
```
This caused problems, because webpack by default changes `/` to `-` in chunk names generated e.g. by ``import(`foo/${bar}`)``.
After this change the chunk name will be
```
chunks/path-to-a-file
```
Since `_app.js` is used on every page it makes sense to move it's dependencies to the `commons.js` so that if you require a dependency in `_app.js` and in one of your pages it is not included twice in your bundles.
This PR modifies the `CommonsChunkPlugin` to move every module that is used in `_app.js` and at least in one other bundle.
**Make amp example valid**
I'm using amp validator chrome plugin which shows that `meta charset=utf-8` is duplicated.
I assume that `Head` component adds `<meta charset="utf-8" class="next-head next-head">`
anyway.
And this line just duplicating it.
<img width="987" alt="screen shot 2018-06-06 at 15 54 45" src="https://user-images.githubusercontent.com/1488195/41036743-198ca00a-69a2-11e8-978c-5a5cb5a994d2.png">
Hello! I ran into an issue using typescript and jest with next 6.0.0. I was able to work through fixing it and I wanted to share my solution back to next.js, by upgrading the with-jest-typescript example to next 6.0.0.
The steps I followed were:
1. `npx babel-upgrade --write` which added babel-core@^7.0.0-bridge.0 to allow jest's babel 6 to play nice with next's babel 7
2. Remove `ts-jest` and replace with `babel-jest` to use babel to transform the typescript code, as is done when the dev and production builds run
3. Update the babelrc to use commonjs modules in test mode to be compatible with jest
Also, I removed the `NODE_ENV=test` on the jest task, because jest sets the env to test anyways, and I'm on windows where this code is incorrect. The other option is to use `cross-env` but I felt it was simpler to just remove the environment override.
To my knowledge, this PR would help on the following issues:
#3663#4227#4531#4528#4239
