错误[ERR_REQUIRE_ESM]不支持NuxtJs3的ES模块的要求()
错误[ERR_REQUIRE_ESM]不支持NuxtJs3的ES模块的要求()
提问于 2022-01-08 00:04:08
我正在尝试使用nuxt 3创建一个web应用程序，它在我的桌面上的节点js版本17.3.0非常好，但是服务器上的情况并非如此.
这是一个带有cpanel的服务器，我使用的工具是“安装node.js应用程序”，但每次都会出现这个错误。
App 37252 output: node:internal/modules/cjs/loader:979
App 37252 output: throw new ERR_REQUIRE_ESM(filename, true);
App 37252 output: ^
App 37252 output: Error [ERR_REQUIRE_ESM]: require() of ES Module /home/private/admin/server/index.mjs not supported.
App 37252 output: Instead change the require of /home/private/admin/server/index.mjs to a dynamic import() which is available in all CommonJS modules.
App 37252 output: at Module.require (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:80:25)
App 37252 output: at loadApplication (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:243:2)
App 37252 output: at setupEnvironment (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:214:2)
App 37252 output: at Object.<anonymous> (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:133:1) {
App 37252 output: code: 'ERR_REQUIRE_ESM'
App 37252 output: }在“安装node.js应用程序”工具中，可用节点的最新版本是16.13.0，因此我认为问题在于此(17.3.0版本在我的计算机上运行得很好)。
如果是这样的话，我怎样才能把最新版本的nodeJs放在cpanel上呢？
编辑：
我的package.json：
我的nuxt.config.ts：
我的app.vue
<template>
<Html lang="fr">
<Head>
<Title>title</Title>
<Meta name="description" content="My page's description" />
</Head>
<Body>
<header>
<nav>
<ul>
<li class="nav-item active">
<a href="#">
<span class="icon">
<ion-icon name="grid-outline"></ion-icon>
</span>
<span class="text">Hub</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="checkmark-outline"></ion-icon>
</span>
<span class="text">Vérification</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="build-outline"></ion-icon>
</span>
<span class="text">Modération</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="chatbubble-ellipses-outline"></ion-icon>
</span>
<span class="text">Communication</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="settings-outline"></ion-icon>
</span>
<span class="text">Paramètre</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</nav>
</header>
<NuxtPage />
</Body>
</Html>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(navItem =>
navItem.addEventListener('click', () => {
navItems.forEach(item => {
item.classList.remove('active');
});
navItem.classList.add('active');
})
);
});
</script>
<style lang="scss">
@font-face {
font-family: 'Roboto';
src: local('Roboto'), url('./assets/fonts/Roboto-Black.ttf');
}
body {
font-family: 'Roboto';
margin: 0;
}
nav {
position: fixed;
bottom: 0px;
width: calc(100% - 10rem);
height: 5rem;
padding: 0 5rem;
background: #039ce7;
border-radius: 10px 10px 0 0;
}
nav > ul {
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
list-style: none;
}
nav > ul > li > a {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav > ul > li > a > .icon {
line-height: 5rem;
font-size: 2rem;
color: white;
transition: 0.5s;
}
nav > ul > li:hover > a > .icon {
transform: translateY(-.5rem);
}
nav > ul > li.active > a > .icon {
transform: translateY(-2.4rem);
color: white;
}
nav > ul > li > a > .text {
position: absolute;
font-size: 1rem;
opacity: 0;
color: white;
transition: 0.5s;
transform: translateY(40px);
}
nav > ul > li:hover > a > .text {
opacity: 1;
transform: translateY(22px);
}
nav > ul > li.active > a > .text {
opacity: 1;
transform: translateY(22px);
}
nav .indicator {
position: absolute;
top: calc(-52% + -8px);
width: 5rem;
height: 5rem;
transform: translateX(50%);
border-radius: 50%;
background: #039ce7;
border: 8px solid white;
transition: .5s;
}
nav .indicator::before {
content: '';
position: absolute;
top: 52%;
left: -20px;
width: 15px;
height: 15px;
border-top-right-radius: 24px;
box-shadow: 0 -5px 0 0 white;
}
nav .indicator::after {
content: '';
position: absolute;
top: 52%;
right: -20px;
width: 15px;
height: 15px;
border-top-left-radius: 24px;
box-shadow: 0 -5px 0 0 white;
}
nav ul li:nth-child(1).active ~ .indicator {
left: 0;
}
nav ul li:nth-child(2).active ~ .indicator {
transform: translateX(0);
left: 25%;
}
nav ul li:nth-child(3).active ~ .indicator {
transform: translateX(-50%);
left: 50%;
}
nav ul li:nth-child(4).active ~ .indicator {
transform: translateX(-100%);
left: 75%;
}
nav ul li:nth-child(5).active ~ .indicator {
transform: translateX(-150%);
left: 100%;
}
</style>我的index.vue：
<template>
<div>
<h1>{{ data }}</h1>
</div>
</template>
<script setup>
// eslint-disable-next-line no-undef
const { data } = await useFetch('/api/hello');
</script>我的hello.ts文件：
export default async () => 'Hello World';我刚刚开始我的项目，所以我只有App.vue，Index.vue和hello.ts
为了部署我的应用程序，我运行npm run deploy，然后在我的服务器上的管理文件夹(使用filezilla)中移动".output“文件夹(应用程序构建的文件夹)的所有内容。
.output文件夹：
(任何要求都在index.mjs文件中)
在我的服务器上，我使用“安装node.js应用程序”工具启动应用程序。
回答 2
Stack Overflow用户
发布于 2022-01-08 01:03:27
尝试将type: "module"添加到package.json文件中，然后删除node_modules目录并再次执行npm install。
Stack Overflow用户
发布于 2022-03-03 10:25:52
在构建Nuxt 3应用程序时尝试使用node预置。您可以使用我们的Express.js包装程序运行应用程序，使用安装在您的CPanel上的CloudLinux乘客。
看看这个：https://github.com/Kodefix/express-wrapper-for-nuxt-3
CloudLinux乘客无法处理ES模块，因此您必须使用entry.js作为帮助文件来运行该应用程序。这是在共享主机上处理Nuxt 3应用程序的最简单方法，等等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70628490
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号