Thiết kế website giá rẻ

Question

I am building frontend web app using lit framework and mobx, lit-mobx for state management. I am getting ‘Uncaught ReferenceError: process is not defined’ if I try to use observable property from mobx.

index.html

<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <title><Overview</title>
    <script src="./index.js"></script>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/lit/polyfill-support.js"></script>
   
    <script type="module" src="../AppRoot.js"></script>
    <style>
      p {
        border: solid 1px blue;
        padding: 8px;
      }

    </style>
  </head>
  <body style="margin:0;">
    <style>
      html {
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
      }
    </style>
    <sp-theme scale="large" color="light  ">
      <div>"helloWorld"</div>
      <root-ui></root-ui>
    </sp-theme>
  </body>
</html>

AppRoot.ts

import { RegisterComponents } from './RegisterComponents.js';


export class AppRoot {

    init(){
        new RegisterComponents().init();
        //storeProvider.rootStore = new RootStore();
    }
}

new AppRoot().init();

RootUI.ts

import { rootStore } from "../../../stores/RootStore";

export class RootUI extends LitElement {
    static readonly TAG_NAME = "root-ui";

override render() {
        rootStore.init();
}

declare global {
    interface HTMLElementTagNameMap {
      'root-ui': RootUI;
    }
  }

RootStore.ts

import { observable } from "mobx";

export class RootStore {

   @observable private _initialized = false;

    constructor() {
        console.log("in rootstore");
    }

    init() {
        console.log("in rootstore init", this._initialized);
    }
}

const rootStore = new RootStore();
export { rootStore };

If I remove @observable then everything works fine. I am assuming there is some configuration related issue with mobx, I am not able to figure out. I also tried to set the below config in index.ts but it didn’t wokr.

import { configure } from 'mobx';

configure({
    isolateGlobalState: true,
    // We should only be able to update observable values via actions
    enforceActions: "observed"
});

package.json

{
  "name": "@lit/lit-starter-ts",
  "private": true,
  "version": "2.0.1",
  "description": "A simple web component",
  "main": "Homepage.js",
  "module": "Homepage.js",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
    "lint:eslint": "eslint 'src/**/*.ts'",
    "lint:lit-analyzer": "lit-analyzer",
    "format": "prettier "**/*.{cjs,html,js,json,md,ts}" --ignore-path ./.eslintignore --write",
    "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
    "docs:clean": "rimraf docs",
    "docs:gen": "eleventy --config=.eleventy.cjs",
    "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
    "docs:build": "rollup -c --file docs/my-element.bundled.js",
    "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
    "docs:serve": "wds --root-dir=docs --node-resolve --watch",
    "analyze": "cem analyze --litelement --globs "src/**/*.ts"",
    "analyze:watch": "cem analyze --litelement --globs "src/**/*.ts" --watch",
    "serve": "wds --watch",
    "serve:prod": "MODE=prod npm run serve",
    "test": "npm run test:dev && npm run test:prod",
    "test:dev": "wtr",
    "test:watch": "wtr --watch",
    "test:prod": "MODE=prod wtr",
    "test:prod:watch": "MODE=prod wtr --watch",
    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
  },
  "keywords": [
    "web-components",
    "lit-element",
    "typescript",
    "lit"
  ],
  "author": "Google LLC",
  "license": "BSD-3-Clause",
  "dependencies": {
    "@adobe/lit-mobx": "2.0.0",
    "@spectrum-web-components/button": "^0.42.5",
    "@spectrum-web-components/radio": "^0.42.5",
    "@spectrum-web-components/theme": "^0.42.5",
    "lit": "2.7.4",
    "mobx": "6.1.7"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.1",
    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
    "@custom-elements-manifest/analyzer": "^0.6.3",
    "@open-wc/testing": "^3.1.5",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^5.0.2",
    "@typescript-eslint/eslint-plugin": "^5.25.0",
    "@typescript-eslint/parser": "^5.25.0",
    "@web/dev-server": "^0.1.31",
    "@web/dev-server-legacy": "^1.0.0",
    "@web/test-runner": "^0.15.0",
    "@web/test-runner-playwright": "^0.9.0",
    "@webcomponents/webcomponentsjs": "^2.8.0",
    "eslint": "^8.15.0",
    "lit-analyzer": "^1.2.1",
    "prettier": "^2.6.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.73.0",
    "rollup-plugin-summary": "^1.4.3",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "~5.3.3"
  },
  "customElements": "custom-elements.json"
}

Any help will be really appreciated.

Thiết kế website giá rẻ

Danh mục

Lit Uncaught ReferenceError: process is not defined when using mobx