Cannot use import statement outside a module
大约 1 分钟使用指南页面配置使用指南
问题表现
Vuepress项目在构建的时候, 会提示 import xxxx from 'xxx' 报以下这个错误.
SyntaxError: Cannot use import statement outside a module
这可能是构建的时候 输出的是代码是commonjs标准的, 但可能某些原因造成 某个文件或依赖 没有转成 commonjs标准。
在网上搜寻了大量的相关信息, 以下一些解决方案
解决方案一
有人说在package.json加上 type = module" 可以解决
{
"type": "module",
}
你们试试看? 但是我们这个项目不管用。 这让我想到使用 babel, 试了几个方法, 装了几个babel的依赖都不会。
解决方案二
babel的方案失败了, 只能另辟蹊径了。再详细分析一下 是 vue-scriptx 这个组件报错的。 提示 import { App, h } from 'vue' 这个报错了。
上了github看了源代码, 发现文件不大, 后来直接复制源代码, 在相对路径，直接引入 解决了。
像这样的
import { defineClientConfig } from "@vuepress/client";
import Ads from "vue-google-adsense";
import ScriptX from "./vue-scriptx";
export default defineClientConfig({
async enhance({ app, router }) {
app.use(ScriptX);
app.use(Ads.Adsense);
app.use(Ads.InArticleAdsense);
app.use(Ads.InFeedAdsense);
},
setup() {},
rootComponents: [],
});
希望对你有帮助。