Vue JS 3 应用程序可在旧版 Firefox/Chrome 中运行

Question

. Answers to this question are eligible for a +100 reputation bounty. Claudiu wants to to this question.

I'm developing an app in VueJS 3 and it seems that's working on my local computer. But I have to make it runs also on older browsers like Firefox 38 Chrome 49.

My app uses some "fetch" functions to load content from api, to authenticate, to send commands, etc. After reading the following 2 links I believe I have some issues with it (despite it should works on CH 42). https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API and Babel not Polyfilling Fetch when using babel-preset-env . What it is your opinion?

I have babel and in package.json the following settings:

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "Chrome > 48",
 ]

But the errors received in Firefox and Chrome are very cryptic and I don't know what how should I transpile that function. I would focus on Chrome 49 and I'll add some context

Indeed the async function is available after Chrome 55. But I don't know how to convert it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

For example in Chrome 49 I have the following console error on the following page: webpack:///./node_modules/@vue/devtools-api/esm/proxy.js

Uncaught SyntaxError: Unexpected identifier proxy.js:94

The content of that file is:

import { HOOK_PLUGIN_SETTINGS_SET } from './const';
export class ApiProxy {
constructor(plugin, hook) {
    this.target = null;
    this.targetQueue = [];
    this.onQueue = [];
    this.plugin = plugin;
    this.hook = hook;
    const defaultSettings = {};
    if (plugin.settings) {
        for (const id in plugin.settings) {
            const item = plugin.settings[id];
            defaultSettings[id] = item.defaultValue;
        }
    }
    const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
    let currentSettings = Object.assign({}, defaultSettings);
    try {
        const raw = localStorage.getItem(localSettingsSaveId);
        const data = JSON.parse(raw);
        Object.assign(currentSettings, data);
    }
    catch (e) {
        // noop
    }
    this.fallbacks = {
        getSettings() {
            return currentSettings;
        },
        setSettings(value) {
            try {
                localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
            }
            catch (e) {
                // noop
            }
            currentSettings = value;
        },
    };
    if (hook) {
        hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
            if (pluginId === this.plugin.id) {
                this.fallbacks.setSettings(value);
            }
        });
    }
    this.proxiedOn = new Proxy({}, {
        get: (_target, prop) => {
            if (this.target) {
                return this.target.on[prop];
            }
            else {
                return (...args) => {
                    this.onQueue.push({
                        method: prop,
                        args,
                    });
                };
            }
        },
    });
    this.proxiedTarget = new Proxy({}, {
        get: (_target, prop) => {
            if (this.target) {
                return this.target[prop];
            }
            else if (prop === 'on') {
                return this.proxiedOn;
            }
            else if (Object.keys(this.fallbacks).includes(prop)) {
                return (...args) => {
                    this.targetQueue.push({
                        method: prop,
                        args,
                        resolve: () => { },
                    });
                    return this.fallbacks[prop](...args);
                };
            }
            else {
                return (...args) => {
                    return new Promise(resolve => {
                        this.targetQueue.push({
                            method: prop,
                            args,
                            resolve,
                        });
                    });
                };
            }
        },
    });
}
async setRealTarget(target) {
    this.target = target;
    for (const item of this.onQueue) {
        this.target.on[item.method](...item.args);
    }
    for (const item of this.targetQueue) {
        item.resolve(await this.target[item.method](...item.args));
    }
}
}

I tried to change anything I found:

vue.config.js

    transpileDependencies: [
    "config",
    "vue",
    "vue-router",
    "vuex",
    "xml2js"
],

package.json

"dependencies": {
"@babel/polyfill": "^7.12.1",
"babel-polyfill": "^6.26.0",
"config": "^3.3.7",
"core-js": "^3.6.5",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.26",
"vue-router": "^4.0.12",
"vuex": "^4.0.2",
"xml2js": "^0.4.23"
  },
  "devDependencies": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11",
"@vue/babel-preset-app": "^4.5.15",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.0.0"
  },
  "browserslist": [
"defaults",
"> 1%",
"last 2 versions",
"not dead",
"Chrome > 48"
  ]

babel.config.js

module.exports = {
presets: [
  [
      '@vue/cli-plugin-babel/preset',
      {
          useBuiltIns: "usage",
          forceAllTransforms: true,
          targets: {
              "chrome": "49"
          },
          }
  ]
  ]
};

main.js

import "@babel/polyfill";
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './_store'
createApp(App).use(router).use(store).mount('#app');

Answer 1

i setup a new vue 3 project and added async/await and fetch and did a build and it workes in chrome 48

I modified hello world component to

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {msg : ""}
  },
  mounted() {

    async function fetchMoviesJSON() {
      const response = await fetch('https://reqbin.com/echo/get/json');
      const movies = await response.json();
      return movies;
    }

    fetchMoviesJSON().then(data => {
      this.msg = data; // fetched movies
    });


  }
}
</script>

added "Chrome > 47" to browserslist

also i installed browserslist

1. can you run after installing browserslist npx browserslist and check if you see chrome 47 there?
2. I saw in your error dev-tools i think it might be just the Vue dev tools

Update: added vue router and installed the vue dev tools and when i run with serve i can see that the proxy file was compiled there and no errors.

are you building it in dev mode?

I would recommend you to clean up your babel plugins and try with the simple way. also please let know the node/nom version. i read it might be the problem, and you should try to update node see here