1.0.10 Hydration bug

[zhonguanping]

Version 1.0.9 works normally, but the latest version 1.0.10 has a warning

{ "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "dependencies": { "@element-plus/nuxt": "^1.0.10", "dayjs": "^1.11.13", "element-plus": "^2.8.2", "lodash-unified": "^1.0.3", "nuxt": "^3.13.0", "vue": "latest", "vue-router": "latest" }, "packageManager": "[email protected]+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf" }

// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: ['@element-plus/nuxt'], elementPlus: { injectionID: { prefix: 1111, current: 0 } }, compatibilityDate: '2024-04-03', devtools: { enabled: true } })

[tolking]

You can try emptying the cache and restarting

[zhonguanping]

We have rebuilt a new testing project and there are no issues with it

[Jungzl]

I encounter this issue with all up-to-date deps

{
  "name": "@element-plus/nuxt",
  "version": "1.0.10",
  "description": "Element Plus module for Nuxt",
  "packageManager": "[email protected]",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/module.mjs",
      "require": "./dist/module.cjs"
    }
  },
  "main": "./dist/module.cjs",
  "types": "./dist/types.d.ts",
  "files": [
    "dist"
  ],
  "keywords": [
    "element-plus",
    "nuxt"
  ],
  "homepage": "https://github.com/element-plus/element-plus-nuxt#readme",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/element-plus/element-plus-nuxt.git"
  },
  "bugs": {
    "url": "https://github.com/element-plus/element-plus-nuxt/issues"
  },
  "scripts": {
    "build": "npm run dev:prepare && nuxt-module-build build",
    "dev": "nuxi dev playground",
    "dev:build": "nuxi build playground",
    "dev:start": "node playground/.output/server/index.mjs",
    "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
    "lint": "eslint . --fix --ext .ts,.vue,.js",
    "lint:test": "eslint . --ext .ts,.vue,.js --max-warnings 0"
  },
  "peerDependencies": {
    "@element-plus/icons-vue": ">=0.2.6",
    "element-plus": ">=2"
  },
  "dependencies": {
    "@nuxt/kit": "^3.13.2",
    "magic-string": "^0.30.11",
    "unplugin": "^1.14.1"
  },
  "devDependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@nuxt/module-builder": "^0.8.4",
    "@nuxt/schema": "^3.13.2",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@types/node": "^22.5.5",
    "element-plus": "^2.8.3",
    "eslint": "^8.57.0",
    "nuxi": "^3.13.2",
    "nuxt": "^3.13.2",
    "typescript": "^5.6.2",
    "vue": "^3.5.6"
  }
}

Below are warnings threw by running this project.

[tolking]

Currently, there is still a hydration issue between the Calendar component and the Steps component.

[tolking]

I found that after updating nuxt to 3.13.2, there will be a bunch of hydration errors related to IDs.

Currently, it is possible to avoid updating the nuxt version

[Jungzl]

Might be something related to useId() introduced in [email protected]+ ? EP has its own useId() implementation.