VirgilSecurity / virgil-e3kit-js

E3Kit is a security framework that simplifies work with Virgil services and presents the easiest way to add full end-to-end security to your chat application to become HIPAA and GDPR compliant and more.
https://virgilsecurity.com/e3kit/
BSD 3-Clause "New" or "Revised" License
58 stars 19 forks source link

Version 3.0.6 isn't compatible with Vite 5.3.5 #177

Open thecannabisapp opened 2 months ago

thecannabisapp commented 2 months ago

Describe the bug Trying to migrate my project from webpack 5 to vite 5 using vite-plugin-wasm but getting Could not resolve "a" when in dev mode and Rollup failed to resolve import "a" when running build.

To Reproduce

Here's a sandbox minimal reproduction: https://stackblitz.com/edit/vitejs-vite-jruc2f

Steps to reproduce the behavior:

  1. Run yarn create vite vite-react-app --template react-ts to create a fresh vite project using react and typscript template
  2. Add yarn add @virgilsecurity/e3kit-browser and yarn add -D vite-plugin-wasm to the project.
  3. Edit App.tsx by adding the following code to import e3kit and initialise EThree.
    
    import { EThree } from "@virgilsecurity/e3kit-browser";

function App() { const initializeEThree = async () => { const e = await EThree.initialize(() => Promise.resolve("")); console.log(e); }; initializeEThree();

return <></>; }

export default App;

4. Edit `vite-config.ts` with

import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import wasm from "vite-plugin-wasm";

// https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), wasm()], });

6. Run `yarn dev` or `yarn build`
7. See error for `yarn build`

yarn build  2m 22s  20.9.0 yarn run v1.22.22 $ tsc -b && vite build --debug vite:config bundled config file loaded in 24.77ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:react-babel', vite:config 'vite:react-refresh', vite:config 'vite-plugin-wasm', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: { onwarn: [Function: onwarn] }, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true }, vite:config cssMinify: true vite:config }, vite:config esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined }, vite:config optimizeDeps: { vite:config holdUntilCrawlEnd: true, vite:config esbuildOptions: { vite:config preserveSymlinks: false, vite:config jsx: 'automatic', vite:config plugins: [Array], vite:config target: 'esnext' vite:config }, vite:config include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ] vite:config }, vite:config resolve: { vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], vite:config conditions: [], vite:config extensions: [ vite:config '.mjs', '.js', vite:config '.mts', '.ts', vite:config '.jsx', '.tsx', vite:config '.json' vite:config ], vite:config dedupe: [ 'react', 'react-dom' ], vite:config preserveSymlinks: false, vite:config alias: [ [Object], [Object] ] vite:config }, vite:config configFile: '/Users/Dev/vite-react-app/vite.config.ts', vite:config configFileDependencies: [ '/Users/Dev/vite-react-app/vite.config.ts' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config build: {} vite:config }, vite:config root: '/Users/Dev/vite-react-app', vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: '/Users/Dev/vite-react-app/public', vite:config cacheDir: '/Users/Dev/vite-react-app/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config ssr: { vite:config target: 'node', vite:config optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] } vite:config }, vite:config isWorker: false, vite:config mainConfig: null, vite:config bundleChain: [], vite:config isProduction: true, vite:config css: { lightningcss: undefined }, vite:config server: { vite:config preTransformRequests: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules$1], vite:config middlewareMode: false, vite:config fs: { vite:config strict: true, vite:config allow: [Array], vite:config deny: [Array], vite:config cachedChecks: undefined vite:config } vite:config }, vite:config preview: { vite:config port: undefined, vite:config strictPort: undefined, vite:config host: undefined, vite:config https: undefined, vite:config open: undefined, vite:config proxy: undefined, vite:config cors: undefined, vite:config headers: undefined vite:config }, vite:config envDir: '/Users/Dev/vite-react-app', vite:config env: { BASEURL: '/', MODE: 'production', DEV: false, PROD: true }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(1) { vite:config 'fnpd/Users/Dev/vite-react-app' => { vite:config dir: '/Users/Dev/vite-react-app', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +24ms vite v5.3.5 building for production... ✓ 20 modules transformed. x Build failed in 259ms error during build: [vite]: Rollup failed to resolve import "a" from "/Users/Dev/vite-react-app/node_modules/@virgilsecurity/e3kit-browser/dist/libpythia.browser.wasm". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external at viteWarn (file:///Users/Dev/vite-react-app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:65265:17) at onwarn (file:///Users/Dev/vite-react-app/node_modules/@vitejs/plugin-react/dist/index.mjs:266:9) at onRollupWarning (file:///Users/Dev/vite-react-app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:65295:5) at onwarn (file:///Users/Dev/vite-react-app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:64960:7) at file:///Users/Dev/vite-react-app/node_modules/rollup/dist/es/shared/node-entry.js:18625:13 at Object.logger [as onLog] (file:///Users/Dev/vite-react-app/node_modules/rollup/dist/es/shared/node-entry.js:20280:9) at ModuleLoader.handleInvalidResolvedId (file:///Users/Dev/vite-react-app/node_modules/rollup/dist/es/shared/node-entry.js:19215:26) at file:///Users/Dev/vite-react-app/node_modules/rollup/dist/es/shared/node-entry.js:19173:26 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


Error for `yarn dev`

VITE v5.3.5 ready in 159 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help ✘ [ERROR] Could not resolve "a"

vite-plugin-wasm-namespace:/Users/Dev/vite-react-app/node_modules/@virgilsecurity/e3kit-browser/dist/libpythia.browser.wasm:43:935:
  43 │ ..._0_26, B as __vite__wasmImport_0_27, C as __vite__wasmImport_0_28, D as __vite__wasmImport_0_29, E as __vite__wasmImport_0_30 } from "a";
     ╵                                                                                                                                         ~~~

You can mark the path "a" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "a"

vite-plugin-wasm-namespace:/Users/Dev/vite-react-app/node_modules/@virgilsecurity/e3kit-browser/dist/libfoundation.browser.wasm:43:455:
  43 │ ..._0_10, l as __vite__wasmImport_0_11, m as __vite__wasmImport_0_12, n as __vite__wasmImport_0_13, o as __vite__wasmImport_0_14 } from "a";
     ╵                                                                                                                                         ~~~

You can mark the path "a" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.



**Expected behavior**
No errors and the EThree client initialising.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
 - OS: MacOS 14
 - Browser Chrome 124