The purpose of the PR is to add the simplest possible integration with Storybook.
It leaves the default Storybook and also adds a custom component to show how it would be used in both the app and Storybook.
Update:
Tested with latest 👉 6.1.1
I had some trouble to get server side rendering with the AWSAppSyncClient working. I finally found a solution in https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/82 but it might be worth to share it here as well. Instead of adding a big code block to each file I'll just refer to this Pull Request.
______
In case you want to use the `AWSAppSyncClient` you just need to replace the `create()` function with this function:
```jsx
import AWSAppSyncClient from 'aws-appsync';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
function create(initialState) {
const client = new AWSAppSyncClient({
url: AWS_AppSync.graphqlEndpoint,
region: AWS_AppSync.region,
auth: {
type: AUTH_TYPE.API_KEY,
apiKey: AWS_AppSync.apiKey,
// Amazon Cognito Federated Identities using AWS Amplify
//credentials: () => Auth.currentCredentials(),
// Amazon Cognito user pools using AWS Amplify
// type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
// jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
},
disableOffline: true,
}, {
cache: new InMemoryCache().restore(initialState || {}),
ssrMode: true
});
return client;
}
```
When clicking a next/link with a hash (#something) multiple times, it wouldn't keep the scrolling behavior browsers have. This makes sure we correctly trigger it.
Fixes#4686
Adds tests for @zeit/next-typescript so that we don't regress on this again.
I've fixed an issue in the `next` CLI too which caused lingering processes when the process gets force killed, which is what we do in the test suite, so it kept running if there was no manual quit.
This PR fixes#4615
From the issue :
> One thing we might consider is merging and showing a warning for keys not defined in exportPathMap
The behaviour after this PR is the following :
```js
// next.config.js
module.exports = {
exportPathMap: () => ({
'/': { page: '/', query: { a: 'blue' } }
})
}
```
| url called | `ctx.query` | warning ? |
|-|-|-|
| `/` | `{ a: 'blue' }` | |
| `/?a=red` | `{ a: 'blue' }` | |
| `/?b=green` | `{ a: 'blue', b: 'green' }` | `... parameter 'b' missing in exportPathMap` |
Is that the expected behaviour ? If not, I'll update the PR to shape the expected behavior.
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')
})
})
```
