Replay of bug: https://app.replay.io/recording/should-display-toggleable-stack-for-traces--a7935dc5-c1f8-4a90-ba21-1cfa39d34e26

react-resizable-panels

Register/unregister panel should use id for comparison

Testing out the unstable export unstable_autotrackMemoize and keep encountering this error message

> proxy can't report existing configurable property '0' as non-configurable

Using an imported createSelectorCreator() Instance
`export const createAutoTrackSelector = createSelectorCreator(autoTrackMemoize);`

It seems to be working fine until it hits the last section of checks in the selector


Replay of the error.
https://app.replay.io/recording/open-energy-dashboard--6f007eb1-1ca2-48da-8dd9-fe05630fc0e7

reselect

unstable_autotrackMemoize Errors

We do a search if app.replay.io/recording exists in the issue, but only capture if it is included in the description. We could also pull in comments to capture replays posted there so all rows have a link.

replayable

Capture replay links from comments

Here is a Replay recording with comments:
https://app.replay.io/recording/318114a4-3102-4732-ad1b-cb63b9c0ac22

I think the comments I've added show the following scenario:
1. A React component (`Subscriber`) uses `useSyncExternalStore` to read from a mutable store.
2. The Activity subtree containing `Subscriber` is hidden, and React unsubscribes from the store.
3. An update is scheduled to show the hidden subtree again and the `Subscriber` component re-renders (with memoized state).
4. A parent component mutates the store in a layout effect. (The `Subscriber` component is not yet listening and so it does not re-render to reflect the updated store value.)
6. React re-subscribes the `Subscriber` component (`useSyncExternalStore`) but it has already missed the mutation **and React does not check for a changed snapshot value**.

We originally observed this behavior in Replay itself but I was able to reduce it to the following simplified case:
https://codesandbox.io/s/inspiring-bird-m4wv5l

I've added comments to the Replay, including ones that bracket the problematic `commitRoot`. Here's a short Loom as well talking through the bug:
https://www.loom.com/share/2584cad5b4c44e6bba396ff8cf79db1d

