In this example, we can:
- `QueryRenderer` SSR
- caching the data
- use the feature of `react-relay-network-modern` which is the powerful tool for `relay-modern`
I copy the example `with-relay-modern`, but I just modified the code. Some detail are not modified.
If you think this example is needed, I will fix those. Otherwise, close this **PR** to let me know this example is not needed.
- The with-firebase-auth example won't run unless a database with proper rules is created first.
- Add a small error callback to addDbListener to help with debugging if someone's database connection doesn't work.
On the server `props.initialMobxState` received by the `constructor` is a fully functioning mobx store that was instantiated by `getInitialProps()` only a few ticks earlier.
Thus, creating a new instance is unneccessary.
In the browser, however, `props.initialMobxState` is a hydrated plain object and thus the store needs to be initialized.
Current with-ant-design-less example has some problems.
- Upgrade next7, console found a 404 error.
> After upgrade next7, .next folder didn't find /static/style.css and there is /static/css/style.chunk.css.
- The /_next/static/style.css link don't need be placed in the <Head> tag. The style.chunk.css file will be add in the head tag automatically after build.
- The project with more pages include _app.js, _document.js...the antd-custom.less will not work well.
> The solution is use `modifyVars` of `lessLoaderOptions`. It work well in my project~
Instead of bundling `postcss-cli` we can now make use of `@zeit/with-css`.
This also means we can get rid of the `<style>` import and concurrent build step for css. 🎉
- use `enhanceApp` so that styled-components used in _app.js are server rendered
- call parent getInitialProps, fixes#5629
- return `styles`, making the render() method obsolete.
cc @mxstbr @probablyup
I spent far too much time fiddling with this example project before realizing it contained a bug in the store initialization logic and it was a bit more complex than it needed to be.
* The custom server was not needed
* The store-initialization did effectively the same thing twice for no reason
* And wrapping MyApp component in a HOC was wholly unnecessary indirection
My changes are split into four discrete commits for clarity.
* added example for using typings-for-css-modules-loader
* Update examples/with-typings-for-css-modules/README.md
* Update examples/with-typings-for-css-modules/README.md
* Update examples/with-typings-for-css-modules/next.config.js
- Looks like no other example provides a link to a hosted demo
- There is the "Deploy to now" badge, so it can be deployed on demand when needed
- The link is broken anyway
- Probably any example hosted by an individual contributor sooner or later will be cleaned up, doesn't feel like a reliable way to provide a live demo
package accept returns false if can't find language in offered list of languages, then later on
bool is attempted to be split, and app crashes in prod & dev
Docker Multistage
* Remove `devDependencies` from `./node_modules`
in `builder` for faster copy on `base` init
* Added `isomorphic-unfetch` to show it not
being copied over to `base`.
* `isomorphic-fetch` will still show from `next`
I successfully deployed this example with `now` and `now --public` (I am on premium plan).
Did this before deploy
```sh
$ cp Dockerfile.multistage Dockerfile
```
The mobx-state-tree examples (with and without typescript) pre-dated the next _app class and needed to be updated to use _app for persisting state across client-side navigation transitions. Also removed unneeded custom server class to better keep with the "show one feature per example" style of the next examples folder
Fixes#5352 . This updates the example updating react-i18next to v8.0.6, replacing the `translate` HOC to `withNamespaces` and `I18n` to `NamespacesConsumer`.
There is one thing that I am not sure if is correct or not so I need some guidance. You gotta wrap the page with the `withI18next` HOC so it will extend the `getInitialProps` of the page with this:
```
Extended.getInitialProps = async (ctx) => {
const composedInitialProps = ComposedComponent.getInitialProps
? await ComposedComponent.getInitialProps(ctx)
: {}
const i18nInitialProps = ctx.req
? i18n.getInitialProps(ctx.req, namespaces)
: {}
return {
...composedInitialProps,
...i18nInitialProps
}
}
```
The problem lies in `i18n.getInitialProps` that has this code:
```
i18n.getInitialProps = (req, namespaces) => {
if (!namespaces) namespaces = i18n.options.defaultNS
if (typeof namespaces === 'string') namespaces = [namespaces]
req.i18n.toJSON = () => null // do not serialize i18next instance and send to client
const initialI18nStore = {}
req.i18n.languages.forEach((l) => {
initialI18nStore[l] = {}
namespaces.forEach((ns) => {
initialI18nStore[l][ns] = (req.i18n.services.resourceStore.data[l] || {})[ns] || {}
})
})
return {
i18n: req.i18n, // use the instance on req - fixed language on request (avoid issues in race conditions with lngs of different users)
initialI18nStore,
initialLanguage: req.i18n.language
}
}
```
In my understanding, among other things, it gets the `i18n` object from the request (included by the `server.js`) and uses the data to create `initialI18nStore` and `initialLanguage`, and then return these two objects plus the `i18n` object itself. If you add the `i18n` object on the return, then there will be a crash on the client-side render of the page:
```TypeError: Cannot read property 'ready' of null```
I don't know why, but returning it breaks `NamespacesConsumer` component from `react-i18next` (the state becomes null). So I commented this line and the provider on `_app.js` is getting the `i18n` instance from the `i18n.js` file (the same as `server.js`). I don't know if this would be an issue so I would like help to debug this.
Regarding a question about having different global layouts via `_app.js` usage, it came up that we could use a static property in the page that needed a different one(Thanks @timneutkens )
Link to the Spectrum post: https://spectrum.chat/?t=af6ca794-5420-4780-abd8-96f085a19e09
This PR adds an example called `with-dynamic-app-layout`, that showcases that use case in the simplest way I could think of.
Let me know if there's changes or improvements to be made. 🎉
* Add analyze-bundles example
* housekeeping: with-webpack-bundle-analyzer example
* analyze-bundles example: revert the version of faker library
* analyze-bundles add analyze:server and analyze:browser to scripts
* with-webpack-bundle-analyzer example: fix typo
Since version 2.1, react-apollo is exposing some new components that use the function-as-child (or render-prop) pattern to let you connect apollo-client magic with your components. See the blog article: [New in React Apollo 2.1](https://www.apollographql.com/docs/react/react-apollo-migration.html)
If I'm not mistaken, it's generally agreed that this pattern is (where it works) superior to the HOC pattern, for reasons that are best explained here: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
So I updated the with-apollo example to use the new API, and IMO this code is much simpler and natural to read and understand, especially if you are not already familiar with Apollo's HOC APIs.
I broke up my changes into separate commits, for easier review. Commits with "Refactor" in the message accomplish the goal of switching to the new APIs while minimizing line-by-line differences (select "Hide whitespace changes" under "Diff settings"). Commits with "Clean up" in the message follow up the refactoring with trivial things like reorganizing code sections, renaming variables, etc.
For the components doing mutations, I chose not to use the `Mutation` component, since that doesn't really make sense to me; a mutation is something that happens at a point in time, so it's not meaningful to represent a mutation in the markup, which exists for a period of time. All that component does is expose a `mutate` function for a single specified mutation, and `result` data for a single firing of the mutation (which we don't need anyways; apollo handles updating the local data with the result). To me it seems simpler and more flexible to just get the apollo client via `ApolloConsumer` and call `.mutate()` on it.
In case anyone is interested, here's what my version of `PostUpvoter` using the `Mutation` component looked like:
<details>
```jsx
import React from 'react'
import { Mutation } from 'react-apollo'
import { gql } from 'apollo-boost'
export default function PostUpvoter ({ votes, id }) {
return (
<Mutation mutation={upvotePost}>
{mutate => (
<button onClick={() => upvote(id, votes + 1, mutate)}>
{votes}
<style jsx>{`
button {
background-color: transparent;
border: 1px solid #e4e4e4;
color: #000;
}
button:active {
background-color: transparent;
}
button:before {
align-self: center;
border-color: transparent transparent #000000 transparent;
border-style: solid;
border-width: 0 4px 6px 4px;
content: '';
height: 0;
margin-right: 5px;
width: 0;
}
`}</style>
</button>
)}
</Mutation>
)
}
const upvotePost = gql`
mutation updatePost($id: ID!, $votes: Int) {
updatePost(id: $id, votes: $votes) {
id
__typename
votes
}
}
`
function upvote (id, votes, mutate) {
mutate({
variables: { id, votes },
optimisticResponse: {
__typename: 'Mutation',
updatePost: {
__typename: 'Post',
id,
votes
}
}
})
}
```
</details>
###
I'm happy with where things are at here, but I'm more than happy to address any comments, concerns, ideas for improvent!
Thanks!
This fixes https://github.com/zeit/next.js/issues/5260 by making sure that `index.js` has `getInitialProps` defined on the page exported component, not the child component.
When fixing that, I uncovered an issue where the server side rendered HTML did not match the clientside HTML, so I reworked _app.js to use the `i18nextprovider` component which has props to hydrate the initial data (for SSR), and makes sure the correct i18n instance is passed to all child components through context.
Before:
```html
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" class="next-head"/>
<link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
<link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
<link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
<link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
<link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
</head>
<body>
<div id="__next"></div>
<script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
</body>
</html>
```
After:
```html
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" class="next-head"/>
<link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
<link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
<link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
<link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
<link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
</head>
<body>
<div id="__next">
<h1>This example integrates react-i18next for simple internationalization.</h1>
<div>
<h1>welcome to next.js</h1>
<p>This example integrates react-i18next for simple internationalization.</p>
<p>test words for en</p>
<div><button>fire in the wind for en</button></div>
<p>You can either pass t function to child components.</p>
<p>Or wrap your component using the translate hoc provided by react-i18next.</p>
<p>Alternatively, you can use <code>Trans</code> component.</p>
<a href="/page2">Go to page 2</a><br/><a href="/page3">Go to page 3 (no hoc)</a>
</div>
</div>
<script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{"i18n":null,"initialI18nStore":{"en":{"home":{"welcome":"welcome to next.js","sample_test":"test words for en","sample_button":"fire in the wind for en","link":{"gotoPage2":"Go to page 2","gotoPage3":"Go to page 3 (no hoc)"}},"common":{"integrates_react-i18next":"This example integrates react-i18next for simple internationalization.","pureComponent":"You can either pass t function to child components.","extendedComponent":"Or wrap your component using the translate hoc provided by react-i18next.","transComponent":"Alternatively, you can use \u003c1\u003eTrans\u003c/1\u003e component."}}},"initialLanguage":"en-US"}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
</body>
</html>
```
* Update .babelrc
babel-plugin-transform-decorators-legacy does not exist in babel 7 in replace use @babel/plugin-proposal-decorators
* Update package.json
Acording the last commit please, test this example , will be work .
Though it sounds like some folks do run getDataFromTree() on the client in order to avoid loading states, it's non-standard usage and potentially confusing. Also it's inconsistent with the other with-apollo examples.
The `with-flow` sample has some obsolete definitions which are unused by the sample code. Removing the un-imported declarations is the easiest approach.
Hi
In the current version of the example __custom-server-typescript__, types are never checked.
For instance, change the following line :
```
const dev = process.env.NODE_ENV !== 'production'
```
by :
```
const dev: number = process.env.NODE_ENV !== 'production'
```
then run `npm run dev`. The application launches perfectly, no error is thrown.
In dev environnement, it is preferable to check types all the time, to get immediate feedback. This PR activates type checking. Only when using nodemon, so no impact on production.
Now the above code will (rightfully) refuse to compile :
```
TSError: ⨯ Unable to compile TypeScript
server/index.ts (6,7): Type 'boolean' is not assignable to type 'number'
```
I simplified the example by removing `.eslintrc.js` and related packages, as well as `nodemon`.
I also added a description in the README to address the question by @kachkaev in the original pull request (#4163).
I think I accidentally deleted the branch my prior PR was based on before you had a chance to merge or decide whether to merge. In case I borked things with that delete, I'm resubmitting the PR and figuring you can close one or the other or both as desired.
Original notes:
Based on with-mobx-state-tree, but typescript instead of javascript
Aside from a few bits of typing and renaming .js files to .ts and .tsx, most of the the edits are to avoid warnings and errors when running the code through tslint (which can be done via the `npm run tslint` command in the example if desired).
To keep this example simple, the `<styled>` component (which is used by the javascript-based with-redux and with-mobx-state-tree examples for the clock component) is not used in this example. The `<styled>` library can of course be used with typescript but (I think) it requires a more complicated set of typescript and babel .configs than is needed for most other components and libraries, so I'm just directly styling the one formerly `<styled>` div to keep things simple and broadly applicable.
> Workspaces are a new way to setup your package architecture that’s available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.
- [x] Tested in development mode
- [x] Tested in production mode
- [x] Tested with deployment https://with-yarn-workspaces-hwzubdlkul.now.sh/
- [x] Added transpile module example
Closes#3638
Pulling out a few core points from the readme...
This example builds from /src into /dist, managing the different expectations of express.js (es5, commonjs) and next.js (es6) by using a pair of tsconfig.json files, both of which are run by `npm run build-ts` or any of the other npm targets.
Hot module reloading is largely but not completely wired up (nodemon is watching /dist but tsc isn't set up to watch /src and transpile changes in /src to /dist automatically (that's mainly because I wasn't sure how to start both nodemon and a pair of tsc watchers and be confident all would get shut down when the user killed dev mode). The readme suggests running `npm run build-ts` manually in another window to push changes from /src into /dev and on into the browser.
tslint is also wired up via `npm run tslint`
The original example fails to compile on my windows machine but updating bs-platform fixes that.
Depending on bs-next causes example to fail (package compiled with old incompatible version of bs-platform) so I have included it in a bindings directory where it can serve as an example of reason bindings.
Sources have been migrated to the latest reason-react.
Running the [with-jest](https://github.com/zeit/next.js/tree/canary/examples/with-jest) example results in the following error:
```log
FAIL __tests__/index.test.js
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
at Array.forEach (<anonymous>)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.943s
Ran all test suites.
error Command failed with exit code 1.
```
Upgrading the dependencies (jest) to the latest version helps!
[More info](https://github.com/jsdom/jsdom/issues/2304)
Related #4776
* replace componentWillReceiveProps by componentDidUpdate
* replace props.url by withRouter HOC
* fix deprecated `props.url` in with-shallow-routing example
Fixes#4691Fixes#4614
This PR gives path to https://github.com/zeit/next-plugins/pull/242
I did not add or remove `^` near dependency versions in package.json files. However, I don't exclude that some changes can be made given that rc is more stable than beta.
Changes:
* Split `Header` component trough `_document.js` and `_app.js`
* Attached Router events with a way described in the [documentation](https://github.com/zeit/next.js#router-events) (though in the documentation is says it should be `Router.events.on` while I managed to get it working only by `Router.router.events.on` and I had to place it inside `componentDidMount`)
## Issue
Running [examples/with-custom-babel-config](https://github.com/zeit/next.js/tree/canary/examples/with-custom-babel-config) will result in the following error message:
```
./pages/index.js
Module build failed (from /some_path/next.js/dist/build/webpack/loaders/next-babel-loader.js):
Error: [BABEL] /some_path/next.js/examples/with-custom-babel-config/pages/index.js:
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.
...
```
## Explanation
Babel removed Babel's Stage presets on July 27, 2018.
More info: https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
## Solution
I've updated the example so ist just uses the babel plugin it actually needs.
## Related
Closes: #4772
Changes:
- Use css prop on the element to style it
- Add webpack + babelrc configuration to remove otherwise needed import boilerplate [according to glamor docs](https://github.com/threepointone/glamor/blob/master/docs/createElement.md)
Rationale: The killer feature of glamor that makes it so great is that it relieves you from naming classes/styles if you use the custom css prop. Together with the babel plugin you also don't need any extra import wherever the css prop is used.
All the real world uses I've seen of glamor has used the css props so I think the example should reflect this. As an example here is docs how to use glamor with gatsby (using the css prop):
https://www.gatsbyjs.org/docs/glamor/
Changes:
* moved the configuration from HOC to `_app.js`
* fixed the example, as `componentDidCatch` catches errors during rendering phase, but not within event handlers.
Changes:
* updated packages
* moved the content of `layout` to `_app.js` and created simple `Page` component
* replaced `import * as React` because it is not necessary to import everything
* moved `next.js.flow` to `flow-typed` as it is default directory for library definitions
* updated the gif
The existing example currently does not work because of outdated usage patterns. This PR seeks to update these patterns to the latest recommended best practice while bumping versions.
# Summary
- Bumped version numbers in `package.json`;
- Moved `<link />` tag from `pages/index.js` to `pages/_document.js` as is [recommended](https://github.com/zeit/next-plugins/tree/master/packages/next-css#usage);
- Replace individual css/font imports with import of minified CSS as is [recommended](https://react.semantic-ui.com/usage#semantic-ui-css-package);
- Removed prop (no longer used) from `<List />` element.
I’ve been experimenting with Next.js and Fastify and I made the following changes to the Fastify example based on what I found:
### Use Fastify’s plugin API
IMO putting Fastify’s listen call in a promise callback is an anti-pattern, b/c the Fastify plugin API is meant to solve the problem of async server bootstrapping.
[From Fastify’s Getting Started docs](https://www.fastify.io/docs/latest/Getting-Started/):
> Fastify provides a foundation that assists with the asynchronous bootstrapping of your application.
### Set reply.sent in handlers which return promises
[From Fastify’s Routes docs](https://www.fastify.io/docs/latest/Routes/#promise-resolution):
> If your handler is an `async` function or returns a promise, you should be aware of a special behaviour which is necessary to support the callback and promise control-flow. If the handler's promise is resolved with `undefined`, it will be ignored causing the request to hang and an *error* log to be emitted.
>
> 1. If you want to use `async/await` or promises but respond a value with `reply.send`:
> - **Don't** `return` any value.
> - **Don't** forget to call `reply.send`.
> 2. If you want to use `async/await` or promises:
> - **Don't** use `reply.send`.
> - **Don't** return `undefined`.
`app.render` returns a promise which contains undefined, so returning it in a Fastify handler will log an error. However, returning anything besides undefined will cause Fastify to try to write to the response which Next.js has already ended. The solution is to manually set the `reply.sent` flag to true when any Next.js rendering promise is fulfilled as an alternative to calling `reply.send`.
### Make Next.js handle 404 errors
This allows any route to throw a NotFound error and let Next.js handle the rendering of the 404 page.
### Make Next.js handle any route which starts with `_next` in dev
This prevents dev routes from being caught by user-defined routes.
As seen on `with-apollo-auth` there are some things that need to be addressed here too.
* #4554 remove useless `apolloState` from App props on `getDataFromTree`
* #4563 simplify `apolloState` prop
Let me know if further changes/fixes are needed.
Thank you 🎉
Updating to a more recent version of `@types/next` fixes an error I encountered while building a new app on top of the "with-typescript" example:
`Property `push` not found in SingletonRouter`
Additional context: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26665
To test, add a simple Router.push operation to the `pages/index.tsx`
```
import Router from 'next/router'
// ...
<span onClick={() => Router.push({ pathname: '/about' })}>TEST</span>
```
Apollo's getDataFromTree is supposed to be called during the server side rendering.
Being called in browser it fires an unnecessary fake render process and blocks components from rendering with loading=true.
Also there was a mistake in this code:
// `getDataFromTree` renders the component first, the client is passed off as a property.
// After that rendering is done using Next's normal rendering pipeline
this.apolloClient = props.apolloClient || initApollo(props.apolloState.data)
**Apollo** component is not rendered by getDataFromTree actually, it renders the **App** directly, thus props.apolloClient will always be undefined.
This example was discussed here: https://github.com/zeit/next.js/issues/387.
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;
}
```
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.
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.
```
* 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
**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
Changes
* Update dependencies.
* Remove sending client prop to component on pages.
* Use withApollo correctly on components.
* Use `client.cache.reset()` instead of `prop.client.resetStore()`.
@adamsoffer @timneutkens
* with-firebase-hosting: update next.js 6, readme about customization
* now next.js 6 is on Babel 7, remove conflicting babel deps
* update Next Server/Cloud Function .babelrc config
* update other deps: Cloud Functions to 1.x.x etc
* rm install-deps script as it is no longer used on deployment (firebase does not upload node_modules)
* make scripts consistent in their wrapping of dirs with \" (escaped double quotes)
* with-firebase-hosting: pin next to "latest" version
* with-firebase-hosting: fix lint errors
Adds an example based off of @jthegedus work on firebase hosting, compatible with next v6 and using typescript in both the firebase functions and the next app.
Electron recommends to disable nodeIntegration in BrowserViews.
This PR follows this recommendation and updates the example accordingly.
Changes:
- disable nodeIntegration
- update dependencies
* Rename page component's class name: Counter => Index, Counter => Other
* Rename counter component class name: AddCount => Counter
* Add counter actions `decrement` and `reset` same as with-redux example
* Modify page link by NavigateTo attr in Page component
* Modify license MIT => ISC same as others in package.json
* Modify README
fixes#4390
* Installing only `babel-plugin-transform-decorators-legacy` didn't work
* It also needs to install `babel-plugin-transform-class-properties`
It's better that Counter behave not only `increment (add)` but also `decrement` or `reset`.
* Add decrement, reset handlers and rename add handler in `components/counter.js`
* Add increment, decrement, reset actions to `store.js`
* Rename page component class name: Counter => Index in `pages/index.js`
* Remove needless dispatch count event on getInitialProps in `pages/index.js`
* Format JSX to be readable in `pages/_app.js`
* Remove needless line from `components/examples.js`
* Remove needless spaces in `lib/with-redux-store.js`
