报错原因：这个错误通常是因为你正在尝试在一个不支持 ES6 模块语法的环境中使用 import 语句。这可能是因为你的代码是在一个只支持 CommonJS 或 AMD 模块系统的环境中运行的，或者你的代码运行的环境没有正确配置以支持 ES6 模块。如果是在浏览器环境，浏览器对这种语法支持的不是很好，解决方法是配置webpack。

以下是解决这个问题的几种方法：

1、更改模块系统

如果你的项目允许，你可以尝试更改你的模块系统以使用 ES6 模块。例如，如果你在 Node.js 环境中，你需要将 require 语句更改为 import 语句，并确保你的 package.json 文件中的 “type” 字段设置为 “module”。

2、使用 Babel

如果你不能更改你的模块系统，或者你需要支持在不支持 ES6 模块的环境中运行你的代码，你可以使用 Babel 这样的工具来转换你的代码。Babel 可以将 ES6 模块转换为 CommonJS 或 AMD 模块，这样你就可以在任何环境中运行你的代码了。
详细链接：文章第一部分‘Node.js中通过babel体验ES6模块化’

3、更改 import 语句的位置

在某些情况下，你可能只需要将 import 语句移动到一个模块的作用域内。例如，如果你在一个函数或块级作用域内使用 import 语句，你需要将它移动到一个模块的顶层作用域内。
这是一个示例，展示了如何在 Node.js 中使用 ES6 模块：
javascript

// package.json  
{  
  "name": "my-package",  
  "version": "1.0.0",  
  "type": "module",  
  "main": "index.js"  
}  

// index.js  
import { add } from './math.js';  
console.log(add(1, 2));

在这个示例中，我们在 package.json 文件中设置了 “type”: “module”，这样 Node.js 就会知道我们需要使用 ES6 模块。然后，我们在 index.js 文件中使用 import 语句来导入 math.js 文件中的 add 函数。

4、浏览器环境

（1）如果你使用的是浏览器环境，你需要在你的 HTML 文件中使用

<script type="module" src="./index.js"></script>

（2）配置webpack
详细链接：文章第二部分‘’项目中安装和配置webpack’

这样，浏览器就会知道你需要使用 ES6 模块，并正确地处理 import 语句。