The issue seems to be in @lit\decorators\property.js. It complains at the same file that e.constructor.createProperty is not a function. I am going to paste the entire code below, please help me find out the details of the errors.
Uncaught TypeError: e.constructor.createProperty is not a function
at property.js:6:682
at property.js:6:768
at Object.decorateElement (property.js:6:776)
at Object.<anonymous> (property.js:6:776)
at Array.forEach (<anonymous>)
at Object.decorateClass (property.js:6:776)
at _decorate (property.js:6:776)
at simple-element.ts:5:27
at app.ts:7:122
My files have the following entries
// babel.config.json
{
"plugins": [
["@babel/plugin-proposal-decorators", {"version": "2023-05"}]
]
}
//package.json
{
"name": "scg-envoy-litelement",
"version": "1.0.0",
"description": "",
"types": "dist/types/index.d.ts",
"author": "Jonathan Pong",
"license": "ISC",
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.8.0",
"lit": "^3.1.1",
"smoothscroll-polyfill": "^0.4.4",
"whatwg-fetch": "^3.6.20"
},
"devDependencies": {
"@babel/core": "^7.23.7",
"@babel/eslint-parser": "^7.23.3",
"@babel/eslint-plugin": "^7.23.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.23.7",
"@babel/plugin-proposal-object-rest-spread": "^7.18.6",
"@babel/plugin-transform-arrow-functions": "^7.23.3",
"@babel/preset-env": "^7.23.8",
"@babel/preset-typescript": "^7.23.3",
"@babel/runtime-corejs3": "^7.23.8",
"@open-wc/eslint-config": "^12.0.3",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "11.1.6",
"@typescript-eslint/eslint-plugin": "^6.18.1",
"@typescript-eslint/parser": "^6.18.1",
"concurrently": "^8.2.2",
"core-js": "^3.35.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-lit": "^1.11.0",
"eslint-plugin-lit-a11y": "^4.1.1",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-wc": "^2.0.4",
"http-server": "^14.1.1",
"picomatch": "^3.0.1",
"rimraf": "^5.0.5",
"rollup": "^4.9.4",
"tslib": "^2.6.2",
"typescript": "^5.3.3"
},
"scripts": {
"inst": "npm install && npm run build:types && npm run build:js",
"clean": "rimraf ./out",
"format": "eslint --ext .ts,.html . --fix",
"lint": "eslint --ext .ts,.html .",
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "rollup -c",
"build": "npm run build:types && npm run build:js",
"rebuild": "npm run clean && npm run build",
"server": "concurrently --kill-others --names tsc,http-server \"http-server\"",
"depcheck": "depcheck"
},
"eslintConfig": {
"extends": [
"@open-wc/eslint-config",
"eslint-config-prettier"
]
},
"prettier": {
"singleQuote": true,
"arrowParens": "avoid"
}
}
//rollup.config.mjs
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';
const extensions = ['.js', '.ts', '.html'];
const prod = false;
function output() {
const output = {
dir: 'dist',
format: 'iife',
sourcemap: true,
};
prod && (output.plugins = [terser()]);
return output;
}
export default {
input: ['src/app.ts'],
strictDeprecations: true,
output: output(),
plugins: [
resolve({ extensions, browser: true }),
commonjs({ sourcemap: true }),
babel({
extensions,
babelHelpers: 'inline',
include: ['src/**/*'],
presets: [
['@babel/preset-typescript'],
[
'@babel/preset-env',
{
targets: { browsers: '> 2%, ie >= 11' },
modules: false,
spec: true,
forceAllTransforms: true,
useBuiltIns: 'usage',
corejs: { version: 3, proposals: false },
},
],
],
plugins: [
['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
['@babel/proposal-class-properties'],
['@babel/proposal-object-rest-spread'],
['@babel/plugin-transform-arrow-functions'],
],
}),
],
};
//tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"allowJs": true,
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"declarationDir": "./dist/types",
"outDir": "./dist/tsc",
"rootDir": "./src",
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"strictPropertyInitialization": false,
"noImplicitReturns": true,
"noImplicitAny": false,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"useDefineForClassFields": false,
"forceConsistentCasingInFileNames": true,
"plugins": [
{
"name": "ts-lit-plugin",
"strict": true
}
]
},
"include": [
"src/app.ts"],
"exclude": [
"node_modules",
"out"
]
}
//app.ts
import '@webcomponents/webcomponentsjs'
import 'core-js/modules/es.global-this'
import 'whatwg-fetch'
import { SimpleElement } from './simple-element'
customElements.define("simple-element", SimpleElement);
let simpleElement;
window["simpleElement"] = () => simpleElement ? simpleElement : simpleElement = document.getElementById("simple-element");
//simple-element.ts
import { html, LitElement } from 'lit';
import { property, customElement } from 'lit/decorators.js';
@customElement("simple-element")
export class SimpleElement extends LitElement {
private _runMode: String = '';
@property({ type: String })
get runMode(){
return this._runMode;
}
set runMode(rMode){
const oldValue = this._runMode;
this._runMode = rMode;
this.requestUpdate("disabled", oldValue);
}
render() {
return html`
<div>
This is from a simple element with param
<h2>${this.runMode}<h2>
</div>
`;
}
}
Could you please look into the details and provide some feedback to me?