uni-app SSR本地运行报错 ReferenceError: module is not defined

uni-app SSR本地运行报错 ReferenceError: module is not defined

操作步骤：

  • 开启SSR运行

预期结果：

  • 不报错，部署后能正常访问

实际结果：

  • 报错

bug描述：

=============错误1：uniapp开启SSR运行后报错=============

ReferenceError: module is not defined  
22:19:01.163     at eval (D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@vue/server-renderer/index.js:7:3)  
22:19:01.163     at instantiateModule (file:///D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:15)

页面内容能出来，但是查看源代码的时候，看不到页面文本内容。
页面内容如下：

<template>  
    <text>首页文字首页文字首页文字首页文字首页文字首页文字首页文字首页文字首页文字首页文字首页文字首页文字首页文字</text>  
</template>

我尝试下载最新版本HBuilderX和更新最新node版本也是这样。

=============错误2：打包以SSR发行部署上，uni-ssr云函数URL化后，访问报错============= 报错的原因：打包发布的时候，server目录下根本不存在ssr-manifest.json和entry-server.js，所以在访问云函数的时候直接就抛出错误了，如下图2

开发环境 版本号 项目创建方式
Windows 22631.3447 HBuilderX

更多关于uni-app SSR本地运行报错 ReferenceError: module is not defined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

HBuilderX 4.15.2024050802 已修复。

更多关于uni-app SSR本地运行报错 ReferenceError: module is not defined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问从微信浏览器中唤醒APP获取extinfo参数ios是加密状态，安卓没有问题，这个问题怎么解决啊

在使用 uni-app 进行 SSR（服务器端渲染）时，如果遇到 ReferenceError: module is not defined 错误，通常是因为在浏览器环境中使用了 Node.js 的模块系统（如 module.exports 或 require），而浏览器环境并不支持这些 Node.js 的模块系统。

可能的原因及解决方案：

  1. 检查代码中是否使用了 Node.js 的模块系统

    • 如果你的代码中使用了 module.exports 或 require，那么在浏览器环境中运行时会报错。你需要将这些代码替换为 ES6 模块语法（import 和 export）。
    • 例如，将 module.exports = { ... } 替换为 export default { ... }，将 const module = require('module') 替换为 import module from 'module'。

  2. 确保依赖库兼容浏览器环境

    • 如果你使用了某些依赖库，确保这些库是兼容浏览器环境的。有些库可能只在 Node.js 环境中运行，而在浏览器中无法使用。
    • 你可以在 package.json 中检查这些依赖，并确保它们支持浏览器环境。

  3. 区分 SSR 和客户端代码

    • SSR 代码是在 Node.js 环境中运行的，而客户端代码是在浏览器环境中运行的。确保在 SSR 代码中不要使用浏览器特有的 API（如 window、document 等），在客户端代码中不要使用 Node.js 特有的 API（如 module、require 等）。
    • 你可以使用 process.server 或 process.client 来区分当前代码是在服务器端还是客户端运行。

  4. 配置 uni-app 的 SSR 环境

    • 确保你的 uni-app 项目正确配置了 SSR 环境。你可以在 vue.config.js 或 uni.config.js 中检查相关配置。
    • 例如，确保 ssr 选项已启用，并正确配置了 SSR 相关的插件和配置。

  5. 使用 @nuxtjs/module 或 @vue/server-renderer

    • 如果你在 uni-app 中使用 Nuxt.js 或 Vue 3 的 SSR 功能，确保你正确安装了 @nuxtjs/module 或 @vue/server-renderer，并按照官方文档进行配置。

示例代码：

假设你有一个模块 utils.js，它使用了 Node.js 的模块系统：

// utils.js (Node.js 模块系统)
module.exports = {
  add: (a, b) => a + b
};

你需要将其改为 ES6 模块语法：

// utils.js (ES6 模块语法)
export default {
  add: (a, b) => a + b
};

然后在其他文件中使用 import 导入：

// app.vue
import utils from './utils.js';

export default {
  methods: {
    calculate() {
      return utils.add(1, 2);
    }
  }
};
回到顶部