OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Import module ts: Uncaught TypeError: Failed to resolve module specifier "html2canvas". Relative references must start with either "/", "./", or "../"

  • Thread starter Thread starter Bromanius
  • Start date Start date
B

Bromanius

Guest
This is my first time doing a webapplication and therefore my first time using typescript / javascript / node modules. I'm using Webstorm and vanilla html, css and typescript.

Everything went fine so far but now i'm trying to import the "html2canvas" library. I installed it with npm install html2canvas. The installation seemed to have worked and my typescript file finds the library and its functions. But after compiling the files and opening the html, i always get this error message: Uncaught TypeError: Failed to resolve module specifier "html2canvas". Relative references must start with either "/", "./", or "../". (fileManager.js:1:25)

Since i'm not completely sure how npm works in the first place, i'm sure this is a silly mistake and someone can help me! :) I will now provide you with some details:

This is the first line of the typescript and also of the compiled javascript file: import html2canvas from "html2canvas"

This is my project hierarchy: Project Hierarchy

This is my package.json:

Code:
{
  "name": "parsonify",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "html2canvas": "^1.4.1"
  }
}

This is my tsconfig.json:

Code:
{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "moduleResolution": "node",
    "sourceMap": true,
    "esModuleInterop": true,
    "outDir": "frontend/build"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "frontend/src/scripts/**/*"
  ]
}

I already tried reinstalling the library and compiling my ts-files by console.

<p>This is my first time doing a webapplication and therefore my first time using typescript / javascript / node modules. I'm using Webstorm and vanilla html, css and typescript.</p>
<p>Everything went fine so far but now i'm trying to import the "html2canvas" library. I installed it with <strong>npm install html2canvas</strong>. The installation seemed to have worked and my typescript file finds the library and its functions.
But after compiling the files and opening the html, i always get this error message: <strong>Uncaught TypeError: Failed to resolve module specifier "html2canvas". Relative references must start with either "/", "./", or "../". (fileManager.js:1:25)</strong></p>
<p>Since i'm not completely sure how npm works in the first place, i'm sure this is a silly mistake and someone can help me! :)
I will now provide you with some details:</p>
<p>This is the first line of the typescript and also of the compiled javascript file: <code>import html2canvas from "html2canvas"</code></p>
<p>This is my project hierarchy:
<a href="https://i.sstatic.net/530mqTzH.png" rel="nofollow noreferrer">Project Hierarchy</a></p>
<p>This is my package.json:</p>
<pre><code>{
"name": "parsonify",
"version": "1.0.0",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"html2canvas": "^1.4.1"
}
}
</code></pre>
<p>This is my tsconfig.json:</p>
<pre><code>{
"compilerOptions": {
"module": "ES2020",
"target": "ES2020",
"moduleResolution": "node",
"sourceMap": true,
"esModuleInterop": true,
"outDir": "frontend/build"
},
"exclude": [
"node_modules"
],
"include": [
"frontend/src/scripts/**/*"
]
}
</code></pre>
<p>I already tried reinstalling the library and compiling my ts-files by console.</p>
 

Latest posts

D
Replies
0
Views
1
Domantas Giedraitis
D
Top