记一次在NUXT项目修改elementUI源码遇见的问题：Cannot use import statement outside a module Unexpected identifier

1、前因

       nuxt项目需要扩展elementUI组件，故将elementUI组件源码拷贝出来，由于该组件依赖一些elementUI基础组件，比如该组件中引入：

import ElInput from 'element-ui/packages/input';

2、错误现象

      通过路由访问页面时正常,但通过浏览器刷新页面 nuxt服务端请求页面内容报500 SyntaxError，页面显示“Cannot use import statement outside a module” 或者 “Unexpected identifier”报错信息。

3、解决问题

在nuxt.config.js中添加：build: { transpile: [/^element-ui/]} 即可解决这个问题

4、原因

官网解释transpile作用：

       如果要使用Babel与特定的依赖关系进行转换，你可以在build.transpile中添加它们，transpile中的选项可以是字符串或正则表达式对象，用于匹配依赖项文件名。

       猜测：可能是刷新页面时服务器端会将页面js加载执行好再返回到浏览器（可直接展示的页面），服务端加载执行js时不能识别es的新语法（服务端是通过node起服务的，确切的说应该是node无法识别es新语法），这里在nuxt配置文件里将element-ui通过bable转换成服务器端能识别的es语法。

        验证：将nuxt项目启动为SPA模式(nuxt --spa)，即不使用服务端渲染（无需node）,通过浏览器刷新页面无报错。

        如果大家对原因这块有不同见解，欢迎留言，共同探讨。

5、参考地址

https://www.jianshu.com/p/ca335eaa50cb