ERR_REQUIRE_ESM: require() not supported

[sdegasparo]

I am currently updating the web application from vue 2 to vue 3, but I can't get any further as the app can no longer be started because I get the following error message.

Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules\strip-ansi\index.js from node_modules@vue\cli-shared-utils\lib\logger.js not supported. Instead change the require of index.js in node_modules@vue\cli-shared-utils\lib\logger.js to a dynamic import() which is available in all CommonJS modules.

Found out that you no longer use require() but import. However, this is an external package.

How can I fix this?

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/styles/_variables.scss"; @import "@/styles/_base.scss";'
      }
    }
  },
  configureWebpack: {
    devtool: 'source-map'
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": ".",
    "allowJs": true,
    "types": [
      "jest",
      "webpack-env",
      "vuex-pathify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "pdfmake/**/*.js"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build-stage": "vue-cli-service build --mode stage",
    "build": "vue-cli-service build",
    "test:unit": "jest",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "-": "0.0.1",
    "@tailwindcss/postcss7-compat": "2.0.2",
    "@types/ol": "^6.5.0",
    "@types/openlayers": "^4.6.22",
    "@types/prosemirror-history": "^1.0.1",
    "autoprefixer": "^9",
    "core-js": "^3.6.4",
    "html-to-pdfmake": "^2.1.0",
    "jspdf": "^2.0.0",
    "keycloak-js": "^12.0.4",
    "latex.js": "^0.12.6",
    "localforage": "^1.9.0",
    "ol": "^5.3.3",
    "ol-ext": "^3.2.30",
    "ol-map-screenshot": "^1.0.1",
    "pdfmake": "^0.1.68",
    "postcss": "^7",
    "request": "^2.88.2",
    "request-promise-native": "^1.0.9",
    "sleep-ts": "^0.1.1",
    "tailwindcss": "npm:@tailwindcss/[email protected]",
    "texlive": "^1.2.0",
    "ts-md5": "^1.3.1",
    "uni-axios-ts": "^1.0.3",
    "vue": "3.2.13",
    "vue-burger-menu": "^2.0.5",
    "vue-router": "4.0.0",
    "vuex": "4.0.2",
    "vuex-pathify": "3.0.0-beta",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@hanreev/types-ol": "^3.5.1",
    "@types/jest": "^26.0.13",
    "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@^1.0.0",
    "@types/pdfmake": "^0.1.15",
    "@types/request": "^2.48.12",
    "@types/request-promise-native": "^1.0.21",
    "@typescript-eslint/eslint-plugin": "6.10.0",
    "@typescript-eslint/parser": "6.10.0",
    "@vue/cli-plugin-babel": "5.0.8",
    "@vue/cli-plugin-e2e-cypress": "5.0.8",
    "@vue/cli-plugin-eslint": "5.0.8",
    "@vue/cli-plugin-router": "5.0.8",
    "@vue/cli-plugin-typescript": "5.0.8",
    "@vue/cli-plugin-vuex": "5.0.8",
    "@vue/cli-service": "5.0.8",
    "@vue/cli-shared-utils": "5.0.8",
    "@vue/compiler-sfc": "^3.1.0",
    "@vue/eslint-config-typescript": "12.0.0",
    "@vue/test-utils": "2.4.1",
    "axe-core": "^3.5.5",
    "babel-core": "^7.0.0-bridge.0",
    "eslint": "8.53.0",
    "eslint-plugin-vue": "9.18.1",
    "mock-local-storage": "^1.1.24",
    "prettier": "^1.19.1",
    "sass": "1.69.5",
    "sass-loader": "^8.0.2",
    "typescript": "5.2.2",
    "vue-axe": "^2.4.1",
    "vue-cli-plugin-tailwind": "3.0.0",
    "vue-jest": "4.0.1"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts",
      "vue"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest",
      ".*\\.(vue)$": "vue-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ]
  }

[sdegasparo]

Could fix it by updating all dependencies and delete yarn.lock and reinstall the dependencies.

[NielRodrigues]

Thank you, man!!