webpack 解决:Cannot use import statement outside a module 的问题

1、问题描述:

其一、报错为:

Uncaught SyntaxError: Cannot use import statement outside a module;

中文为:

未捕获的语法错误:无法在模块外部使用 import 语句;

其二、问题描述为:

在项目打包的时候 npm run build ,没有报错,页面也正常显示,但在浏览器调试的时候 F12 报错;

其三、控制台页面、浏览器页面、F12 控制台页面为:

// 控制台执行没有问题;

// 浏览器页面、F12 控制台页面:

// 出错的地方是: main.js 文件报错:

2、问题分析:

根据 F12 控制台报错的提示:无法在模块外部使用 import 语句,应该是引入或设置 main.js 出现了问题;

3、问题解决:

其一、发现并解决问题:

A、在 index.html 页面中引入了浏览器不能直接解析的东西(即:页面是不能直接识别这个 index.html 文件中的 main.js 中的 import 这些东西,需要 webpack 去打包等解析)
B、直接去掉 <script src="./src/main.js"></script> 的引入,而引入 <script src="./bundle.js"></script> 代码,因为:webpack 打包解析形成的 bundle.js 文件已经将 main.js 文件成功解析并放在了 bundle.js 文件里(即:此时引入的 main.js 文件是多余的,页面浏览器是不支持 ES6importexport语法;);

其二、修改代码的页面为:

// 去掉 <script src="./src/main.js"></script> 代码即可;

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

相关推荐
xw511 分钟前
uni-app中v-if使用”异常”
前端·uni-app
!win !30 分钟前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒1 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding1 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖2 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花2 小时前
i18n国际语言化配置
前端
编程贝多芬2 小时前
Promise 的场景和最佳实践
前端·javascript
Asort2 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio2 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗2 小时前
JS的对象属性存储器
前端