SCRIPT1002: syntax error File: 0. chunk.js,SCRIPT5009: ‘Map‘ is undefined File: 0. chunk.js-解决方法

情景描述


React项目通过npm run start启动后, 在Chrome浏览器、Firefox浏览器和Edge浏览器都可以正常运行, 但是在IE浏览器打开的时候, 控制台报标题的错误

解决方法


1.SCRIPT1002: syntax error File: 0. chunk.js, Line: 2296, Column: 27

src/index.js
添加下面内容, 放在首行

import 'react-app-polyfill/ie9';
import 'react-app-ployfill/stable;'
import 'fast-text-encoding/text';

package.json
找到browserslist, 添加上ie9即以上的支持

"browserslist" {
	"production": [
		...,
		"ie>9",
	],
	"development": [
		...
		"ie>9",
	]
},

首先保证有上面的模块, 没有的话, 可以执行npm install进行安装

模块安装好之后, IE浏览器再次打开该项目, 这时, 这个问题就解决了. 但又出现了下面的问题…

2.SCRIPT5022: SyntaxError File: 1. chunk.js, Line: 197681, Column: 38

IE浏览器控制台报上面的错误, 解决方法:

打开/node_modules/react-dev-utils/webpackHotDevClient.js, 在下面代码中加入slashes: true,

在这里插入图片描述
然后,
进入node_moudles文件夹下, 删除.cache文件夹的所有内容, 清除ie浏览器的缓存.

3. SCRIPT5009: 'Map' is File: Map is undefined e.chunk.js, Line: 2340,0 Column: 3

这个错误我并没有有亲自解决, 由于公司项目, 服务器上内网运行不了npm install, 因此, 提供思路, 希望你可以完美解决.

官方给出的建议: https://reactjs.org/docs/javascript-environment-requirements.html
算了, 这个还没有解决, 抱歉… 但是解决了上面两步, 可以在 IE的edge版本运行, 注意, 不是edge浏览器哦.
在这里插入图片描述

我用的的单独vue.js文件 其他的浏览器没有任何影响 请问一下各位 这是哪里不正确,百度也查了 改一个地方其他的地方又给你一个错 改着后面谷歌之类的浏览器都用不了了, <script type="text/javascript"> const BASE_URL = '/admin.php/pay/'; const USERID = '142'; const app = new Vue({ el: '#app', data: { product_type: 1, level: 1, grades: [], products: [], choose_product: null, choose_prodouct_id: null, time: 5, name: null, address: null, phone: null, note: '', delivery: 0, pay: 'wechatpay', title: '提示', content: '内容', number: 1, timer: null, order_id: null, shunfeng: 15 }, computed: { product_select_class() { return function(type) { return this.product_type == type ? 'select-class select-hover' : 'select-class'; } }, level_select_class() { return function(level) { return this.level == level ? 'insurance-select select-hover' : 'insurance-select'; } }, time_select_class() { return function(time) { return this.time == time ? 'insurance-select select-hover' : 'insurance-select'; } }, delivery_select_class() { return function(delivery) { return this.delivery == delivery ? 'insurance-select select-hover' : 'insurance-select'; } }, pay_btn_select_class() { return function(pay) { if (pay === 'wechatpay') { return this.pay === pay ? 'btn-wechatpay pay_type_active' : 'btn-alipay'; } else if (pay === 'alipay') { return this.pay === pay ? 'btn-alipay pay_type_active' : 'btn-wechatpay'; } } }, pay_check_select_class() { return function(pay) { if (pay === 'wechatpay') { return this.pay === pay ? 'pay_type_wechatcheck pay_type_wchecked' : 'pay_type_alipaycheck'; } else if (pay === 'alipay') { return this.pay === pay ? 'pay_type_alipaycheck pay_type_achecked' : 'pay_type_wechatcheck'; } } }, prodouct_select_class() { return function(prodouct) { return this.choose_prodouct_id == prodouct ? 'insurance-select select-hover' : 'insurance-select'; } }, has_level() { if (this.product_type == 1 || this.product_type == 6) { return true; } return false; }, totalPrice() { return (price) => { let outher = this.delivery == 1 ? this.shunfeng : 0; return parseFloat(parseFloat((price * this.number) + (outher * this.number)).toFixed(2)); } } }, created() { this.fetchData(); }, methods: { fetchData() { this.fetchGrades(); this.fetchProduct(); }, reduce() { if (this.number > 1) { this.number --; } }, add() { this.number ++; }, async fetchGrades() { this.grades = await this.getNormal(BASE_URL + 'grades'); }, async fetchProduct() { let url = BASE_URL + 'products'; switch(Number(this.product_type)) { case 1: this.products = await this.getNormal(url, {type: this.product_type, grade: this.level, time: this.time}); break; case 4: this.products = await this.getNormal(url, {type: this.product_type}); break; case 3: this.products = await this.getNormal(url, {type: this.product_type}); break; case 6: this.products = await this.getNormal(url, {type: this.product_type, grade: this.level}); break; } }, async getNormal(url, params = null, method="GET", data=null) { if (params) { let paramsArray = []; Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key])); if (url.search(/\?/) === -1) { url += '?' + paramsArray.join('&'); } else { url += '&' + paramsArray.join('&'); } } return new Promise((resolve, reject) => { $.ajax({ type: method, url: url, dataType: 'json', data: data, success: (response) => { resolve(response) } }) }); }, async choose_level(grade) { this.level = grade; this.clean_choose_product(); await this.fetchProduct(); }, async choose_time(time) { this.time = time; this.clean_choose_product(); await this.fetchProduct(); }, async choose_product_type(type) { this.product_type = type; this.clean_choose_product(); await this.fetchProduct(); }, choose_delivery(delivery) { this.delivery = delivery; }, choose_pay(pay) { this.pay = pay; }, choose_product_func(product) { this.choose_product = { 'id': product.id, 'name': product.name, 'price': product.price, } this.choose_prodouct_id = product.id; }, clean_choose_product() { this.choose_prodouct_id = null; this.choose_product = null; }, async confirm() { if (!this.choose_product) { return this.openTip("请选择产品!", "提示: "); } const numberReg = /^[0-9]*$/ let pay = this.pay === 'wechatpay' ? 'weixin' : 'zhifubaoweixin'; // let formData = new FormData(); let url = BASE_URL + 'production'; let data = { 'userid': USERID, 'value': this.choose_product.id, 'pay': pay, } // formData.append('userid', USERID); // formData.append('value', this.choose_product.id); // formData.append('pay', pay); if (this.product_type == 4) { if (!this.name) { return this.openTip('请填写收货人姓名!'); } if (!this.phone) { return this.openTip('请填写联系电话!'); } if (!this.address) { return this.openTip('请填写收货地址!'); } if (!numberReg.test(this.number)) { return this.openTip('请输入正确的数量!'); } if (this.number < 1) { return this.openTip('购买数量必须大于1!'); } if (this.delivery == null) { return this.openTip('请选择快递类型!'); } data.name = this.name; data.phone = this.phone; data.address = this.address; data.note = this.note; data.number = this.number; data.courier = this.delivery; // formData.append('name', this.name); // formData.append('phone', this.phone); // formData.append('address', this.address); // formData.append('note', this.note); // formData.append('number', this.number); // formData.append('courier', this.delivery); } // 发送POST请求 let response = await this.getNormal(url, {type: 2}, 'POST', data); if (response.code === 'error') { return this.openTip(response.msg) } // 展示二维码 let title = pay === 'weixin' ? '请使用微信扫一扫付款' : '请使用支付宝扫一扫付款' this.openTip('', title); $('#qrcode').html(''); $('#qrcode').qrcode(response.msg); this.order_id = response.order_id; // 设置定时器请求后台接口 this.timer = setInterval(this.order_status, 1000 * 3); }, async order_status() { url = BASE_URL + 'status'; response = await this.getNormal(url, {order_id: this.order_id}); if (response.status == 1) { this.title = '付款成功, 即将跳装到购买记录页面!'; clearInterval(this.timer); setTimeout(function() { window.location.href = '/admin.php/pay/record'; }, 3000); } }, openTip(content='', title='提示') { this.title = title; this.content = content; $('#myModal').modal({ keyboard: false }); }, closeTip() { this.title = ''; this.content = ''; $('#myModal').modal('hide'); clearInterval(this.timer); } } }); </script>
©️2020 CSDN 皮肤主题: 数字50 设计师:CSDN官方博客 返回首页