rollup3 打包时报错 exports is not defined 或 Cannot use import statement outside a module

已于 2023-05-12 15:49:53 修改
阅读量497 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 rollup 前端打包 esm
于 2023-05-12 15:48:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daoke_li/article/details/130643858
版权
在将Rollup从版本2升级到3时，配置文件rollup.config.js中的ES6导入导出可能导致错误，如exportsisnotdefined或Cannotuseimportstatementoutsideamodule。解决方法是将配置文件扩展名改为.mjs，指示Rollup按照ES模块规范来解析配置。
摘要由CSDN通过智能技术生成

问题

rollup2的配置文件是rollup.config.js，里面用es6写的导入导出没有问题，但升级到rollup3的时候报错

exports is not defined

或

Cannot use import statement outside a module

貌似不识别es6的写法了。

解决方案

把配置文件的后缀改成.mjs，即明确的告诉rollup配置文件解析类型。

具体见：https://rollupjs.org/command-line-interface/#configuration-files

相关链接：react组件发布到npm

daoke_li
关注
专栏目录
exports is not defined
许珊珊同学的专栏
08-07 1万+
若是babel 6, 可以看这位同仁的文章 https://www.cnblogs.com/vickya/p/8645061.html 若是babel 7 ， 设置 https://www.babeljs.cn/docs/babel-preset-env { "presets": ["@babel/preset-react", ["@babel/preset-env",{"modul...
关于打的 umd 包在使用时，报 require is not defined 错误的问题出处
LanJu的博客
05-17 2641
首发于 语雀文档 背景： 前端同事前辈写了一个提供给其他部门的 JS 插件，写的是提供给前端使用的工具类，使用的是 commonjs 规范，导出变量使用的是 module.exports = {} 的方式，使用的是 webpack 打包，打出的包可正常通过 script 标签引入使用，但无法通过 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用。​ 过程： 鉴于前辈说不需要理会他的 webpack config（他也没发给我），叫我使.
rollupOriginal error: Cannot use import statement outside a module
weixin_43912401的博客
03-22 880
报错是因为node环境不支持ES6语法，我们可以安装babel-jest、@babel/core、@babel/preset-env来解决问题（这几个插件可以将es6代码转换成es5,使node环境能够识别，这里我选择的是@babel/preset-env进行安装）2 在package.json文件中添加一个属性。1 用require 代替 import。
rollup打包ts报错：Original error: Cannot use import statement outside a module
weixin_42289080的博客
06-09 594
rollup打包ts的报错解决
rollup 3.3 出现 import 错误 Cannot use import statement outside a module
qq_42501092的博客
11-14 3699
我之前也有尝试用过 `rollup`，但是我没太注意版本号，就是记得之前在 `rollup.config.js` 的文件中是可以写 `es6` 的语法的，但是最近【2022年11月左右】我使用 `rollup` 的时候遇到一个问题，不能使用 `import` 语法了 就是这个 `SyntaxError: Cannot use import statement outside a module`， 一个很常见的问题，一开始我以为是我写错，后来发现配置文件也没啥问题呀
webpack 解决：Cannot use import statement outside a module 的问题
狮子座的男孩
10-13 2317
在项目打包的时候 `npm run build`，没有报错，页面也正常显示，但在浏览器调试的时候 `F12` 报错;
Cannot use import statement outside a module
07-29
The error message "Cannot use import statement outside a module" typically occurs when you try to use an import statement in a JavaScript file that is not being treated as a module. To fix this ...
Uncaught SyntaxError Cannot use import statement outside a module
10-20
Uncaught SyntaxError: Cannot use import statement outside a module是JavaScript中的一个错误，它表示在非模块脚本中使用了import语句。这个错误通常发生在浏览器环境中，因为浏览器默认将脚本视为非模块脚本。要...
vite cesium 报错如何解决 SyntaxError: Cannot use import statement outside a module
10-21
vite cesium 报错 SyntaxError: Cannot use import statement outside a module 是因为在浏览器中无法直接使用 ES6 的 import 语法。解决这个问题的方法是使用打包工具将代码打包成浏览器可以识别的代码。可以使用 ...
前置脚本错误 :Cannot use import statement outside a module
05-17
如果你想在浏览器端使用 import 导入模块，需要使用模块化打包工具，例如 webpack 或者 Rollup。这些工具可以将你的代码转换为符合浏览器标准的 JavaScript 代码。 如果你不想使用模块化打包工具，可以将 import ...
rollup-plugin-strip-exports:从您的代码中删除不需要的导出
03-17
汇总插件条出口 从您的代码中删除不需要的导出。 rollup-plugin-strip-exports旨在从条目文件中删除不需要的导出。 它不检查导出是否由另一个文件导入，其目的只是从条目文件中删除导出。 主要的用例是在使用iife时，因为将导出添加到全局范围中，并且如果将所有内容捆绑在一起，则通常没有用，因为您没有使用这些导出的目的。 从汇总版本不为iife捆绑包提供名称将不再导致错误（只是警告），并且不会污染全局范围。 但是，由于一些原因，该插件仍然有用。 Iife仍将导出分配给返回的变量。 当开发人员正在读取汇总输出时，这可能会引起混乱，因此不导出任何内容会更干净（我认为）。 您可能出于其他原因要删除导出。 安装 yarn add rollup-plugin-strip-exports --dev # or npm install rollup-plugin-strip-ex
ReferenceError: __dirname is not defined in ES module scope
彭世瑜的博客
07-27 3494
运行代码。
rollup工具打包报错问题汇总
qq_38519358的博客
08-18 1256
rollup工具打包报错问题汇总
ES6模块介绍—module的语法import、export简单介绍及用法
qq_43628158的博客
11-06 1239
es6模块的语法，import、export的简单介绍及用法
vue报错：exports is not defined
Queen-Shir的博客
05-23 1万+
报错如下： 【原因】在项目中全局搜索exports，其他的文件都是配置文件，只有1个js文件是自己最近新增的，写了exports，估计出问题就是这个文件了。 该文件是用来声明全局函数的，百度查了一下，是声明函数时的写法没有按照ES6的语法来写。 接下来，放代码： //以前的错误写法 exports.install = function(Vue,options){ } //正确的写法 let base={}; base.install = function(Vue,opti...
Typescript编译后 exports is not defined
tcr931117355的博客
02-25 2274
exports is not defined
Uncaught ReferenceError: exports is not defined 解决办法
热门推荐
木子聊前端
06-10 2万+
缘由 在不借助任何框架，单纯在浏览器运行，学习typescript ，开始一切都很美好，在命令行输入 tsc xxx.ts 然后把编译好都代码放到html，在浏览器运行，得出了预期结果。心情很舒畅，眼看就要顺利学完ts了。准备迎接毕业典礼，升职加薪； 突然的报错 模块是一个让人兴奋的区域，我们充分理解了模块带来的好处并切 对import和export 有很大期待，开始写入测试代码 test.ts import {hi} from './hello'; // import 的使用 console.log(
exports is not defined（已解决）
init_yanxiao的博客
06-30 1万+
首先在编译的时候其实就出现很多警告了提示无法编译 然后进入使用过element组件的页面，报了下面的错误exports is not defined 于是我看了下element包的源码 这个语法babel包识别不了，就是导致编译不了，而且有些浏览器也不会自动编译 **=====================下面解决** 这是babel.config的配置文件，旧版的 我们使用新版的就也可以编译啦 presets: [["@vue/app", { useBuiltIns: "entry" }]],
使用es6中import和export报错
qq_42535651的博客
02-07 2167
在学习import和export时，写了一个小demo进行测试 //index.html <script> import test from './test.js' test() </script> //test.js export default function (){ console.log('调用了test.js里的export函数了哦') } 可是会报错CO...
运行gltf-transform时报错Cannot use import statement outside a module
最新发布
08-02
这个错误通常发生在JavaScript中尝试在一个非模块化环境中导入ES6模块时。`gltf-transform`是一个工具库，它可能使用了现代的ES6语法，比如import/export。当你直接在浏览器的全局作用域或传统的CommonJS模块系统（如Node.js的`require`）中运行它，就会遇到这个问题。 解决此问题有几种方法： 1. **使用Node.js**：如果你是在命令行下运行`gltf-transform`，确保你正在一个支持ES6模块的环境中，例如Node.js 10及以上版本，通过`npm install -g gltf-transform`安装并运行。 2. **模块化环境**：如果在浏览器中，你需要将`gltf-transform`作为一个独立模块引入，可以使用模块加载器如Webpack、Rollup或直接打包成UMD格式，以便在非模块化的环境中也能工作。 3. **Babel转换**：你可以考虑使用Babel这类工具，对ES6代码进行转码，使其能在不支持ES6模块的环境中运行。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值