I'm currently navigating the world of TypeScript and attempting to incorporate a module that is imported from a node module. I have chosen not to utilize webpack or any other build tools in order to maintain simplicity and clarity.
Here is the structure of my project:
/node_modules -- contains node modules I want to import in main.ts
/scripts/ts/main.ts
/scripts/main.js -- the transpiled main.ts file
/index.html -- includes the module script tag for scripts/main.js
/package.json
/tsconfig.json
This is what my tsconfig.json looks like:
{
"compilerOptions": {
"target": "ES6",
"module": "ES2015",
"strict": true,
"forceConsistentCasingInFileNames": true,
"outDir": "scripts",
"moduleResolution": "Node",
"experimentalDecorators": true
},
"$schema": "https://json.schemastore.org/tsconfig",
"exclude": [],
"include": [
"scripts/ts/**/*"
]
}
The imports in my main.ts file are as follows:
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
Although the main.ts file is successfully transpiled and main.js is loaded without issues, an error is encountered:
Uncaught TypeError: Failed to resolve module specifier "lit". Relative references must start with either "/", "./", or "../".
The import statements remain unchanged after transpilation. It appears that the problem lies in the incorrect module path: The browser is unaware that "lit" can be found in "node_modules/lit". Attempting to manually adjust the path in the transpiled file to ../node_modules/lit/index.js results in another error:
Uncaught TypeError: Failed to resolve module specifier "@lit/reactive-element". Relative references must start with either "/", "./", or "../".
This may indicate that there are interdependencies among different lit modules causing further complications in the hierarchy. Essentially, my import paths are not transpiled correctly and I am at a loss on how to proceed. Any assistance would be greatly appreciated!