How do I run code locally in Browser, except using cdn links?

[sRect]

I use Vite + React in locally, But get some error, Unable to run successfully.

• package.json:

  {
  "name": "quickjs-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
  "dev": "vite --force",
  "build": "tsc -b && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
  },
  "dependencies": {
  "@hazae41/symbol-dispose-polyfill": "^1.0.2",
  "@jitl/quickjs-ng-wasmfile-release-sync": "^0.29.2",
  "@jitl/quickjs-wasmfile-release-sync": "^0.29.2",
  "@sebastianwessel/quickjs": "^1.3.0",
  "buffer": "^6.0.3",
  "events": "^3.3.0",
  "memfs": "^4.9.3",
  "memfs-browser": "^3.5.10302",
  "path": "^0.12.7",
  "path-browserify": "^1.0.1",
  "process": "^0.11.10",
  "quickjs-emscripten": "^0.29.2",
  "quickjs-emscripten-core": "^0.29.2",
  "rate-limiter-flexible": "^5.0.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "safe-buffer": "^5.2.1",
  "util": "^0.12.5"
  },
  "devDependencies": {
  "@types/react": "^18.3.3",
  "@types/react-dom": "^18.3.0",
  "@typescript-eslint/eslint-plugin": "^7.15.0",
  "@typescript-eslint/parser": "^7.15.0",
  "@vitejs/plugin-react": "^4.3.1",
  "eslint": "^8.57.0",
  "eslint-plugin-react-hooks": "^4.6.2",
  "eslint-plugin-react-refresh": "^0.4.7",
  "typescript": "^5.2.2",
  "vite": "^5.3.4",
  "vite-plugin-dynamic-import": "^1.5.0",
  "vite-plugin-top-level-await": "^1.4.4",
  "vite-plugin-wasm": "^3.3.0"
  }
  }

• App.tsx:

  
  import {useEffect} from "react";
  import "@hazae41/symbol-dispose-polyfill";
  import { quickJS } from "@sebastianwessel/quickjs";
  // import { newVariant, RELEASE_SYNC } from "quickjs-emscripten";
  // import variant from "@jitl/quickjs-wasmfile-release-sync";

function App() { async function run() { // const variant = newVariant(RELEASE_SYNC, { // wasmLocation: new URL("/node_modules/@jitl/quickjs-wasmfile-release-sync/dist/emscripten-module.wasm", import.meta.url).href, // }); // const module = await newQuickJSWASMModuleFromVariant(Promise.resolve(variant)); // const vm = module.newContext(); // console.log("vm:", vm); const {createRuntime} = await quickJS('@jitl/quickjs-wasmfile-release-sync');

const { evalCode } = await createRuntime({
  allowFetch: true,
  allowFs: true, 
  // fetchAdapter: (...params) => fetch(...params),
  env: {
    MY_ENV_VAR: 'env var value',
    getJSON
  },
  mountFs: {
    src: {
      'custom.js': `export const relativeImportFunction = (n)=>'Hello from relative import function,' + n`,
    },
    'fileInRoot.txt': 'Some text content'
  },
})

const result = await evalCode(`
  import { readFileSync } from 'node:fs';
  import { relativeImportFunction } from './custom.js';

  async function getJSON2() {
    let url = 'https://xxx';
    try {
      let response = await fetch(url);
      return await response.json();
    } catch (error) {
      console.log('Request Failed', error);
    }
  }

  const r = readFileSync('./fileInRoot.txt');
  const r2 = relativeImportFunction(env.MY_ENV_VAR);
  const r3 = await getJSON2();

  export default {r, r2, r3};
`);

  console.log(result)

}

useEffect(() => { run(); }, []);

return (

hello

) }

export default App

+ browser concole:

Uncaught (in promise) TypeError: Failed to resolve module specifier '@jitl/quickjs-wasmfile-release-sync' at quickJS (@sebastianwessel_quickjs.js?v=1c57c2d9:16913:34) at run (App.tsx:70:35) at App.tsx:122:5 at commitHookEffectListMount (react-dom_client.js?v=f9f4815c:16915:34) at commitPassiveMountOnFiber (react-dom_client.js?v=f9f4815c:18156:19) at commitPassiveMountEffects_complete (react-dom_client.js?v=f9f4815c:18129:17) at commitPassiveMountEffects_begin (react-dom_client.js?v=f9f4815c:18119:15) at commitPassiveMountEffects (react-dom_client.js?v=f9f4815c:18109:11) at flushPassiveEffectsImpl (react-dom_client.js?v=f9f4815c:19490:11) at flushPassiveEffects (react-dom_client.js?v=f9f4815c:19447:22)

[MarketingPip]

@sRect - see here.

I suggest including this polyfill too - here.

[sRect]

@sRect - see here.

I suggest including this polyfill too - here.

I've added @hazae41/symbol-dispose-polyfill to the above code, But runs with other errors

[sebastianwessel]

Currently, there is a bigger refactoring in progress, which also should avoid the need for polyfill. But it will take some time

https://github.com/sebastianwessel/quickjs/issues/29

[sebastianwessel]

duplicate of #37