英文:
Error using an importmap: "Error while transforming file. See the terminal for more information."
问题
以下是您要翻译的内容：
I am experimenting with script type="importmap" and have an issue that I am sure has a simple answer.
This works:
<html>
<head>
....
<script type="module">
import './webcomponents/lit-test.js';
</script>
</head>
<body>
<lit-test></lit-test>
</body>
</html>
This doesn't:
<html>
<head>
....
<script type="importmap">
{
"imports": {
"lit-test": "./webcomponents/lit-test.js"
}
}
</script>
<script type="module">
import 'lit-test';
</script>
</head>
<body>
<lit-test></lit-test>
</body>
</html>
The error in the browser:
Error while transforming file. See the terminal for more information.
The error in the console:
GET http://localhost:8000/ 500 (Internal Server Error)
Can anyone explain what is incorrect?
lit-test.js
import { css, html, LitElement } from 'lit';
class Lit_test extends LitElement {
render() {
return html` Hello `;
}
}
customElements.define('lit-test', Lit_test);
The terminal:
File structure:
英文:
I am experimenting with script type="importmap" and have an issue that I am sure has a simple answer.
This works:
<html>
<head>
....
<script type="module">
import './webcomponents/lit-test.js';
</script>
</head>
<body>
<lit-test></lit-test>
</body>
</html>
This doesn't:
<html>
<head>
....
<script type="importmap">
{
"imports": {
"lit-test": "./webcomponents/lit-test.js"
}
}
</script>
<script type="module">
import 'lit-test';
</script>
</head>
<body>
<lit-test></lit-test>
</body>
</html>
The error in the browser:
> Error while transforming file. See the terminal for more information.
The error in the console:
> GET http://localhost:8000/ 500 (Internal Server Error)
Can anyone explain what is incorrect?
lit-test.js
import { css, html, LitElement } from 'lit';
class Lit_test extends LitElement {
render() {
return html` Hello `;
}
}
customElements.define('lit-test', Lit_test);
The terminal:
File structure:
答案1
得分: 1
你可能需要安装 @web/dev-server-import-maps 插件，如果你正在使用开发服务器。
安装包:
npm i --save-dev @web/dev-server-import-maps
将插件添加到你的 web-dev-server.config.mjs 或 web-test-runner.config.js 文件中：
import { importMapsPlugin } from '@web/dev-server-import-maps';
export default {
plugins: [importMapsPlugin()],
};
英文:
You might need to install @web/dev-server-import-maps plugin if you are using development server.
Install the package:
npm i --save-dev @web/dev-server-import-maps
Add the plugin to your web-dev-server.config.mjs or web-test-runner.config.js:
import { importMapsPlugin } from '@web/dev-server-import-maps';
export default {
plugins: [importMapsPlugin()],
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论