Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When switching route on macOS (and possibly also iOS) Safari, the error "TypeError: bu.unmask is not a function" occurs, killing the vite server. #3977

Closed
6 tasks done
shirakaba opened this issue Jun 26, 2021 · 1 comment · Fixed by #4223
Labels
feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@shirakaba
Copy link

shirakaba commented Jun 26, 2021

Describe the bug

In macOS Safari, when switching route (i.e. by clicking a link such <a sveltekit:prefetch="" href="/nouns-1-mora" class="s-Xvih31qJPb_c">1-mora nouns</a>, or by updating the URL bar manually), the error TypeError: bu.unmask is not a function appears, killing the dev server. The full error log is provided at the bottom of the issue.

As well as macOS Safari, the issue also appears to occur on iOS Safari, as seen by this duplicate issue that was closed due to lack of information: #3850. Of great note, it does not occur on macOS Firefox nor macOS Chrome on my system, so it seems to be a Safari-specific issue regarding missing functionality. Perhaps this unmask function does not exist on the buffer instance in Safari.

Curiously, however, whichever route is first loaded from the dev server will succeed; it's just that subsequent changes in route will not. So, just after starting the dev server, I could navigate to http://localhost:3000/nouns-1-mora just fine – but clicking links to navigate to another page like / would fail.

Reproduction

The repo https://github.com/shirakaba/jp-pitch-accent exhibits the issue. It was created using the SvelteKit CLI command npm init svelte@next jp-pitch-accent, and the changes relative to the starter template are minimal. To reproduce the issue, first clone the repo and get the Vite server running:

Setting up the repro

git clone git@github.com:shirakaba/jp-pitch-accent.git
cd jp-pitch-accent
npm install
npm run dev

Reproducing the error

Now visit http://localhost:3000 in macOS Safari. Click one of the links along the header (excluding the Twitter and GitHub links, which aren't locally served sites), such as "2-mora nouns" and you should see a view like below:

image

Note how, following the navigation action, the console now shows messages indicating failure to connect to the Vite server, and the GitHub and Twitter icons have become missing images. If you now view your Vite server, you will see that it has thrown an error and has exited prematurely.

System Info

Note that I am using the macOS Monterey beta. I can't recall whether or not I was experiencing the issue back on Catalina.

  System:
    OS: macOS 12.0
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Memory: 37.80 MB / 16.00 GB
    Shell: 4.4.23 - /usr/local/bin/bash
  Binaries:
    Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 15.0
    Safari Technology Preview: 14.2

Used package manager: npm

Logs

I apologise that I don't quite know how svelte-kit drives vite so I can't turn on the --debug flag, but here are the debug logs I have access to:

Jamies-Macbook-Pro:jp-pitch-accent-kit jamie$ npm run dev

> jp-pitch-accent@0.0.1 dev /Users/jamie/Documents/git/jp-pitch-accent-kit
> svelte-kit dev


  SvelteKit v1.0.0-next.115

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


    


/Users/jamie/Documents/git/jp-pitch-accent-kit/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:52132
      else bu.unmask(buffer, mask);
              ^

TypeError: bu.unmask is not a function
    at unmask (/Users/jamie/Documents/git/jp-pitch-accent-kit/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:52132:15)
    at Receiver$1.getData (/Users/jamie/Documents/git/jp-pitch-accent-kit/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:53170:25)
    at Receiver$1.startLoop (/Users/jamie/Documents/git/jp-pitch-accent-kit/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:52966:22)
    at Receiver$1._write (/Users/jamie/Documents/git/jp-pitch-accent-kit/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:52901:10)
    at writeOrBuffer (node:internal/streams/writable:389:12)
    at _write (node:internal/streams/writable:330:10)
    at Receiver$1.Writable.write (node:internal/streams/writable:334:10)
    at Socket.socketOnData (/Users/jamie/Documents/git/jp-pitch-accent-kit/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:55047:37)
    at Socket.emit (node:events:365:28)
    at Socket.emit (node:domain:470:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jp-pitch-accent@0.0.1 dev: `svelte-kit dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the jp-pitch-accent@0.0.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jamie/.npm/_logs/2021-06-26T15_39_59_645Z-debug.log

Before submitting the issue, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Provide a description in this issue that describes the bug.
  • Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
@sodatea
Copy link
Member

sodatea commented Jul 8, 2021

Though I can't reproduce this issue under macOS Big Sur, after looking into the generated code, I find that it is a bug caused by the ignoreDepPlugin in the build config.

// Optional peer deps of ws. Native deps that are mostly for performance.
// Since ws is not that perf critical for us, just ignore these deps.
ignoreDepPlugin({
bufferutil: 1,
'utf-8-validate': 1
}),

The dependencies are not ignored, but shimmed with an empty object, which confuses the ws package.

I'll open a PR tomorrow.

@sodatea sodatea added feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority) and removed pending triage labels Jul 8, 2021
sodatea added a commit to sodatea/vite that referenced this issue Jul 12, 2021
Fixes vitejs#3977
Fixes vitejs#3850

😅 I've accidentally committed the actual fix in vitejs@25d86eb#diff-d17472499351c5bf75d44c67aaa203337dcce321fb578ff05302c61b2b2a3a8aR172

So this PR just removes the erroneous `ingoreDepPlugin`, and moves
the comments to the `ignore` option of the commonjs plugin.

The cause of the issues is this line: https://github.com/websockets/ws/blob/4c1849a61e773fe0ce016f6eb59bc3877f09aeee/lib/buffer-util.js#L105

When we ignore the optional deps when bundling, we expect
`require('bufferutil')` to throw an error.

However, with the previous `ignoreDepPlugin` implementation, the
`require` expression is turned into:
```js
var bufferutil = {
	__proto__: null
};

var require$$1 = /*@__PURE__*/getAugmentedNamespace(bufferutil);

// ...
const bufferUtil = require$$1;
```
No error is throwed, so the code executes into the wrong branch.

After the fix, the `require` expression is left as-is. As `bufferutil`
is not installed in the user project, the error is thrown as expected.
@github-actions github-actions bot locked and limited conversation to collaborators Jul 27, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants