如何解决“模块解析失败:在 NextJS 中使用 lit 组件时出现意外字符‘@’”
我尝试在我的 NextJS 项目中导入一个 lit 组件。
这是我的组件:
import {html,css,LitElement} from 'lit';
import {customElement} from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends LitElement {
static get styles() {
...
}
render () {
return html`
<div>Hello World !</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}
这是我的 NextJS 元素:
import '.../my-element';
function HomePage() {
return (
<div>
<my-element label="coucou"/>
<div>coucou</div>
</div>
);
}
export default HomePage
输出如下:
.../my-element.ts
Module parse Failed: Unexpected character '@' (20:0)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> @customElement('my-element')
| export class MyElement extends LitElement {
| static get styles() {
我是 NextJS 和 React 的新手。 这真的是 Webpack 问题还是我应该以某种方式修复我的元素?
解决方法
你需要确保你有这些 babel 插件设置:
- @babel/plugin-proposal-decorators。
- @babel/plugin-proposal-class-properties
plugins = [
'@babel/plugin-proposal-class-properties',['@babel/plugin-proposal-decorators',{decoratorsBeforeExport: true}],];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。