how to use Hot-Module-Replacement in webpack?

[wonderfulMan]

i try use webpack，but Hot-Module-Replacement invalid，Please provide an example

[alexsaranin]

Same question. I created vue project from scratch via vue/cli. I installed Pinia, created User store and pasted with code in store/user.ts

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept(acceptHMRUpdate(useAuthStore, import.meta.webpackHot));
}

when I change state, page does not reload. But when I replaced that code in main.ts page fully reloaded.

[alexsaranin]

When I use npm run test:unit, I catch an error

 TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'.

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "inlineSources": true,
  "sourceRoot": "/"
}