随着前端技术的不断发展，ES6 成为了前端开发中必不可少的一部分。在 ES6 中，import 的使用更加方便，它提供了模块化的开发方式，帮助我们更好地组织代码，提高了代码的可维护性。但是我们在使用 import 的时候，还是经常会遇到一些错误，本文将带领大家解决这些常见问题。
错误一：SyntaxError: Cannot use import statement outside a module
在使用 import 引入模块时，有时会遇到这样一个错误：
SyntaxError: Cannot use import statement outside a module
这是因为 Babel 默认只转换语法，不转换模块，我们需要在package.json中加入如下代码：
"type": "module"
这样就可以避免该错误的出现。
错误二：Uncaught TypeError: Failed to resolve module specifier
在使用 import 引入模块时，有时会遇到这样一个错误：
Uncaught TypeError: Failed to resolve module specifier
这是因为我们在引入模块时，路径不正确或者没有设置正确的别名，比如：
import Router from 'vue-router';
这里我们引入了 vue-router，但是并没有设置正确的路径。我们需要确保正确的路径或别名已经配置好，或者使用绝对路径进行引入，比如：
import Router from '@/router';
错误三：ESLint 报错
在使用 import 引入模块时，有时会遇到 ESLint 报错：
error 'xxx' is not defined no-undef
这是因为我们使用了 ES6 模块化，而 ESLint 只识别 CommonJS 模块化。我们可以通过修改 .eslintrc.js 配置文件，使之支持 ES6 模块化：
-- -------------------- ---- -------
-------------- - -
-- ---
---- -
-------- -----
---- -----
----- -----
--
-------------- -
------------ --
----------- ---------
--
-- ---
--当然，如果我们只是单纯的实验 ES6 的 import 新特性，没有进行实际的开发，我们可以选择更简单的写法：
<script type="module"> // ... </script>
这样，我们就可以不使用 ESLint 进行语法检查。但是，在实际的开发中，还是建议我们配置好 ESLint，规范我们的代码风格。
错误四：命名冲突
当我们引入两个名字相同的模块时，就会产生命名冲突的问题，比如：
import { foo } from 'foo';
import { foo } from 'bar';
foo();这段代码中，我们在引入 foo 模块时，使用了相同的变量名 foo，这就导致了命名冲突。为了避免这种情况，我们可以使用别名来重新定义模块的名称，比如：
import { foo as foo1 } from 'foo';
import { foo as foo2 } from 'bar';
foo1();
foo2();这里我们将 foo 重命名为了 foo1 和 foo2，这样就可以避免命名冲突的问题了。
错误五：引入不存在的模块
当我们引入一个不存在的模块时，就会提示该模块找不到的错误，比如：
import { foo } from 'bar';
foo();这段代码中，我们引入了一个名为 bar 的模块，但是该模块并不存在，就会提示找不到 bar 模块的错误。为了避免这种情况，我们需要确保引入的模块存在，并且路径配置正确。
总结
在使用 import 引入模块时，我们经常会遇到一些常见的错误，本文总结了这些常见错误，并提供了相应的解决方案。通过前期学习和实践，我们可以更好地掌握 ES6 模块化的开发方式，提高代码的可维护性和易读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1e4bcb5eee0b52593aefb