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

相关推荐
努力的小雨27 分钟前
点我!1分钱获取你的专属表白网页,浪漫由大模型代运营
经验分享·ai智能
像风一样自由202037 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
会飞的鱼先生2 小时前
Node.js-http模块
网络协议·http·node.js