I _think_ an application could work around this issue in a couple of ways:
* Only mutate stores in passive effects. (This may cause visible layout shift though so it seems bad.)
* Mutable store users should avoid memoized `getSnapshot` and `subscribe` functions. (This would schedule some unnecessary effects work which is probably nice to avoid but maybe acceptable.)
* **Store subscribe methods should always invoke the `callback` React passes.** (This would cause a lot of unnecessary `Object.is` comparisons but that's probably an acceptable cost.)

I think the third option above seems best, but needing to do that feels like a foot gun for the API. Thoughts?

cc @acdlite, @sebmarkbage in case you find this interesting.

Status: Unconfirmed

react

Bug: useSyncExternalStore does not schedule update after mutation

For context, I tried updating from 0.0.53 to 0.0.61 and noticed potential regressions.

Using [0.0.53](https://codesandbox.io/s/react-resizable-panels-0-0-53-lfckk2?file=/src/App.tsx), I have a panel that's collapsed by default (`defaultSize={0}` + `collapsed`), and using `ImperativePanelHandle` I'm able to expand/collapse it, and it'll remember the last committed values. Note that I'm also using `resize(40)` if it's the first expansion.

https://github.com/bvaughn/react-resizable-panels/assets/2852660/2a1bfe4c-b492-4bb5-bdbf-fdd256f332a9

Following https://github.com/bvaughn/react-resizable-panels/blob/main/packages/react-resizable-panels/CHANGELOG.md#example-migrating-panels-with-percentage-units, I updated `defaultSize` to `defaultSizePercentage`, `getCollapsed` to `isCollapsed`, and `onCollapse` to `onExpand`, however using [0.0.61](https://codesandbox.io/s/react-resizable-panels-0-0-61-ykq66d?file=/src/App.tsx), it seems like it forgets its previous size before it was collapsed?

https://github.com/bvaughn/react-resizable-panels/assets/2852660/deed8e30-67c7-4a80-a140-b91b3c810d53

I then did a bit of looking through the code, and I believe in 0.0.53 `minSize` was defaulted to 10, but the default has since been removed. So I added `minSizePercentage={10}`, but it still doesn't behave like it used to - that is, it expands to `minSizePercentage` instead of the last size (40%)

https://github.com/bvaughn/react-resizable-panels/assets/2852660/3c2ad8cc-f4f9-4732-94bd-e6f9f75ca5c1



Potential regressions with collapsed panels

**Describe the bug**

I tried to fully remove a link from a paragraph. I even removed a few more characters. But as soon as I started typing again, the letters are hyperlinked again.

**Expected behavior**

After fully removing the link it should not come back.

**Screenshots**

Here's a video

https://cloudup.com/cg8dDEl8VQc

**Desktop (please complete the following information):**
 - OS: macOS
 - Browser: Chrome
 - Version: 75

**Smartphone (please complete the following information):**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - Browser [e.g. stock browser, safari]
 - Version [e.g. 22]

**Additional context**
- WordPress 5.2.2, not Gutenberg plugin installed.


[Type] Bug

[Feature] Rich Text

[Package] Format library

gutenberg

Text continues to be hyperlinked after removing a link

We made a Replay of this behavior 😛: https://app.replay.io/recording/dc020aef-64e2-4a4b-9a0d-1475ea12aebf you can click through to see a video.

I made an attempt to figure it out, and you can see my thought process in the replay. Afaict it's happening in the call to `sort` in `mergeObjectUpdates`, but I can't tell why.

https://github.com/tilt-dev/tilt/blob/master/web/src/HUD.tsx#L388

tilt

Resources reordering rapidly in sidebar

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: linux
  Arch: x64
  Version: #85~20.04.1-Ubuntu SMP Mon Jul 17 09:42:39 UTC 2023
Binaries:
  Node: 18.16.0
  npm: 9.5.1
  Yarn: 1.22.18
  pnpm: 8.6.7
Relevant Packages:
  next: 13.4.12
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/replayio/nextjs-inaccurate-sourcemaps

### To Reproduce

- `npm run build`
- upload `.next/static/chunks/main-26f0defd1fe4aedb.js[.map]` to https://evanw.github.io/source-map-visualization/
- select `webpack://_N_E/node_modules/@swc/helpers/esm/_interop_require_wildcard.js` as the original source
- for comparison, upload `.next/static/chunks/pages/_app-27374a655d3a2ebe.js[.map]` to https://evanw.github.io/source-map-visualization/ and select `webpack://_N_E/src/_interop_require_wildcard.js`

Alternatively, you can look at these sourcemaps here:
- `webpack://_N_E/node_modules/@swc/helpers/esm/_interop_require_wildcard.js`: https://app.replay.io/recording/5072126e-507f-43d9-8c9e-889ad2bfd0dd/sourcemap/o4-80-c194bb-ec5646
- `webpack://_N_E/src/_interop_require_wildcard.js`: https://app.replay.io/recording/5072126e-507f-43d9-8c9e-889ad2bfd0dd/sourcemap/o6-6-c194bb-5d30d7


### Describe the Bug

I've noticed that the sourcemaps produced by Next.js are inaccurate for some sources, making it impossible for debuggers to show scopes with original (rather than generated) variable names.
This seems to be the case for all sources under `node_modules`.
To reproduce the problem I've used create-next-app to create an app and copied `node_modules/@swc/helpers/esm/_interop_require_wildcard.js` to `src/_interop_require_wildcard.js`. This is what [a sourcemap visualizer](https://evanw.github.io/source-map-visualization/) shows for these two copies of the same source:

`node_modules/@swc/helpers/esm/_interop_require_wildcard.js`:

![Screenshot_2023-07-27_13-49-26](https://github.com/vercel/next.js/assets/16060807/ad4a9cdb-e2cf-40ef-a9de-bbd5891ea6d0)

`src/_interop_require_wildcard.js`:

![Screenshot_2023-07-27_13-50-09](https://github.com/vercel/next.js/assets/16060807/a8c36cb7-4711-4846-a0dc-fc9d2de54b40)


### Expected Behavior

Sourcemaps for sources under `node_modules` should be accurate. 

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

template: bug

next.js

Inaccurate sourcemaps for sources under node_modules

This does not seem to cause any problems while recording, but we crash when attempting to replay it. Personally, I think it would be reasonable to just disable the print dialog from Replay because that doesn't feel like a feature that people will run into much (if anything they are likely to accidentally bring up the dialog like me and accidentally mess up their recording), but we could also fix it  for full marks 😄 

Recording: https://app.replay.io/recording/please-consider-the-environment-before-printing-this-replay--aacb2af2-2107-492d-82ab-69dd4ca2d4c7?point=60684969543474293057435418937531463&time=60857&hasFrames=false (crash happens between 30 and 40 seconds I think)

limitation

linear

gecko-dev

Opening the Print Dialog cannot be replayed

Lexical version: Latest

## Steps To Reproduce

1. Open [Lexical playground](https://playground.lexical.dev/)
2. Replace text with "foo.bar"
3. Set cursor to beginning of text
4. Type OPTION + right arrow

Here is a Replay of the bug: https://app.replay.io/recording/2d509a52-e59b-40bd-83a9-ba17e89c90b8

## The current behavior
In Firefox, the cursor is now after the dot

## The expected behavior
Cursor should move before dot

all-platforms-bug

core

lexical

Bug: Option + Right arrow cursor bug (Firefox)

Thread:

- https://twitter.com/k_woodhouse93/status/1585713986569637888
- https://twitter.com/k_woodhouse93/status/1585921284902252545
- Repro: https://twitter.com/k_woodhouse93/status/1586308416871489537
  - https://github.com/kwoodhouse93/ink-redux-repro
  - Replay (possibly crashing): https://app.replay.io/recording/replay-of-distclijs--797ca851-8c51-44c5-ba2f-ece05da30960

react-redux

Possible issue with either RTKQ or React-Redux with Ink

Hey hey, just wanted to let you know this counter doesn't increment.

broken-counter

Counter doesn't increment

### Version

v14.17.6

### Platform

Darwin Nates-MacBook-Air.local 21.4.0 Darwin Kernel Version 21.4.0: Mon Feb 21 20:36:53 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T8101 x86_64

### Subsystem

_No response_

### What steps will reproduce the bug?

As a possible workaround for https://github.com/RecordReplay/node/issues/28 I used process.exit to exit my script as a desirable point. The command I used to run the recording is `replay-node --exec ts-node ./src/index.ts `. 

### How often does it reproduce? Is there a required condition?

Seemingly every time 

### What is the expected behavior?

Replay should pause at the specified breakpoint

### What do you see instead?

Replay seems to be pausing at an unrelated breakpoint

### Additional information

The replay I'm experiencing this bug on is https://app.replay.io/recording/replay-of-ts-node--2833115f-26fd-4160-8b1d-ec19f86d8d16

Replay of the bug occurring is at https://app.replay.io/recording/replay-misidentifying-where-to-pause-for-breakpoint--3668d82a-b2e6-49cd-a1cb-0ba103cdcd85 

Reported on Discord at https://discord.com/channels/779097926135054346/798693728999047203/980889833998282792

Screen recording uploaded to Discord at https://discord.com/channels/779097926135054346/798693728999047203/980890518898753566 

node

Replay not pausing at correct position in call stack for breakpoint

I tried to buy a hoverboard but it failed with an error :(

overboard

I can’t buy a board :(

![image](https://user-images.githubusercontent.com/87003751/222906320-80bb96fe-626f-471f-b21e-3092b798e6f8.png)


Protocol-Examples

react mount detection demo error

Hi there,

With small size images, I get an issue like below:

![image](https://user-images.githubusercontent.com/94069932/150785560-7ba16f05-367d-4db8-bcf5-4fe4066034f2.png)

Can anybody help me?
Thanks in advance.

masonry

Issue with small size images

Probably a bug in visibility detection. 

Steps to repro:

1. https://excalidraw.com/#json=5236195592241152,nBFUdjjvd2rZyqpNHBMKUg
2. zoom on the ~center of the rectangle to 1000%

excalidraw

zooming on a shape stops rendering it

### Description

When using Stately Studio on Windows 11 (22H2) with either Chrome (107.0.5304.63) or Firefox (106.0.1), zoom in and zoom out actions (by pressing Ctrl + Mouse Wheel Up or Down) are zooming in or zooming out way too much.

### Expected result

When pressing Ctrl button and scrolling mouse wheel button, on every tick the zoom should change by a reasonable distance, that's roughly equal between ticks.

### Actual result

When zooming in, zoom percentage seems to double on every tick. When zooming out, zoom percentage always goes to 10%.

### Which browsers are you seeing the problem on?

Firefox, Chrome

### Additional details

Here's a link to a Replay recording: https://app.replay.io/recording/search-box-or-search-box-or-stately-studio--c6f61ac4-f6b7-4d67-80fe-f52635cb8a5d

studio-issues

Bug: unexpected zoom behavior on Windows 11

I'm debugging this recording:
https://app.replay.io/recording/21594023-f9ae-4787-912c-c391a68304aa

and I've noticed that sometimes I'm not able to step into certain functions. Take a look at this loom:
https://www.loom.com/share/9628264e684a4d0eb66e5176296972e5

Notice how I've wanted to step into `reportImplicitAny` but I was taken out of this frame, to the point after the call to the `reportImplicitAny`'s caller.

One additional thing I've noticed here is that 0 hits are reported on the line containing that `reportImplicitAny`
<img width="953" alt="Screenshot 2021-09-21 at 13 24 01" src="https://user-images.githubusercontent.com/9800850/134162769-40a1f617-a18e-4586-a954-1229a043f322.png">

This is clearly incorrect as I was paused at this line of code.

0 hits reported incorrectly

**Description**
Want to create Code Highlighting block with changing code language on every block. But got an error: 
`Error: Cannot resolve a Slate point from DOM point: [object Text],1`

**Recording**


https://user-images.githubusercontent.com/49220993/175454278-56800975-01bc-4d7d-89d3-31a51a8ef84b.mov



**Sandbox**
https://codesandbox.io/s/slate-reproductions-forked-rzgecw

**Steps**
To reproduce the behavior:
1. Click on custom block
2. Type something
3. See error (And also can't delete typed text)

**Expectation**
Edit text inside block without errors

**Environment**
- Slate Version: 0.80
- Operating System: Mac OS 12.1
- Browser: Safari 15.2

**Context**
Created custom block with code highlighting feature. 
Main difference with Slate Code Highlighting Example (https://github.com/ianstormtaylor/slate/blob/main/site/examples/code-highlighting.tsx) that I want to blocks with different languages in each custom block.


slate

Error: Cannot resolve a Slate point from DOM point: [object Text],1

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.2.0
      npm: 9.6.4
      Yarn: 1.22.19
      pnpm: 8.7.0
    Relevant Packages:
      next: 13.4.20-canary.12
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Internationalization (i18n), Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue or a replay of the bug

https://app.replay.io/recording/reproduction--e17b7c87-6019-40b2-b719-1e9b9ce80b13

### To Reproduce

- Create new next app
- Add robots.txt in public folder
- Setup basic i18n (see example below)
- Make sure you are on different domains (as example)
- Go to default domain `/robots.txt`
- See the robots.txt output
- Go to different domain `/robots.txt`
- See 404


```js
  i18n: {
    defaultLocale: "en",
    locales: ["en", "nl-NL"],
    domains: [
      {
        domain: "com.rob.ticketswap.pizza",
        defaultLocale: "en",
        http: false,
      },
      {
        domain: "nl.rob.ticketswap.pizza",
        defaultLocale: "nl-NL",
        http: false,
      },
    ],
    localeDetection: false,
  },
```

### Describe the Bug

This bug presented itself specifically in Next v13.

Public files are no longer accessible on all domains that are not the default domain (default locale domain).

### Expected Behavior

All files in public folder should be accessible on every domain that is setup in the i18n config.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

area: Routing

Public files not accessible on i18n domains

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:01:02 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8112
    Binaries:
      Node: 20.4.0
      npm: 9.7.2
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

### Link to the code that reproduces this issue or a replay of the bug

https://app.replay.io/recording/create-next-app--71effefe-43de-463e-b54e-4c2e3d2fa540

### To Reproduce

Create a dynamic route which uses a server action to mutate data. Create a parallel, intercepting route which displays the same page in a modal and has the same ability to mutate data. When using a server action that revalidates path on the actual route, when the route is revalidated you will be redirected to intercepting route.   

### Describe the Bug

I have a route '/post/[id]' which also uses and intercepting parallel route to display the same page in a modal above the home page. On this page there is a like button which uses server actions to mutate the database which then calls revalidate route after the mutation is completed. On the intercepted route, this works without issue, however if I click the like button on the full route (not intercepted) when revalidatePath is called, the page redirects and the intercepting route modal is rendered over the full route (see recording). I am also using 'useOptimistic) but this bug occurs with or without the use of that hook. 

### Expected Behavior

revalidatePath does not redirect and show the intercepting route on top of the full route page. 

### Which browser are you using? (if relevant)

Chrome Version 115.0.5790.170 (Official Build) (arm64)

### How are you deploying your application? (if relevant)

Vercel

revalidatePath redirects to intercepting route

### What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

- React: 0.0.0-experimental-e7d0053e6-20220325
- ReactDOM: 0.0.0-experimental-e7d0053e6-20220325
- Redux: 4.2.0
- React Redux: 8.0.2

Here is a Replay recording of this bug with some annotations from me:
http://app.replay.io/recording/replay-failing-reactdevtools-e2e-repro--3351989d-95d4-4035-80af-07d813a623aa

Here is a Loom (it's long) where I use Replay to investigate the problem:
https://www.loom.com/share/3d60c14466184b03acc9af7b80e9eff8

Also note that this issue is specific to an experimental React API, `Offscreen`. The React team has [published some early documentation](https://github.com/reactwg/react-18/discussions/19) about this API but it has not been released in a stable form yet.

### What is the current behavior?

A _connected_ component misses updates that are fired while it is inside of a hidden `Offscreen` component.

I believe this is because the component unsubscribes when it is _unmounting_ and does not check for missed updates when it is later remounted. (The selectors passed tot he map-state-to-props function were not executed.)

### What is the expected behavior?

The _expected_ behavior is perhaps up for debate. Should the component process Store updates (at a lower priority) while hidden or should it wait to render them only if it's later re-shown? In a sense, this question isn't worth debating _yet_ because I don't think React currently provides an API (even an experimental one) to _stay subscribed_ while in a hidden state.

That being said, I think the currently expected behavior is that when then `Offscreen` tree is later _re-shown_, React Redux `connect` should check the Store for the latest values and re-render if they have changed since the component was last rendered.

### Which browser and OS are affected by this issue?

Presumably all of them

### Did this work in previous versions of React Redux?

- [ ] Yes

Connect HOC misses store changes when "offscreen"

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
codesandbox on next@13.4.1-canary.2
```

### Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/hopeful-taussig-uvq5g1

### To Reproduce

Click around to different pages, which are all handled by the same /app/[path]/page.tsx route.

### Describe the Bug

Note that scroll position is preserved when navigating.

### Expected Behavior

You wouldn't expect it to be.


<sub>[NEXT-1130](https://linear.app/vercel/issue/NEXT-1130/app-router-scroll-position-not-reset-when-dynamic-segment-changes)</sub>

linear: next

[NEXT-1130] app router: Scroll position not reset when dynamic segment changes

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.0.0: Tue Jun 13 21:16:44 PDT 2023; root:xnu-10002.0.116.505.3~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: 8.6.2
    Relevant packages:
      next: 13.4.7
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

### Link to the code that reproduces this issue or a replay of the bug

https://app.replay.io/recording/cannot-start-serverjs-at-localhost--df722455-73b5-4762-9a1a-aa18008a907c

### To Reproduce

I have custom server to run https at local host as bellow, it's works well with pervious next version. But it's occurs on v13.4.7
```javascript
const { createServer } = require('https')
const { parse } = require('url')
const next = require('next')
const fs = require('fs')
const port = 3001
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const httpsOptions = {
  key: fs.readFileSync(process.cwd() + '/config/localhost-key.pem'),
  cert: fs.readFileSync(process.cwd() + '/config/localhost.pem')
}

app.prepare().then(() => {
  createServer(httpsOptions, async (req, res) => {
    const parsedUrl = parse(req.url, true)
    await handle(req, res, parsedUrl)
  }).listen(port, (err) => {
    if (err) throw err
    console.log('ready - started server on url: https://localhost:' + port)
  })
})

``` 

### Describe the Bug

```javascript
yarn run v1.22.19
$ cross-env APP_ENV=development node server.js
ready - started server on url: https://localhost:3001
- event compiled client and server successfully in 88 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 74 ms (20 modules)
Error: connect ECONNREFUSED ::1:53504
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 53504
}
Error: connect ECONNREFUSED ::1:53504
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 53504
}

``` 

### Expected Behavior

Expect it will run without Error: 
```javascript
Error: connect ECONNREFUSED ::1:53504
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 53504
}

``` 

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

<sub>[NEXT-1336](https://linear.app/vercel/issue/NEXT-1336/cannot-run-with-custom-https-at-localhost)</sub>

kind: bug

area: standalone mode

area: Edge

[NEXT-1336] Cannot run with custom https at localhost

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
I am running this on vercel.
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

### Link to the code that reproduces this issue or a replay of the bug

https://app.replay.io/recording/lusio-or-discover-new-games-or-track-your-gaming-portfolio-or-connect-with-other-gamers--4eed141a-022b-414e-82b5-77086de448b0

### To Reproduce

In the replay video below, please open the network terminal and look for 'signout' request.
Here, I have navigated through two environments, 
1. First one does not contain any reverse proxy from vercel and is directly hitting our API server.
2. Second one is being routed through a reverse proxy of vercel which I have configured in next.config.js.
Both these environments are actually deployed to vercel right now.

In the first `signout` request, please find that the headers 'st-access-token' and 'st-refresh-token' in the response are received by the browser as empty headers or with a value of ' '.

In the second instance where the 'signout' request goes through next's rewrite method's reverse proxy, these headers are not being received on the browser. 

### Describe the Bug

Bug here is that empty headers in response are being removed by the reverse proxy enabled through 'rewrite' method in next config. This is unexpected behaviour.

### Expected Behavior

The empty headers should be sent to browser as-is and should not be removed.

### Which browser are you using? (if relevant)

Version 113.0.5672.63 (Official Build) (arm64)

### How are you deploying your application? (if relevant)

Vercel

Empty headers in response of request proxied through `rewrites` get automatically removed. 

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.4.0
      npm: 9.2.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps), Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue

https://github.com/mitjapotocin/NextJS-LinkTest

### To Reproduce

The example app in the GH repo has branches with different next versions used.
To reproduce the bug use branch `next-13.2.4` or `next-canary`. Build and start the app.

Hover over the link and observe, that the prefetched `json` has an empty object instead of the props. 

Branch `next-12.2` has a working example (the only difference is the next version)

Do mind that the app is using `middleware` maybe that is causing the issue, but it worked on `next@12.2`

### Describe the Bug

When hovering over a link for the page that has `getServerSideProps` props get prefetched and `test.json` should contain the props, but it only has an empty object `{}` and when navigating to that page, the props on the page are also wrong every other time. See the video.

https://user-images.githubusercontent.com/36345162/227701941-4bd63b9e-5d8b-41c0-b363-11df6b5e2af7.mov



### Expected Behavior

When hovering over a link the server-side props should be prefetched as they did in version `12` and when navigationg to the page the props should be correct.

https://user-images.githubusercontent.com/36345162/227702140-691a672d-541d-454d-b7a5-296d292fd051.mov



### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

next start

area: data fetching

Prefetching and client side navigation not working coreclty

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.20.0
      npm: 8.19.4
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.3
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Middleware / Edge (API routes, runtime)

### Link to the code that reproduces this issue or a replay of the bug

https://app.replay.io/recording/untitled--a18f4a73-07a1-49a7-94ec-6400bf8094ae

### To Reproduce

Issue is not reproducible locally or in Node.js environments, where `caches` is always present

Issue happens only inside Vercel Edge Middleware

Can be reproduced by deploying app with following `middleware.ts`:

```typescript
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
  console.log({
    typeofCaches: typeof caches, // "undefined"
    globalTypeofCaches: typeof global.caches, // "undefined"
  });
  return NextResponse.next();
}

export const config = {
  matcher: ["/", "/((?!_next/static|favicon.ico).*)"],
};
```

### Describe the Bug

Global `caches` property is `undefined` when trying to access it from `middleware.ts/js` inside Vercel Edge Middleware runtime.

Here are logs from Edge Middleware. `typeof caches` and `typeof global.caches` yields `undefined`

<img width="560" alt="Screenshot 2023-05-20 at 20 18 17" src="https://github.com/vercel/next.js/assets/12574743/f3f4eb1e-5f8d-4c03-87b3-5087a41d75af">

When running locally or inside remote Node.js environment, `caches` is present and middleware works fine

And here are logs from Next.js Serverless Function, where `caches` are present:

<img width="550" alt="Screenshot 2023-05-20 at 20 19 32" src="https://github.com/vercel/next.js/assets/12574743/0bbfe7e2-20e7-415f-a7e8-d5db5065da57">



### Expected Behavior

`caches` and `global.caches` inside Vercel Edge Middleware runtime is present and exposes [Web APIs CacheStorage](https://developer.mozilla.org/en-US/docs/Web/API/Cache)



### Which browser are you using? (if relevant)

Version 113.0.5672.126 (Official Build) (arm64)

### How are you deploying your application? (if relevant)

Vercel

area: app

Web APIs Cache not working in Vercel Edge Middleware – typeof `caches` is `undefined`

I just ran into this problem and found [this](https://github.com/reduxjs/redux-toolkit/issues/1376#issuecomment-1361617034) comment saying it's expected behavior, but I'm making this issue with a clearer example for further discussion because this seems like a footgun that should be changed.

Below is an example with a login button. Click the button and it sends a POST request to the backend with credentials to log in and gets back user info + token, and stores them in the authSlice and displays the username.

https://codesandbox.io/p/github/adamerose/rtkq-reducer-error-example/master
https://github.com/adamerose/rtkq-reducer-error-example

With the error thrown in the matchFulfilled reducer, the query gets stuck forever in this state even though the HTTP request completed successfully:
```
isUninitialized:false
isFetching:true
isSuccess:false
isError:false
```
```typescript
const authSlice = createSlice({
  name: "auth",
  initialState: initialState,
  reducers: {
    logout: (state) => {
      state.user = null
    },
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.login.matchFulfilled,
      (state, { payload }) => {
        state.user = payload.user

        throw Error("Example error")
      },
    )
  },
})
```


It also seems to completely swallow the error and nothing appears in the console, which made it very hard to figure out why I was getting stuck pending in an actual project. I've included a separate Throw Error button that throws an error in a normal reducer and I can see it appear in the console, but for some reason the one inside the addMatcher example doesn't. Am I doing something wrong here? 

<img width="639" alt="image" src="https://github.com/reduxjs/redux-toolkit/assets/10884874/2690ec31-9984-40c9-b3c3-c7852097bafe">

<img width="632" alt="image" src="https://github.com/reduxjs/redux-toolkit/assets/10884874/f157f79c-c2ff-4125-bc89-0ef87c58a973">

<img width="573" alt="image" src="https://github.com/reduxjs/redux-toolkit/assets/10884874/158fb2ba-2953-4c19-98e1-50d9e7058716">


redux-toolkit

RTK Query gets stuck pending and swallows errors thrown in addMatcher reducers

### What version of `million` are you using?

2.6.4

### Are you using an SSR adapter? If so, which one?

None

### What package manager are you using?

bun

### What operating system are you using?

Mac

### What browser are you using?

Brave (Chromium based)

### Describe the Bug

Hi!
I've been stoked to try Million in some of my own projects for a while now  (because projects at my work use older React versions and I couldn't use Million there).

I've set  up a project with bun, NextJS and Million, everything seemed fine, but now there's this weird behavior that I can't figure out how to solve.

//package.json
```
{
  "name": "mynewproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "debounce": "1.2.1",
    "lucide-react": "^0.289.0",
    "million": "2.6.4",
    "next": "13.5.6",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/debounce": "1.2.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "postcss": "^8",
    "tailwindcss": "^3",
    "eslint": "^8",
    "eslint-config-next": "13.5.6"
  }
}

```
//next.config.mjs
```
import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true
}

const millionConfig = {
  auto: true,
}

export default million.next(nextConfig, millionConfig);

```
//parent component:
```
"use client"

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Image from 'next/image'
import Link from 'next/link'
import React, { useState } from 'react'

import { block } from "million/react";

const Home = () => {
  const [ email, setEmail ] = useState('');
  const [ joined, setJoined ] = useState(false);

  const handleEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    setEmail(event.currentTarget.value);
  }

  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    setJoined(true);
  };

  return (
    <main className="flex flex-col items-center justify-center p-24 w-full h-full py-12 md:py-24 lg:py-32 xl:py-48 bg-transparent absolute z-50">
    
    {!joined ? (<div className="container px-4 md:px-6">
      <div className="grid gap-6 items-center">
        <div className="flex flex-col justify-center space-y-4 text-center">
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-500">
              Welcome to our app.
            </h1>
            <p className="max-w-[600px] text-zinc-200 md:text-xl dark:text-zinc-100 mx-auto">
              Join us on this journey.
            </p>
          </div>
          <div className="w-full max-w-sm space-y-2 mx-auto">
            <form className="flex space-x-2">
              <Input
                className="max-w-lg flex-1 bg-gray-800 text-white border-gray-900"
                placeholder="Enter your email"
                type="email"
                onChange={(e) => {
                  handleEmail(e);
                  }
                }
                value={email}
              />
              <Button onClick={(e) => handleSubmit(e)}
              className="bg-white text-black" type="submit">
                Join Now
              </Button>
            </form>
            <p className="text-xs text-zinc-200 dark:text-zinc-100">
              Get ready for some fun.
              <Link className="underline underline-offset-2 text-white" href="#">
                Terms & Conditions
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>) : null}

    {joined ? (<div className="container px-4 md:px-6">
      <div className="grid gap-6 items-center">
        <div className="flex flex-col justify-center space-y-4 text-center">
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-500">
              Thank you!
            </h1>
            <p className="max-w-[600px] text-zinc-200 md:text-xl dark:text-zinc-100 mx-auto">
              Your email is now on our waitlist!
            </p>
          </div>
        </div>
      </div>
    </div>) : null}

    <div className="absolute bottom-0 left-0 flex h-48 w-full items-center justify-center">
        <a
        className="pointer-events-auto flex place-items-center gap-2 p-8"
        href="https://github.com/davesagraf"
        target="_blank"
        rel="noopener noreferrer"
      >
        {' '}
        <Image
          src="/github-mark.svg"
          alt="github"
          className="dark:invert"
          width={50}
          height={12}
          priority
        />
      </a>
    </div>

    <Image
    className="pointer-events-none"
      src="/sundust.svg"
      alt="sundust"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
        opacity: 0.6
      }}
    />
  </main>
  )
}

const HomeBlock = block(Home);

const HomePage = () => {

  return (
    <HomeBlock />
  );
};

export default HomePage;

```
//child component:
```
import * as React from "react"

import { cn } from "@/lib/utils"

// import { block } from "million/react";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

//million-ignore
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

// const InputBlock = block(Input);

export { Input }

```

I've already tried different MillionJS compiler options, both CommonJS & ES module imports and exports, tried separating React useState hooks in the parent component to another function and passing them as props, tried parent component with block() function and child component without, and vice versa.

I also tried adding debugger & comparing all steps with block() function and without, but DevTools don't show a difference.

I read all the MillionJS docs, followed rules of blocks and compiler settings, read about usage of UI libraries vs DOM elements, followed this post https://dev.to/tobysolutions/how-to-use-millionjs-in-a-next-app-1eim , read MillionJS docs here on github and all the previous issues, but I can't find a solution to this problem.

I know that this component doesn't need Million much and I could continue building my project with bun & NextJS for a long time and it would be fine.

However, my initial goal was to integrate Million not only when everything is lagging, but as early as possible (I started this project yesterday), so that from early on I can see all the benefits of using it and how it's affecting components I'm building, so that I could make my components better for both React and Million from the start.

Hope this issue is not too big.

Thanks.

### What's the expected result?

Regular HTML input element behavior, as in any standard React component with input element.

### Link to Minimal Reproducible Example

https://app.replay.io/recording/my-app--92a45a2e-bfba-4079-b65d-beb7261cd01e

### Participation

- [ ] I am willing to submit a pull request for this issue.

🚦 status: awaiting triage

million

With a parent component wrapped into a block() function, a nested input element loses focus after each typed character.

It seems that pressing shift key while scrolling the mouse wheel has no effect on Windows, contents of the canvas move up or down, instead of left or right. On Mac it works as expected.

I was able to reproduce this with the latest versions of Chrome and Edge on Windows 10.