nuxt: This relative module was not found: ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue

Versions

  • nuxt: v2.14.4
  • node: v12.18.3
  • win10 1909 x64

Reproduction

Additional Details

Steps to reproduce

yarn dev after install success

What is Expected?

i hope its run success!

What is actually happening?

× Server   Compiled with some errors in 307.47ms  
× Client   Compiled with some errors in 549.19ms  
× Server   Compiled with some errors in 307.47ms    
ERROR  Failed to compile with 1 errors  
This relative module was not found:   
* ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue

but i am remove “lang=ts” from “<script lang='ts'>” of pages/index.vue , its ok!!! but i am already install typescript global! package.json

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxt/content": "^1.5.0",
    "@nuxt/typescript-runtime": "^1.0.0",
    "@nuxtjs/axios": "^5.12.0",
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "ant-design-vue": "^1.6.4",
    "nuxt": "^2.14.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.0",
    "@nuxt/typescript-build": "^2.0.2",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-config-typescript": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "eslint": "^7.5.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^4.2.5",
    "jest": "^26.1.0",
    "lint-staged": "^10.2.11",
    "prettier": "^2.0.5",
    "stylelint": "^13.6.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0",
    "ts-jest": "^26.1.3",
    "vue-jest": "^3.0.4"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 4
  • Comments: 22 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Hello guys, i’m having the same problem

Every project created with TS happens this… Does anyone know how to solve it?

image

image

I’m having the same issue

I fixed it by following these steps:

npm i -D @nuxt/typescript-runtime@2.0.0 npm i -D @nuxt/typescript-build@2.0.0 rm -rf node_modules npm i npm run dev

After doing this, the server and client compiled without any issues.

Just install @nuxt/typescript-runtime like so: yarn add @nuxt/typescript-runtime --dev

@nuxt/typescript-runtime is installed in dependencies when i am install nuxt

please look at the one above package.json

Ah, sry, my bad. But it seems like outdated for me, try to upgrade it to “@nuxt/typescript-runtime”: “^2.0.0”,

Try using yarn resolutions or npm overrides to ensure you have only one TypeScript version installed in your project.

Running the same installation today:

{
  "name": "poc",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/axios": "^5.13.6",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0"
  }
}

but with updated typescript version:

$ tsc --version
Version 4.5.5

Seems to have resolve the issue.

I’m facing the same issue:

{
  "name": "poc",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/axios": "^5.13.6",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxt/typescript-runtime":"^2.1.0"
  }
}

…and I downgraded typescript to the required version for the dev dependencies:

$ tsc --version
Version 4.2.4

and still get the error

ERROR  Failed to compile with 1 errors                                                                                                                              friendly-errors 12:22:39

This relative module was not found:                                                                                                                                  friendly-errors 12:22:39
                                                                                                                                                                     friendly-errors 12:22:39
* ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue

Any other suggestions for how to fix this?

Yes, this is an issue with the wrong version of @nuxt/typescript-runtime being required. It depends on TypeScript 3.9, but the latest @nuxt/typescript-build depends on TypeScript 4.0.

The fix has already been merged but not yet released: https://github.com/nuxt/create-nuxt-app/pull/599

Try using yarn resolutions or npm overrides to ensure you have only one TypeScript version installed in your project.

How would we go about doing this please?

Having the same issue as other’s above from fresh installs

just add a key in your package.json, like so:

{
  "dependencies": { ... },
  "resolutions": {
    "typescript": "*"
  }

This will ensure that only 1 version of typescript is installed.

But I’m not exactly sure how that is achieved. Eg: in my case, @nuxt/typescript-build has "typescript": "~4.2", and I installed "typescript": "^4.8.2" in my devdependencies. After adding the above resolutions, yarn gives the final version as 4.8.2, which is not right if we are to follow @nuxt/typescript-build.

@JeffJassky You should likely no longer need @nuxt/typescript-runtime. If you are encountering this issue and need help, please do open a discussion with a minimal reproduction - it would be easier to help then. I’d have lots of questions, like what version of typescript you have installed (try yarn why typescript to find out), and a repro makes it easy to investigate.