I met following warning message after invoking create-next-app for ` example/with-typescript-eslint-jest `:
```
% yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
event - compiled successfully
```
I have followed the instructions in the link, and this patch is. Please merge this.
Thank you for reading.
I realized while looking over this that the `autoprefixer` plugin isn't being used by postcss because it's not included in the `postcss.config.js`. Additionally, since `postcss-preset-env` doesn't support PostCSS 8 yet, and it includes PostCSS 7 as a dependency, I've removed that package.
There is an open issue to add PostCSS 8 support to `postcss-preset-env` [here](https://github.com/csstools/postcss-preset-env/issues/191). @kripod's comments on my other PR #20956 are what prompted me to check this out.
On a side note, it looks like all the CMS examples use Tailwind CSS v1 still, so that's something someone (possibly myself) could tackle later.
Get rid of the unmet peer dependency warning when installing
a next.js project wtih node-sass 5.
node-sass 5 is the currently maintained version and removes
support one deprecated API and Node.js versions that Next.js does
not support either. Next.js uses node-sass 5 in devDependencies.
node-sass changelog: https://github.com/sass/node-sass/releases
On the other hand, as the docs encourage the sass package instead of node-sass,
(see errors/duplicate-sass.md)
I have updated examples which used node-sass 4 to the latest sass instead.
Fixes#20474
* Switch API url to working URL used in apollo example
* Update deps
* Move styled jsx out of the way to avoid demonstrating too many
unfamiliar concepts at once
dev, build and start work now.
* Added with-mqtt-js example
* Fixed eslint/prettier errors
* Update README.md
* Updated with-mqtt-js to latest next/react versions, WIP: Refactoring useMqtt()
* A2PC
* Working example, unrefactored
* A2PC
* Ran prettier
* Used NEXT_PUBLIC_ prefix instead of keys as props
* Updated readme and added .env.local.example
Co-authored-by: Sebastian König <sebastian_koenig@cotyinc.com>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Hi,
I'm submitting this PR for consideration as a new example app showing Styled JSX with SCSS working inside and outside storybook with example components.
Only known issue: I noticed that when running this example with:
`$ yarn next ./examples/with-storybook-styled-jsx-scss`
I receive the following error:
```
error - ./pages/_app.js
Error: [BABEL] .../next.js/examples/with-storybook-styled-jsx-scss/pages/_app.js: Cannot find module 'styled-jsx-plugin-sass' (While processing: ".../next.js/node_modules/next/babel.js")
```
However I notice that this same missing module error is triggered when running this existing example app "with-styled-jsx-scss".
Any changes/tweaks needed?
Thanks!
**What's the problem this PR addresses?**
`@next/mdx` adds the webpack loader `@mdx-js/loader` without resolving it to an absolute path
Depends on https://github.com/vercel/next.js/pull/17606
**How did you fix it?**
`require.resolve` the webpack loader before adding it
* Update dbConnect.js
The previous logic was in my opinion prone to errors in situations when different calls to this function from different locations may happen at the same time ( like a race condition ). If the readyState is anything but not 0, then we must not try to perform a new connection as this may cause consequent connections!
I hope this makes sense
* Update examples/with-mongodb-mongoose/utils/dbConnect.js
* Lint fix and minor changes
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
[DebugEngine stopped working](https://github.com/styletron/styletron/issues/366) with v9.5 since the devtool is strictly set to eval and this option is not customizable. Unfortunately there is currently no way to fix this.
* Update with-mongodb to be TypeScript-friendly
I slightly modified the approach so TypeScript can correctly infer types without actually having to type anything but the global:
**index.d.ts**
```ts
import { Db, MongoClient } from "mongodb";
declare global {
namespace NodeJS {
interface Global {
mongoCache: {
conn: {
client: MongoClient | null;
db: Db | null;
}
promise: Promise<MongoClient> | null;
};
}
}
}
```
* lint
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
I've looked at the example code and saw some consistent issues related to code style. The changes applied to this PR fixes the following points:
- Differences of line breaks styles between multiple files
- Differences of if statements styles
- Unnecessary comment
- A typo on a JSDocs
---
There were line breaks between statements on `pages/index.js`
````
export async function getServerSideProps(context) {
const { client } = await connectToDatabase()
const isConnected = await client.isConnected()
return {
props: { isConnected },
}
}
````
And this wasn't being applied to the MongoDB utility:
````
export async function connectToDatabase() {
if (cached.conn) return cached.conn
if (!cached.promise) {
const conn = {}
const opts = {
useNewUrlParser: true,
useUnifiedTopology: true,
}
{...}
````
And also, as shown in the snippet above, there are different styles of if statements being used.
With that being said, the reason I made this PR is because I think that this kind of inconsistent arises questions when a contributor looks to the codebase, even if this is a simple example.
Hi ✌️
I've seen that many people have problem with implement Google Tag Manager, I've created an example of how insert "Google Tag Manager" in a NextJs app
* docs: add example of Ionic with TypeScript
* docs: fix example code typo
* fix: support ionicons
* docs: fix example code by ESLint and prettier
* docs: example remove invalid config
* Renamed example to with-ionic-typescript
* Updated .gitignore
* Updated readme
* Updated package.json
Co-authored-by: Hidetaka Okamoto <info@wp-kyoto.net>
Co-authored-by: Luis Alvarez <luis@vercel.com>
This PR removes the `next.config.js` file with an `env` key and instead modifies the setup script to create a `.env.local` file with the provided credentials.
I also made some changes to the Deploy Button to ask for the environment variables when creating a new project.
## Problems with the other implementation
- pixel not working first time load page (this generate fake information to facebook analytics data)
- package react-facebook-pixel error when try use events in code blocks or other pages with the current implementation
- sometimes pixel mark twice pageview (this generate warning in facebook panel)
- standar or custom events not working
## Solutions
- Initialize pixel when entering each page (_document)
- Now, we can use custom and standar events (utils/fpixel.js)
- correct way to implement pixel according to facebook and guide facebook to implement in SPA
- this solution is complemented with example "with-google-analytics"
In my opinion, the other development has problems, but I preferred created a new example because the way to implement the base code is different. It seems that the other example is based on set the events from the Facebook control panel then this method limits an advanced implementation.
Hello, this PR updates the with-tailwindcss-emotion example to be compatible with tailwindcss 2.0
Here is a summary of all the changes:
- update `.babelrc` config
- update `README.md`
- delete `@emotion/css component` (makes the example simpler)
- update `@emotion/react` component to use xwind
- update `@emotion/styled` component to use xwind
- Add global styles to `_app.js`
- remove `_document.js` page
- remove `base.css` global style files (global styles are added in _app.js)
- update `tailwind.config.js`
- update `package.json` dependencies + remove unnecessary `build:base-css` script
By default, MobX 6 and later require that you use `actions` to make changes to the state, otherwise, it issues a warning in the console, because the `hydrate` method of the `store.js` class hasn't been declared an action, you can see this warning if you try to load pages that use hydration (ssg, ssr).
This pull request fixes that.
More info about the behavior:
https://mobx.js.org/actions.html#disabling-mandatory-actions-
I couldn't find an example when creating an SSR page using firebase's firestore data, so I improved the example based on the actual app I created
My sample app: https://github.com/mikan3rd/commitly
Mobx version 6 has been released, and it's a big one.
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Just released <a href="https://twitter.com/hashtag/mobx?src=hash&ref_src=twsrc%5Etfw">#mobx</a> 6! <br><br>👉 makeAutoObservable 😍<br>👉 Decorator free by default<br>👉 Fully revamped docs for modern React <br>👉 Supersedes both MobX 4 and 5<br>👉 Codemod for migration<a href="https://t.co/U6EpZaNhyz">https://t.co/U6EpZaNhyz</a></p>— Michel Weststrate (@mweststrate) <a href="https://twitter.com/mweststrate/status/1311344102991159296?ref_src=twsrc%5Etfw">September 30, 2020</a></blockquote>
Decorator support is officially dropped, so the syntax for creating observable objects has changed (checkout store.js).
There is no need for custom babel configuration anymore.
In comparison to current mobx examples, the difference is that I'm using regular `React.useContext` and `React.createContext` to consume the mobx store, [this is recommended by the official documentation.](https://mobx.js.org/react-integration.html#using-external-state-in-observer-components)
When the component is wrapped in the observer function, the component function is given a name so it appears correctly in the react development tools.
As of mobx v6 `mobx-react` package bundles `mobx-react-lite` so I could have used that package, but I've decided to use the `lite` one, because of the size.
Adding a example with **Neo4j** native graph database.
- with-apollo-neo4j-graphql: basic apollo configuration with neo4j driver and neo4j-graphql-js.
:)
The intention is to show people the correlation between things, in this case, understand the usage of the same key from the props and the rehydration.
Hopefully, this change will bring value as it has done with some Juniors already.
`url` object is an instance of `url.URL` which has no property called `query` and it's causing an error with Next image-optimizer as you can see with the error log below.
```log
TypeError: Cannot destructure property 'url' of 'parsedUrl.query' as it is undefined.
at imageOptimizer (/[redacted]/node_modules/next/next-server/server/image-optimizer.ts:51:11)
at Object.fn (/[redacted]/node_modules/next/next-server/server/next-server.ts:617:11)
at Router.execute (/[redacted]/node_modules/next/next-server/server/router.ts:200:40)
at DevServer.run (/[redacted]/node_modules/next/next-server/server/next-server.ts:1017:41)
at DevServer.run (/[redacted]/node_modules/next/server/next-dev-server.ts:406:18)
at DevServer.handleRequest (/[redacted]/node_modules/next/next-server/server/next-server.ts:437:14)
at /[redacted]/server/next-wrapper.ts:9:5
```
1. updates the `.gitignore` for this example to ignore the temporary output folders. ( similar to #15783 )
2. change yarn run script to npm run script ( I don't like use yarn currently. )
* Add info about SENTRY_URL on source map uploading
* Update examples/with-sentry/README.md
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Added `<Html>` and `<Head>` components in the custom `_document.js` for the with-fela example package
This fixes an issue where fela `<style>` tags were not added and sent as part of the server-side rendered HTML payload, causing a FOUC.
If the example is cloned and ran with no further setup (no environment variables set up), it will error out because `extractPostEntries` will return `undefined` which can not be serialized by `getStaticProps `.
This PR basically ensures that we return an empty array instead of the `undefined` for a collection of posts, and a `null` instead of the `undefined` for a single post.
## New features
- Example of how to use `Sentry.captureException()` in API routes 5a35982717
## Bug fixes
- Server-side source maps now work in Sentry when deployed to Vercel 629a9ed504
- If uploading source maps, `Sentry.init()` now sets the `release`, so that exceptions are correctly associated with the source maps in that release
## Open issues
### `_error.js` is unused for `getServerSideProps` errors when deployed to Vercel
Instead of rendering this example's overridden `_error.js` (like it does when testing locally with `NODE_ENV='production'`), when deployed to Vercel and an Error is thrown from `getServerSideProps`, this page is shown:
This confuses me because the Error is still successfully sent to Sentry, but I would've expected it to be sent by the call to `Sentry.captureException()` in `_error.js`. I'm not sure why it works.
### API test 2 & 3 don't work in the "server" build config
They don't work when deployed to Vercel in the "serverless" config either, but that's expected because there aren't any handlers to flush the Sentry queue. I can't figure out why they don't work in the long-lived "server" config.
- Changed script `start` to `dev` and improved it #18934 adding commando to transpile electron code;
- Added some folders into `.gitignore`;
- Updated react to avoid issues as #18916Fixes#18934
Now that all Contentful spaces support GraphQL, we are looking into switching the example from using a JS library to a simple fetch with GraphQL.
@stefanjudis ☝️
- new chakra-ui rc version doesn't work without 'farmer-motion', installed farmer motion
- updated 'chakra-ui' library from '^1.0.0-rc.3' to '^1.0.0-rc.8'
* small tweaks for those testing on an existing site with missing author or featured image on posts
When migrating WordPress or using an exisitng site, sometimes you have published posts wth missing data. The graphql plugin will properly resolve these to null, but some of existing code accessing tries to access the node property on these null values. I've made these properties optional in the pages and also tweaked some of the components along similar lines.
* Lint fix
Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
The current dependencies of the example "with-react-native-web" are outdated.
In this PR I updated them and tested that they run and work.
Newest current react and react-dom versions: 16.13.1
Newest current react-native-web and babel-plugin-react-native-web versions: 0.13.14
Mainly for the people starting with this example to have the new versions since the current versions are very far from each other.
Please merge 🙏
This PR fixes 2 issues with the mongodb example:
### 1. Fallable Caching Strategy
Calling `connectToDatabase()` multiple times before it's cached results in multiple connections being created. The latest one created was becoming the "cached" one and the others dissappear into the background.
This is now fixed by using **promise sharing** so that only one connection can ever be created.
### 2. Problematic Hot Reload
During development you can monitor your database connections and see that it continues to create more and more connections over time. Some users have reported their [databases reaching maximum connection limits](https://github.com/vercel/next.js/discussions/12229).
This is resolved by using `global` to store the cached connection. It's not ideal but it is necessary.
## Change
To opt-in to using the new layers mode by default.
## Motivation
- Reduces CSS filesize
- Prevents users from using the already deprecated old layers mode
- Removes the following console warnings:
```log
risk - There are upcoming breaking changes: purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
```
[more info](https://tailwindcss.com/docs/upcoming-changes)
When using the `with-msw` example I noticed it increased my bundle size in production, even through MSW is meant to be used in development only.
**Build size before implementing MSW**
```
Page Size First Load JS
┌ λ / 479 B 58.9 kB
├ /_app 0 B 58.4 kB
└ ○ /404 3.44 kB 61.9 kB
+ First Load JS shared by all 58.4 kB
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.b1b405.js 10.3 kB
├ chunks/framework.cb05d5.js 39.9 kB
├ chunks/main.a140d5.js 7.28 kB
├ chunks/pages/_app.b90a57.js 277 B
└ chunks/webpack.e06743.js 751 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
```
**Build size after implementing MSW according to the `with-msw` example**
```
Page Size First Load JS
┌ λ / 479 B 71.6 kB
├ /_app 0 B 71.1 kB
└ ○ /404 3.44 kB 74.6 kB
+ First Load JS shared by all 71.1 kB
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.b1b405.js 10.3 kB
├ chunks/framework.cb05d5.js 39.9 kB
├ chunks/main.a140d5.js 7.28 kB
├ chunks/pages/_app.c58a6f.js 13 kB
└ chunks/webpack.e06743.js 751 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
```
There was a 12.7 kB large increase in the `_app` First Load JS which increased the pages' First Load JS size. I tracked the problem down to the following code:
```js
if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
require('../mocks')
}
```
Removing this reduces the `_app` First Load JS to what it was previously. The `NEXT_PUBLIC_API_MOCKING` environment variable is defined in the `.env.development` file, as this means that Next.js will only activate MSW during development/testing, which is what MSW is intended for.
After discussing with @kettanaito, the author of MSW, I did some investigation. This dynamic require statement is intended to allow tree-shaking of the MSW package for production. Unfortunately this did not seem to be working. To fix this, I changed the code to the following:
```js
if (process.env.NODE_ENV !== 'production') {
require('../mocks')
}
```
This means I could remove the `NEXT_PUBLIC_API_MOCKING` environment variable from `.env.development`, as it is no longer used.
It is important to note that this still achieves the same functionality as before: MSW runs in development / testing, and not in production. If MSW must be enabled in production for some reason, the following code can be used to run MSW regardless of the environment:
```js
if (true) {
require('../mocks')
}
```
If possible, I'd love to hear from the Next.js maintainers regarding the tree-shaking process when using environment variables.
Lastly, I made the necessary changes to have the example work in production mode as well, because there is no real backend. Of course there is a comment explaining what should be changed in a real world app.
Wrong variable was being checked for the hydrate action on redux. This was causing the count to be reset to 0 instead of being 1 when initially loading index.js page.
Fixes#17299
This is a change to add the project name as in the other examples.
When we run with the current create command, we are asked for the project name.
As follows:
```
$ npx create-next-app --example with-three-js
? What is your project named? › my-app
```
This PR removes "vercel.json" from the Yarn workspaces example. Since the release of [monorepos](https://vercel.com/blog/monorepos) support, there is no need to use the "builds" property or "vercel.json".
* Fix missing yarn.lock
* Add --frozen-lockfile flag to speed up install deps
* Make sure node_modules do not contains devDependencies
* Add --targe stage docker build
As mentioned in [here](https://www.npmjs.com/package/@types/testing-library__react), the package has been deprecated and not necessary to be installed.
By removing this from `package.json` will give other devs have more understanding when learning typescript with eslint and jest about what need to be installed on the project.
Pull request for (Issue: Fix or remove the with-rebass example #16828). Just added some missing dependencies to the package.json of the example
Fixes#16839
This uses the "Expand directories" feature introduces in Prettier 2.0 to automatically format all supported file types.
Also, I fixed some badly formatted files.
## Changelog
- Updated slate.js to version 0.58.4
- Removed unused packages (immutable & slate-plain-serializer)
- Simplified example (we don’t need to demonstrate the multi editor case anymore, since this issue is now handled by slate internally)
- Remove deprecated `KeyUtils`
- Removed deprecated Components
## Related:
- https://github.com/ianstormtaylor/slate/issues/870
Goals of this PR:
- Explain `import()` first without mentioning `next/dynamic`, because `next/dynamic` in our API and **Dynamic Import** is a ES feature. This should avoid a common confusion in our users thinking that one can't be used without the other.
- Mention how `next/dynamic` can be used with **Dynamic Imports** to load react components.
- Updated example to include fuzzy search using a dynamic import.
Potential change: Leave the page to be about `import()` and move `next/dynamic` to the API reference (alongside `next/link`, `next/router`, etc.)
Closes https://github.com/vercel/next.js/pull/16299
Closes https://github.com/vercel/next.js/issues/15711
While running the current [auth0 example](https://github.com/vercel/next.js/tree/canary/examples/auth0), I bumped into this error while trying to access an API route from a page.
```
{
"error": "_lib_auth0__WEBPACK_IMPORTED_MODULE_1__.default.tokenCache is not a function"
}
```
After checking the [nextjs-auth0](https://github.com/auth0/nextjs-auth0) repo, I realize that they're using version 0.8.0 of the SDK. Changing the package.json to the appropriate version fixes this error.
Signed-off-by: Adityo Pratomo <pratomo.adityo@gmail.com>
Adding an example with [cssed](https://github.com/okotoki/cssed). A custom styling solution, which extracts CSS from template literals into separate files.
**What's the problem this PR addresses?**
A decent amount of the examples don't have a `name` field in `package.json` that matches their folder name, meaning they either lack a name or the names are duplicated.
I was testing Yarn 2 workspaces using the entire examples directory and needed to get rid of the duplicates.
**How did you fix it?**
Updated the names to match the names of their folders
* fix(with-react-relay-network-modern): fix README.md typo error
* fix(with-react-relay-network-modern): should not use store cache for create environment
* fix(with-react-relay-network-modern): should not request api again
* feat(with-react-relay-network-modern): add relay-hooks package
* feat(with-react-relay-network-modern): use new RelayEnvironmentProvider
* feat(with-react-relay-network-modern): add useQuery hook
* fix(with-react-relay-network-modern): fix cache error
* fix(with-react-relay-network-modern): fix server loading
Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Create _document.js
Includes the lang attribute with current language inside the <html> tag.
* Lint fix
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This PR is to fix "[Examples] Problem with query parameters in with-redux-persist (#15484)"
The root cause is
persist/rehydrate action will issue twice when query parameter is set. But persistStore initial bootstrap is not ready yet. So i add a bootstrap callback and force persistor to persist again to make overall state correct. I also modify the loading prop to a `<div>loading</div>` because it's confuse to set Component in loading prop.
Attached the GIF
Closes#15484
This change adds a new example, `with-mdx-remote`, which leverages [`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote) to use MDX files as content for a dynamic route.
In addition to the basic functionality, the example adds a note about somewhat advanced usage that allows the use of conditionally-loaded custom MDX components.
cc @jescalan
Updated `examples/with-tailwindcss` to the newest TailwindCSS, and opted in to future-facing breaking changes.
Also created a jsconfig.json so that files can be imported without traversing up relative paths.
Changes:
- Migrate to TypeScript. `react-intl` natively supports TypeScript now.
- Upgrade corresponding `formatjs` packages.
- Dynamically polyfill Intl API per locale since those polyfills are huge.
- Migrate to recommended workflow per https://formatjs.io/docs/getting-started/application-workflow
* Update with-storybook example
* Delete with-storybook-typescript example
* Add TypeScript section to the README
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
