Uncaught SyntaxError: Unexpected token { in Chrome [重复]答案

【问题标题】：Uncaught SyntaxError: Unexpected token { in Chrome [duplicate]Uncaught SyntaxError: Unexpected token { in Chrome [重复]
【发布时间】：2019-03-18 23:54:52
【问题描述】：

我正在尝试使用 javaScript 中的导入和导出连接三个文件 rule.js、event.js、action.js。

event.js 中的函数将从浏览器获取数据，当 and 条件满足时，它将运行 rule.js 中的函数，然后执行该操作。

// 规则.js

import{actionOne} from 'action.js';
var scrollAndTime = (function(){
    return function(){
        console.log(actionOne());
    }
})();

export{scrollAndTime};

// event.js

import { scrollAndTime } from 'rule';

var scrollPercentage = (function(){
    var scrollRun = false;  // This is for future use
    if(!scrollRun){
        return function(scroll){
            console.log("I am Scroll.");
            var height = document.documentElement,
                body   = document.body,
                st     = 'scrollTop',
                sh     = 'scrollHeight';
                scrollRun = scroll;
            var scrollPercent = (height[st]||body[st]) / ((height[sh]||body[sh]) - height.clientHeight) * 100;
            return scrollPercent;
        }
    }
})();

var timeSpent = (function(){
    var time    = new Date();
    var timeRun = false,  // This is for future use
        startTime = time.getTime();
    if(!timeRun){
        return function(){ // call this function by timeSpent()(); 
            console.log("I am Time.");
            return (new Date()).getTime() - startTime;
        }
    }
})();


// Handling and condition between scrollPercentage and timeSpent
var and=false;

addEventListener("click",function(){
    if(!and){
        var scrollAndTimeSpent=false;
        if(scrollPercentage()>70 && timeSpent()>15000){
            // this.alert("Executed!");
            and=true;
            scrollAndTimeSpent=true;
        }
        if(scrollAndTimeSpent){
            // Tell rule engine that I have completed
            // Execute this function.
            scrollAndTime();
        }
    }
})

// action.js

var actionOne = (function(){
    return function(){
        // Do the following things and return the required thing.
        return "ActionOne done!";
    }
})();

export{actionOne};

// index.html - 这是使用这些js文件的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    <title>Rule Engine</title>
</head>
<body>
    <script type="module" src="event.mjs"></script>
</body>
</html>

现在，当我使用 type="module" 时，我得到了（从源“null”访问脚本在“file:///Users/praveenkumarrana/Desktop/Projects/ruleengine/event.mjs”已被 CORS 策略阻止：无效响应。因此不允许访问源“null”。 ) 错误。

当我不使用它时，我得到 (Uncaught SyntaxError: Unexpected token { in Chrome.) 错误。

【问题讨论】：

（总结重复的问题 - 你不能从文件系统加载 JS 模块。你需要一个 Web 服务器。）
是的，这是因为我没有使用服务器而导致的错误。

标签： javascript google-chrome closures

【解决方案1】：

从这一行开始，

file:///Users/praveenkumarrana/Desktop/Projects/ruleengine/event.mjs

我假设您正在从文件系统运行此代码（不通过本地服务器）。由于 ES6 模块易于遵循同源策略，因此您无法在没有 CORS 标头的情况下从文件系统或跨域导入它们。本质上，您必须从服务器运行此代码或在浏览器中禁用同源（用于测试）。

【讨论】：