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

相关推荐
计算机小手7 分钟前
内网穿透系列九:开源的网络穿透与组网工具 EasyTier,支持多种数据传输通道,去中心化,兼具高效与安全
网络·经验分享·开源软件
浮桥11 分钟前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥19 分钟前
Vue框架之钩子函数详解
vue.js
七夜zippoe22 分钟前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆1 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
草莓熊Lotso1 小时前
【数据结构初阶】--顺序表(二)
c语言·数据结构·经验分享·其他
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter