mpvue compiles the Baidu applet, the developer tool opens the error Cannot read property'createTextNode' of undefined or the iPhone model cannot be previewed

Problem description: Use mpvue to compile the code of Baidu applet and open the developer tool to report an error (or the iPhone cannot be previewed). (As shown below)

 

 

Temporary solution:

node_modules/core-js/library/modules/_microtask.js

This is not a mpvue problem. The problem is in Babel's core-js. There is one in this package that has a judgment priority to adjust it. The
original core-js exception code:


// Node.js
  if (isNode) {
    notify = function () {
      process.nextTick(flush);
    };
  // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
  } else if (Observer && !(global.navigator && global.navigator.standalone)) {
    var toggle = true;
    var node = document.createTextNode('');
    new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new
    notify = function () {
      node.data = toggle = !toggle;
    };
  // environments with maybe non-completely correct, but existent Promise
  } else if (Promise && Promise.resolve) {
    // Promise.resolve without an argument throws an error in LG WebOS 2
    var promise = Promise.resolve(undefined);
    notify = function () {
      promise.then(flush);
    };
  // for other environments - macrotask based on:
  // - setImmediate
  // - MessageChannel
  // - window.postMessag
  // - onreadystatechange
  // - setTimeout
  } else {
    notify = function () {
      // strange IE + webpack dev server bug - use .call(global)
      macrotask.call(global, flush);
    };
  }

Code in the new core-js:

 
if (isNode) {
    notify = function () {
      process.nextTick(flush);
    };
  // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
  } else if (Promise && Promise.resolve) {
    // Promise.resolve without an argument throws an error in LG WebOS 2
    var promise = Promise.resolve(undefined);
    notify = function () {
      promise.then(flush);
    };
  // for other environments - macrotask based on:
  // - setImmediate
  // - MessageChannel
  // - window.postMessag
  // - onreadystatechange
  // - setTimeout
  } else if (Observer && !(global.navigator && global.navigator.standalone)) {
    var toggle = true;
    var node = document.createTextNode('');
    new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new
    notify = function () {
      node.data = toggle = !toggle;
    };
    // environments with maybe non-completely correct, but existent Promise
  } else {
    notify = function () {
      // strange IE + webpack dev server bug - use .call(global)
      macrotask.call(global, flush);
    };
  }

modify:

1. After the compilation is complete, directly modify the order in vendor.js. Search directly for "createTextNode" and find the corresponding position to modify. But it needs to be modified after each recompilation.

2. Modify node_modules/core-js/library/modules/_microtask.js in node_module, the corresponding sequence does not need to be modified after each compilation. But you must modify it after reinstalling core-js.

3. Go to fork a copy of core-js code on github, and install the modified core-js after modification. (This method is done once and for all, and the experiment has not been successful. The second method is currently used.)

Original source: https://github.com/Meituan-Dianping/mpvue/issues/1352

Guess you like

Origin blog.csdn.net/Mr_linjw/article/details/100881544