ReferenceError: Can't find variable: mutableInstrumentations ios 10.3.1

[0x30]

Version

3.0.0

Reproduction link

https://github.com/0x30/vue-next-issues-2457

Steps to reproduce

1. vue-cli (@vue/cli 4.5.8) create demo
2. choose Default (Vue 3 Preview) ([Vue 3] babel, eslint)

After waiting for the installation, run it. Use ios 10.3.1 to open the device and you can see the error

What is expected?

normal operation

What is actually happening?

ReferenceError: Can't find variable: mutableInstrumentations

---

[Log] Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E8301 Safari/602.1 (eruda, line 27)

If it is difficult to find a specific version of the device, you can use xcode to download the ios10 version of the simulator to simulate

[edison1105]

incorrect reproduction link @0x30

[0x30]

may not need to provide a reproduction link.

Follow the steps below to see this problem

// @vue/cli 4.5.8
vue create demo
// choose vue 3 default
cd demo
npm run serve
// open url on ios 10 device

This is the project and recorded file

[huanggm]

It seems that the bug has not been fixed. 😢

iOS version: 10.2

Steps to reproduce

vue-cli (@vue/cli 4.5.11) create demo
choose Default (Vue 3 Preview) ([Vue 3] babel, eslint)

And I have changed vue@3.0.0 to vue@3.0.7

[huanggm]

@edison1105 @yyx990803 Can we reopen and fix this issue?

[edison1105]

ping @HcySunYang

[edison1105]

should change code as below?

terser({
  module: /^esm/.test(format),
  compress: {
  ecma: 2015,
    pure_getters: true
  },
+ mangle:{ safari10: true },
  safari10: true
})

[HcySunYang]

I just checked the code of terser https://github.com/terser/terser/blob/master/lib/minify.js, seems yes. @edison1105 can you make a PR? That way we can provide a nightly build for @huanggm to testing.

[edison1105]

I just checked the code of terser terser/terser@master/lib/minify.js, seems yes. @edison1105 can you make a PR? That way we can provide a nightly build for @huanggm to testing.

got it

[edison1105]

It seems not necessary 😆

[MaybeQHL]

@edison1105 Has the problem been solved?I opened it blank in iOS10 +

[edison1105]

@edison1105 Has the problem been solved?I opened it blank in iOS10 +

It seems has not been fixed.

[HcySunYang]

Oh sure, I made a mistake

[huanggm]

Could anyone fix this issue? I desire to do something. But I don't have a clue.

[duncanmcclean]

I'm in the same boat, anyone found a fix for this?

[onemantooo]

Is there any workaround for this? Got same problem.

[onemantooo]

Had same problem

VM256:815 ReferenceError: Can't find variable: mutableInstrumentations

Tried to fix with chainWebpack:

    chainWebpack: (config) => {
      config.optimization.minimizer("terser").tap((args) => {
        const { terserOptions } = args[0];
        terserOptions.safari10 = true;

        console.log(terserOptions);
        return args;
      });
    },

not worked. console.log shows this for terserOptions:

{
  compress: {
    arrows: false,
    collapse_vars: false,
    comparisons: false,
    computed_props: false,
    hoist_funs: false,
    hoist_props: false,
    hoist_vars: false,
    inline: false,
    loops: false,
    negate_iife: false,
    properties: false,
    reduce_funcs: false,
    reduce_vars: false,
    switches: false,
    toplevel: false,
    typeofs: false,
    booleans: true,
    if_return: true,
    sequences: true,
    unused: true,
    conditionals: true,
    dead_code: true,
    evaluate: true
  },
  mangle: { safari10: true },
  safari10: true
}

"vue": "^3.2.6",

[onemantooo]

BTW Looks like code from !*** ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js ***!
isn't minified at all, so i'm not sure this is about Terser.

@HcySunYang

[descire]

use babel handle vue3 source to ES5，can solve the above problems:

// vue.config.js
module.exports = {
	transpileDependencies: [/@vue\/*/],
	...
}

but in ios10.x create blank html，because Object.getOwnPropertyNames(Symbol) can enumerate 'arguments' and 'caller'

the browser threw an exception TypeError "arguments","callee" and "caller" cannot be accessed in strict mode

i make a PR can fixed #4900 @edison1105 @huanggm @HcySunYang

[zt50tz]

Thank you for solution!

But, now i get error Can't find variable: compileCache ;(
If i set window.compileCache = {}; everything is fine, but i see it as dirty hack.

[ghost]

官方尽快解决这个问题啊，搁置了两个月了

[Jimin0810]

官方尽快解决这个问题啊，这个问题仍然未解决。我尝试了以上的所有方法

[johnbian]

you need change .env file. NODE_ENV = production.

[Jimin0810]

you need change .env file. NODE_ENV = production.

yeah, Environmental issues have been identified。thank u

[yyx990803]

For Vue CLI users, make sure to transpile Vue itself if you intend to support iOS 10 (see #2457 (comment))

The remaining runtime error should be fixed after #4900 is released in the next patch. I don't have an iOS 10 device to test so please report under this thread if anyone gets it working.