Commit graph

102 commits

Author SHA1 Message Date
Hannes Bornö
cd8a1a4be5
Remove stack trace from full reload warning (#43453)
Adds a new error link with possible ways to fix the cause of the full reload. Removes the stack trace and adds the file causing the error to the message.

Before
![image](https://user-images.githubusercontent.com/25056922/204278894-dd773e6d-9d79-459a-abc4-243c1b22b206.png)

After:
![image](https://user-images.githubusercontent.com/25056922/204278538-5e26a174-bae4-457f-aac4-f239398227f8.png)

Fixes #43448

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-11-28 13:18:26 +00:00
Colin
013844c017
Fix "apply() is only allowed in ready status (state: idle)" HMR errors (#43242)
This is a follow-up to https://github.com/vercel/next.js/pull/43145 that
fixes [this
issue](https://github.com/vercel/next.js/pull/43145#issuecomment-1323782302):

```
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: apply() is only allowed in ready status (state: idle)
    at https://app.airplane.so:5000/_next/static/chunks/webpack.js?ts=1669127927262:615:21
```

## Bug

- [X] Related issues linked using `fixes #number` - n/a
- [X] Integration tests added - n/a
- [X] Errors have a helpful link attached, see `contributing.md` - n/a
2022-11-26 23:40:05 -08:00
Hannes Bornö
5788f602a4
Improve @next/font error handling (#43298)
Use `WellKnownErrorsPlugin` when formatting `@next/font` errors.

The error handling is different for expected errors (like validation
errors) and unknown ones. If the error is expected it just displays the
formatted error message. If it's an unknown error it will also display
the stacktrace, and in case the versions of `@next/font` and `next` are
different it will encourage you to try to update them both.

Removes the usage of `error-loader` when importing from
`pages/_document.js`, handle that case with `WellKnownErrorsPlugin` as
well.

The current warning when using different versions is removed. If the
versions are incompatible you'll get an error in the overlay instead.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-11-23 16:08:28 -08:00
Colin
ed2aa9fd75
Fix HMR error: "Cannot read properties of null (reading 'length')" (#43145)
After upgrading to Next.js 13, we started seeing the following HMR
errors:

```sh
$ next dev
# ...
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
TypeError: Cannot read properties of null (reading 'length')
    at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55)
```

This error appears related to the changes made in
https://github.com/vercel/next.js/pull/42350 (cc @alexkirsz). It appears
that `module.hot.check` will pass `null` when there are no updates:

```ts
  /**
   * Throws an exceptions if status() is not idle.
   * Check all currently loaded modules for updates and apply updates if found.
   * If no update was found, the callback is called with null.
   * If autoApply is truthy the callback will be called with all modules that were disposed.
   * apply() is automatically called with autoApply as options parameter.
   * If autoApply is not set the callback will be called with all modules that will be disposed on apply().
   * @param autoApply
   */
  check(autoApply?: boolean): Promise<null|ModuleId[]>;
```

When `updatedModules` is `null`, we skip the `apply()` call as this was
producing `apply() is only allowed in ready status (state: idle)`
errors. This matches [the prior behavior when `autoApply` was
enabled](8241da7f1e/lib/hmr/HotModuleReplacement.runtime.js (L266-L272)).

Fixes #43143. Also reported on Stack Overflow: 
-
https://stackoverflow.com/questions/74415937/nextjs-typeerror-cannot-read-properties-of-null-reading-length
-
https://stackoverflow.com/questions/74504229/nextjs-v-13-typeerror-cannot-read-properties-of-null-reading-length

I tested this change locally and no longer see these HMR errors.

## Bug

- [X] Related issues linked using `fixes #number` - no related issues
- [X] Integration tests added - there aren't any existing tests, afaict
- [X] Errors have a helpful link attached, see `contributing.md` - N/A

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-11-21 16:50:03 -08:00
Jiachi Liu
3174c730b8
Alias next public api to esm on edge runtime (#42709)
Cases like `next/link` and `next/router` imports are not alias since
they're not matching the existing alias pattern setting for edge
runtime, which causes router-context being bundled twice (both with cjs
and esm) into edge worker bundle.
so we resolve their paths and alias them to esm bundle for webpack
bundling.

Other minor changes:

* update `require` calls to `import` expressions in edge ssr loaders
* remove client layer for apps without `appDir` enabled
* export `type` for ts typings in next/image to avoid alias to break
resolving

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-11-09 19:20:32 -08:00
Alex Kirszenberg
7bbc1aec9a
Aggregate updates using addStatusHandler and Promise.resolve instead of setTimeout (#42350)
The current `setTimeout` logic adds a constant overhead of 30ms when applying updates, which slows down HMR. As @sokra suggested, we can use the `addStatusHandler` API to have the HMR runtime let us know when its status changes. This also switches to `Promise.resolve` for update aggregation.
2022-11-07 21:06:18 +00:00
Tim Neutkens
7be2ef0fcf
Ignore serverComponentChanges in pages (#41464)
Slightly different version of #41020 where it does not end up being an unknown event.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-16 21:34:33 +00:00
Shu Ding
9baf651154
Improve error messages of server compilation (#41136)
We used to format RSC errors (which are from the SWC loader) before outputting them to the CLI. This PR moves that to a better place in `WellknownErrorPlugin`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-03 20:19:25 +00:00
Tim Neutkens
6fefa98b36
Remove reload on serverComponentChanges in pages (#41020)
This caused unexpected full page reloads when viewing pages in `pages`. E.g. when navigating to `app`. Since `app` is the only place you can have server components now this is no longer needed.


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-09-29 10:49:52 +00:00
Hannes Bornö
299f392d7b
Add support for fallback font and css variable for font/local (#40990)
Adds support for generating a fallback font by providing font override
metrics for the given local font. Also adds support for providing a CSS
variable name that then can be accessed through the `.variable` export,
it contains the hashed font family name.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-28 12:19:52 -07:00
Shu Ding
44afc37670
Refine error messages (#40661)
As per @sebmarkbage's suggestion, this PR refines the error message to
be more readable and friendly:

```
error - ./components/qux.js

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "client", so they're Server Components by default.

   ,----
 5 | import { useEffect } from 'react'
   :          ^^^^^^^^^
   `----

Maybe one of these should be marked as a "client" entry:

./components/qux.js
./components/baz.js
./components/bar.js
./app/dashboard/index/page.js
```

It's more ideal to put error codes inside the SWC transform and format
it in the Next.js logging layer. A future improvement is to tweak the
message a bit more for these specific cases:

- [ ] The error already happens inside an entry point (page or layout),
so itself should have "client" added (or removed), not it parents.
- [ ] When importing `"server-only"` inside a client component, we can
directly hint to the user which module in the import chain is marked
with `"client"`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-09-19 15:50:03 +02:00
Shu Ding
34df81e7c6
Attach module trace for RSC related errors (#40652)
When the error comes from the RSC transform in SWC, we want to enforce the verbose mode because the module trace can be critical here. An example:

<img width="635" alt="CleanShot 2022-09-18 at 12 37 02@2x" src="https://user-images.githubusercontent.com/3676859/190898135-7b258ae1-64e4-4c7b-b4d3-b2e9d2ee0245.png">

Also in this PR I changed `trace.originName` to `trace.moduleName` in the output as the former can contain loader information and options:

```
Import trace for requested module:
./app/dashboard/index/page.js
../../../../packages/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fdashboard%2Findex%2Fpage&appPaths=%2Fdashboard%2Findex%2Fpage&pagePath=private-next-app-dir%2Fdashboard%2Findex%2Fpage.js&appDir=%2FUsers%2Fshu%2FDocuments%2Fgit%2Fnext.js%2Ftest%2Fe2e%2Fapp-dir%2Fapp%2Fapp&pageExtensions=tsx&pageExtensions=server.tsx&pageExtensions=client.tsx&pageExtensions=ts&pageExtensions=server.ts&pageExtensions=client.ts&pageExtensions=jsx&pageExtensions=server.jsx&pageExtensions=client.jsx&pageExtensions=js&pageExtensions=server.js&pageExtensions=client.js!
```

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-09-18 11:48:09 +00:00
Tim Neutkens
4cd8b23032
Enable @typescript-eslint/no-use-before-define for functions (#39602)
Follow-up to the earlier enabling of classes/variables etc.

Bug

 Related issues linked using fixes #number
 Integration tests added
 Errors have helpful link attached, see contributing.md

Feature

 Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
 Related issues linked using fixes #number
 Integration tests added
 Documentation added
 Telemetry added. In case of a feature if it's used or not.
 Errors have helpful link attached, see contributing.md

Documentation / Examples

 Make sure the linting passes by running pnpm lint
 The examples guidelines are followed from our contributing doc

Co-authored-by: Steven <steven@ceriously.com>
2022-08-15 10:29:51 -04:00
Tim
d510758b52
fix: ensure hidden iframe apps render in development mode (#39514) 2022-08-11 16:22:19 -05:00
Damien Simonin Feugas
90bbac44db
fix(edge): error handling for edge route and middleware is inconsistent (#38401)
## What’s in there?

This PR brings more consistency in how errors and warnings are reported when running code in the Edge Runtime:

- Dynamic code evaluation (`eval()`, `new Function()`, `WebAssembly.instantiate()`, `WebAssembly.compile()`…)
- Usage of Node.js global APIs (`BroadcastChannel`, `Buffer`, `TextDecoderStream`, `setImmediate()`...)
- Usage of Node.js modules (`fs`, `path`, `child_process`…)

The new error messages should mention *Edge Runtime* instead of *Middleware*, so they are valid in both cases.

It also fixes a bug where the process polyfill would issue a warning for  `process.cwd` (which is `undefined` but legit). Now, one has to invoke the function `process.cwd()` to trigger the error.

It finally fixes the react-dev-overlay, where links from middleware and Edge API route files could not be opened because of the `(middleware)/` prefix in their name.

About the later, please note that we can’t easily remove the prefix or change it for Edge API routes. It comes from the Webpack layer, which is the same for both. We may consider renaming it to *edge* instead in the future.

## How to test?

These changes are almost fully covered with tests:

```bash
pnpm testheadless --testPathPattern runtime-dynamic
pnpm testheadless --testPathPattern runtime-with-node
pnpm testheadless --testPathPattern runtime-module
pnpm testheadless --testPathPattern middleware-dev-errors
```

To try them out manually, you can write a middleware and Edge route files like these:

```jsx
// middleware.js
import { NextResponse } from 'next/server'
import { basename } from 'path'

export default async function middleware() {
  eval('2+2')
  setImmediate(() => {})
  basename()
  return NextResponse.next()
}

export const config = { matcher: '/' }
```

```jsx
// pages/api/route.js
import { basename } from 'path'

export default async function handle() {
  eval('2+2')
  setImmediate(() => {})
  basename()
  return Response.json({ ok: true })
}

export const config = { runtime: 'experimental-edge' }
```

The expected behaviours are:

- [x] dev, middleware/edge route is using a node.js module: error at runtime (logs + read-dev-overlay):

```bash
error - (middleware)/pages/api/route.js (1:0) @ Object.handle [as handler]
error - The edge runtime does not support Node.js 'path' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
> 1 | import { basename } from "path";
  2 | export default async function handle() {
```

- [x] build, middleware/edge route is using a node.js module: warning but succeeds

```bash
warn  - Compiled with warnings

./middleware.js
A Node.js module is loaded ('path' at line 4) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

./pages/api/route.js
A Node.js module is loaded ('path' at line 1) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
```

- [x] production, middleware/edge route is using a node.js module: error at runtime (logs + 500 error)

```bash
Error: The edge runtime does not support Node.js 'path' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
    at <unknown> (file:///Users/damien/dev/next.js/packages/next/server/web/sandbox/context.ts:149)
```

- [x] dev, middleware/edge route is using a node.js global API: error at runtime (logs + read-dev-overlay):

```bash
error - (middleware)/pages/api/route.js (4:2) @ Object.handle [as handler]
error - A Node.js API is used (setImmediate) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime
  2 |
  3 | export default async function handle() {
> 4 |   setImmediate(() => {})
    |  ^
```

- [x] build, middleware/edge route is using a node.js global API: warning but succeeds

```bash
warn  - Compiled with warnings

./middleware.js
A Node.js API is used (setImmediate at line: 6) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

./pages/api/route.js
A Node.js API is used (setImmediate at line: 3) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime
```

- [x] production, middleware/edge route is using a node.js module: error at runtime (logs + 500 error)

```bash
Error: A Node.js API is used (setImmediate) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime
    at <unknown> (file:///Users/damien/dev/next.js/packages/next/server/web/sandbox/context.ts:330)
```

- [x] dev, middleware/edge route is loading dynamic code: warning at runtime (logs + read-dev-overlay) and request succeeds (we allow dynamic code in dev only):

```bash
warn  - (middleware)/middleware.js (7:2) @ Object.middleware [as handler]
warn  - Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Edge Runtime
   5 |
   6 | export default async function middleware() {
>  7 |   eval('2+2')
```

- [x] build, middleware/edge route is loading dynamic code: build fails with error:

```bash
Failed to compile.

./middleware.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Used by default

./pages/api/route.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Used by default
```

## Notes to reviewers

Edge-related errors are either issued from `next/server/web/sandbox/context.ts` file (runtime errors) or from `next/build/webpack/plugins/middleware-plugin.ts` (webpack compilation).

The previous implementation (I’m pleading guilty here) was way too verbose: some errors (Node.js global APIs like using `process.cwd()`) could be reported several times, and the previous mechanism to dedupe them (in middleware-plugin) wasn’t really effective.

Changes in tests are due to renaming existing tests such as `test/integration/middleware-with-node.js-apis` into `test/integration/edge-runtime-with-node.js-apis`. I extended them to cover Edge API route.

@hanneslund I’ve pushed the improvement you did in https://github.com/vercel/next.js/pull/38289/ one step further to avoid duplication.
2022-07-21 14:53:23 +00:00
Tim Neutkens
cd5709825c
Handle development error when Server Component throws (#38550)
Handles the case where an error is introduced which causes a Fast Refresh and then it's fixed.


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-07-12 12:44:53 +00:00
Hannes Bornö
2ff660c25a
Remove full reload overlay and warn in CLI instead (#37874)
- Always perform a full reload when needed without blocking with the overlay.
- Old client warnings re-added.
- Post client warning to dev server and print it in the CLI. 


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-22 15:41:23 +00:00
Hannes Bornö
2313ee093a
Display full refresh warning even when error has occurred (#37425)
If you end up in a state where an error happened and you also should be warned about a full refresh  - you get stuck. The full refresh is blocked by the warning but the error is shown instead.

Tests didn't catch this because the refresh warning never showed in `__NEXT_TEST_MODE`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
2022-06-19 00:00:14 +00:00
JJ Kasper
1d1ffc88b7
Update to leverage turbo for build/prepublish (#37280)
* Update to leverage turbo for build/prepublish

* update path

* remove extra turbo config
2022-05-30 19:05:27 -05:00
Baruch-Adi Hen
e2fde26b59
Fix: Cleaner error message when importing sass without it being installed in dev (#35051)
This PR removes the not-very-helpful stack trace when sass is being used but the npm package is not installed. Fixes #13975

- Fix behavior to show the modified error message if either node-sass OR sass is missing
- dispose of stack trace if the condition above passes
- update the error link to [err.sh](https://err.sh/next.js/install-sass) equivalent 
- update the relevant test to verify the stack trace is omitted and to account for the new link


## Bug

- [x] Related issues linked using `fixes #13975`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-05-22 06:56:18 +00:00
Justin Goping
0dd62111f6
Fix various Trusted Types violations without use of policy (#34726)
Linked to issue #32209.

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation
There are three Trusted Types violations that are fixed in this PR:
### 1. ban-element-innerhtml-assignments: maintain--tab-focus.ts
The innerHTML assignment here is unsafe as a string is being used that could contain an XSS attack. The solution chosen was to replace the string containing HTML with programmatically-created DOM elements. This removes the Trusted Types violation as there is no longer a string passed in that can contain an XSS attack.

Notes on solution:
-  The `<svg>` tag is omitted completely since the original snippet returns fragment.firstChild.firstChild. The first firstChild omits the `<div>`, and the second firstChild omits the `<svg>`, so to remove unnecessary code the created elements start at the foreignObject level.
-  The reason createElementNS is used instead of createElement is because the ‘foreignObject’ element is a separate namespace from the default HTML elements. The documentation for this command is found [here](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS).

The code was tested to be equivalent by rendering both the original code and the re-written code in a browser to see if they evaluate to the same thing in the DOM. The DOM elements styles were then compared to ensure that they were identical.

### 2. ban-window-stringfunctiondef: packages/next/lib/recursive-delete.ts
The setTimeout function caused a Trusted Types violation because if a string is passed in as the callback, XSS can occur. The solution to this problem is to ensure that only function callbacks can be passed to setTimeout. There is only one call to the sleep function and it does not involve a string callback, so this can be enforced without breaking the application logic. In the process of doing this, promisify has been removed and the promise has been created explicitly.

The code was tested in a sample application to ensure it behaved as expected.

### 3. ban-window-stringfunctiondef: packages/next/client/dev/fouc.ts
This file also uses setTimeout, so the call was wrapped in a `safeSetTimeout` call that specifies that the callback argument is not a string.
2022-05-05 00:11:36 +00:00
Naoyuki Kanezawa
9e53af8e30
Fix next node buildin module error message for edge runtime (#36434)
- improve the message for importing node builtin module on edge runtime
- fix to show the message on overlay of error browser with `next dev`
- fix https://github.com/vercel/next.js/issues/36237

The message is NOT shown when using edge runtime (not middleware) since I cannot find a way to detect a webpack compilation is for edge runtime.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-05-02 15:21:40 +00:00
Naoyuki Kanezawa
b264064ad5
Fix to remove webpack message per error (#36452)
Remove the webpack breaking change message per error since it can be contained in all errors and the current implementation causes to truncate other error messages

Follow up for https://github.com/vercel/next.js/pull/36190

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
2022-04-25 18:28:29 +00:00
JJ Kasper
b5d9ce5559
Add client HMR tracing for debugging (#36328)
This adds client HMR event tracing to help debug the client state for reproductions easier
2022-04-21 08:30:23 +00:00
JJ Kasper
63230ebce2
Fix build activity indicator position (#36208)
* Fix build activity indicator position

`devIndicators.buildActivityPosition` introduced in
https://github.com/vercel/next.js/pull/30109 needed more tweaks to properly
position the build indicator container. The build indicator was being rendered
off screen when set to a non-default position.

* Refactor stuff for smaller diff

* add config validation

* Apply suggestions from code review

Co-authored-by: Martin Šťovíček <martin.stovicek@monitora.cz>
2022-04-15 23:53:00 -05:00
CommanderRoot
db2567b01b
chore: replace deprecated String.prototype.substr() (#35421)
.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated
Signed-off-by: Tobias Speicher <rootcommander@gmail.com>

Co-authored-by: Steven <steven@ceriously.com>
2022-03-24 17:49:38 -04:00
Balázs Orbán
9639fe704c
Ensure we don't poll page in development when notFound: true is returned (#34352)
Fixes: #34342

Visiting the following page will call gSSP indefinitely in a loop and logs errors from `on-demand-entries-client`:
```js
const Home = () => null
export default Home
        
export function getServerSideProps() {
  console.log("gssp called")
  return { notFound: true }
}
```

We should not keep fetching the page if it returns 404 as  it can introduce unnecessary data requests.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`



Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-02-16 18:53:48 +00:00
Tobias Koppers
c20e8297bf
Allow dismissing full refresh warning for session (#33868)
x-ref: #31827
x-ref: #34212

![image](https://user-images.githubusercontent.com/1365881/151994766-b9afb349-1a9a-4220-9387-de10165e34e3.png)




## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-02-14 23:23:45 +00:00
Gerald Monaco
0fa95da53f
Encapsulate routing and initial hydration (#33875)
* Encapsulate initial rendering

* Run dev code before rendering

* Fix call

* Try reverting last change, fixing call
2022-02-02 09:08:16 -06:00
Tobias Koppers
30ca6b38ca
improve full refresh overlay (#33301)
include a few lines of stack trace in the full refresh overlay
error is not necessary webpack related



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-01-14 12:32:01 +00:00
JJ Kasper
3667eba385
Pre-compile more dependencies continued (#32679) 2021-12-21 16:13:45 +01:00
Antoine Apollis
83b04c8983
Feat/14701 full reload notification (#28866)
## Feature

- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issue: #14701
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`

<details>

<summary>Screenshot</summary>

<img width="1388" alt="Screen Shot 2021-12-17 at 2 07 04 PM" src="https://user-images.githubusercontent.com/22380829/146602057-9675455d-cf10-435a-b121-bc462a87fbf3.png">


</details>

Closes: https://github.com/vercel/next.js/issues/14701


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2021-12-17 21:24:13 +00:00
Tim Neutkens
ff816d4bb0
Remove noop import (#31722) 2021-11-24 15:40:58 +01:00
JJ Kasper
9d699cb11a
Fix dev router usage before router initializing (#31632) 2021-11-21 15:42:19 +01:00
JJ Kasper
1d9007307f
Fix accessing router before ready for HMR ping (#31588)
* Fix accessing router before ready for HMR ping

* update test name

* lint-fix
2021-11-18 16:23:21 -06:00
Genet Schneider
e3135ccde6
Support assetPrefix specific protocol (#31213)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2021-11-09 15:26:55 -06:00
Genet Schneider
30dd3cc2a2
Account for assetPrefix when initializing HMR connection (#30632) 2021-11-04 10:34:37 +01:00
Nicolas
19a6158631
Add config support for build activity indicator position (#30109)
When you edit your code, and Next.js is compiling the application, a compilation indicator appears in the bottom right corner of the page.

In some cases this indicator can be misplaced on the page, for example, when conflicting with a chat launcher. To change its position, open `next.config.js` and set the `buildActivityPosition` in the `devIndicators` object to `bottom-right` (default), `bottom-left`, `top-right` or `top-left`.

I also added the documentation for both `devIndicators.buildActivity` & the new `devIndicators.buildActivityPosition`.

## Feature

- [x] Implements a new feature
- [x] Documentation added
2021-11-03 21:17:36 +00:00
Tobias Koppers
520c5a4083
fix missed hmr events (#30309)
When an compilation happens in the timespan between "page loaded client bundle" and "web socket got initial sync event" it didn't apply the hmr update.
2021-10-26 20:06:29 +02:00
Shu Ding
5ddee4494b
Add new target for middleware (#30299)
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: Tim Neutkens <timneutkens@me.com>
2021-10-26 18:50:56 +02:00
Tobias Koppers
3bb098f882
hide next-middleware-loader in import trace (#30243) 2021-10-24 23:04:46 +02:00
Tobias Koppers
8a4d1f75f2
test and fix error reporting for stack overflows and other fatal errors (#30169)
## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2021-10-22 10:30:50 +00:00
Tobias Koppers
8bce51d8a9
avoid showing empty Import trace for requested module (#30130)
## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2021-10-21 10:07:02 +00:00
Tobias Koppers
b2a9918165
improve production error message printing (#30065)
* improve production error message printing

* update test cases

* add test case

* improve printing of build errors

* improve types

* fix test cases
2021-10-20 18:23:44 -05:00
JJ Kasper
75748caf7f
Migrate server-sent events HMR connection to WebSocket (#29903)
This replaces the server-sent events HMR connection with a WebSocket connection to prevent hitting browser connection limits, allow sending events back from the browser, and overall better performance. 

This approach sets up the the `upgrade` event listener on the server immediately when created via `next dev` and on the first request using `req.socket.server` when created via a custom server. In a follow-up PR we can push the files changed via the WebSocket as well. 

x-ref: https://github.com/vercel/next.js/issues/10061
x-ref: https://github.com/vercel/next.js/issues/8064
x-ref: https://github.com/vercel/next.js/issues/4495

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
2021-10-15 07:09:54 +00:00
Tobias Koppers
1d2d41a502
hide build error when returning to old build (#29813)
In some cases, e. g. when introducing a build error and then returning to the successful build again, the build error modal stays open. That shouldn't happen
2021-10-11 15:31:22 +00:00
Tobias Koppers
0e29a2d08f
reload the page to show 404 when receiving invalid event from on-demand-entries (#29074) 2021-09-14 17:11:00 +02:00
JJ Kasper
f1dbc9260d
Ensure dev server side errors are correct (#28520) 2021-08-27 14:29:30 +02:00
dave
1b2e0799c3
fix development mode bug with pages with "+" and other special characters (#28122)
* add encodeURIComponent so certain characters don't bug out (fixes #22099)

* add integration test for pr #28122
2021-08-17 12:13:33 -05:00
JJ Kasper
5544adc481
Update to latest babel versions (#28174) 2021-08-17 09:18:08 +02:00