search

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

./node_modules/@virgilsecurity/e3kit-browser/browser.es.js Attempted import error: './dist/libfoundation.browser.wasm' does not contain a default export (imported as 'foundationWasm'). #142

Closed berbaroovez closed 1 year ago

berbaroovez commented 3 years ago

Describe the bug

Import error when trying to use 

EThree.initialize(initializeFunction).then(eThree => {

    }).catch(error => {
        // Error handling
        const code = error.code;

    });

Mac Big Sur NextJS 11

mbalyaba commented 3 years ago

Hello @berbaroovez , Please, try to use next config:

const withTM = require('next-transpile-modules')(['@virgilsecurity/e3kit-browser', 'virgil-crypto', '@virgilsecurity/pythia-crypto']);
module.exports = withTM({
  webpack5: false,
  webpack: (config, options) => {
    config.module.rules[config.module.rules.findIndex(rule => rule.oneOf)].oneOf.unshift({
      test: /\.wasm$/,
      type: 'javascript/auto',
      loader: 'file-loader',
      options: {
        outputPath: 'static/wasm/'
      }
    });
    return config;
  }
});

There are also 2 packages that have to be installed next-transpile-modules file-loader

mbalyaba commented 3 years ago

Issue closed due to inactivity. Please reopen if it is still actual.

thecannabisapp commented 1 year ago

For anyone else having this issue, it is now Nov 2022, and I'm using NextJS 12.3.1 with Webpack5 as the bundler. I got e3kit with web assembly .wasm import working following the above suggestion. Here is my next.config.js file for ref.

/** @type {import('next').NextConfig} */

const path = require("path");

const withTM = require("next-transpile-modules")([
  "@virgilsecurity/e3kit-browser",
  "virgil-crypto",
  "@virgilsecurity/pythia-crypto",
]);

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  compiler: {
    removeConsole: {
      exclude: ["error", "debug"],
    },
  },
  async rewrites() {
    return [
      {
        source: "/@:username",
        destination: "/:username",
      },
    ];
  },
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.experiments = {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      backCompat: true,
    };
    config.module.rules[
      config.module.rules.findIndex((rule) => rule.oneOf)
    ].oneOf.unshift({
      test: /\.wasm$/,
      type: "javascript/auto",
      loader: "file-loader",
      options: {
        outputPath: "static/wasm/",
      },
    });

    return config;
  },
};

module.exports = withTM(nextConfig);
thecannabisapp commented 1 year ago

A quick update. While the above config works locally. When I tried to deploy it to Firebase hosting, this resulted in an [ERROR] Could not resolve "pnpapi"

I'm building an E2EE chat app, and the error is blocking me from deploying the app. I'm using firebase-cli 11.16.0 to deploy, and below is the output from my terminal when I try to deploy.

❯ firebase deploy --only hosting
Detected a Next.js codebase. This is an experimental integration, proceed with caution.

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (7/7)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ / (5702 ms)                            192 B           704 kB
├   /_app                                  0 B             263 kB
├ ○ /[username] (5710 ms)                  2.34 kB         706 kB
├ ○ /404                                   183 B           263 kB
├ ○ /channel/[cid] (5626 ms)               328 kB          743 kB
├ ○ /chat (5678 ms)                        719 B           704 kB
└ ○ /contacts (5715 ms)                    2.75 kB         706 kB
+ First Load JS shared by all              283 kB
  ├ chunks/framework-b3802df6cb251587.js   45.5 kB
  ├ chunks/main-75fd11754c169a69.js        35.1 kB
  ├ chunks/pages/_app-d82dd35ec0791859.js  180 kB
  ├ chunks/webpack-d4c7a602324d07a4.js     1.92 kB
  └ css/3dd171819a422d23.css               20.5 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

✘ [ERROR] Could not resolve "pnpapi"

    node_modules/enhanced-resolve/lib/ResolverFactory.js:126:17:
      126 │     return require("pnpapi"); // eslint-disable-line node/no-mis...
          ╵                    ~~~~~~~~

  You can mark the path "pnpapi" as external to exclude it from the bundle,
  which will remove this error. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

Error: An unexpected error has occurred.

I wonder if the above error is related to next-transpile-modules having a dependency on enhanced-resolve 5.10.0 while Webpack 4 is dependent on version 4.5.0...

├─ next-transpile-modules@9.1.0
│  ├─ enhanced-resolve@^5.10.0
├─ webpack@4.46.0
│  ├─ enhanced-resolve@4.5.0

If I force through yarn resolution next-transpile-modules to use enhanced-resolve at 4.5.0, the build goes through, but the channel page with encryption is broken.

Scratch-net commented 1 year ago

@chinesehemp is this happening with the latest v2.5.0 released yesterday (which should also work with webpack 5)?

thecannabisapp commented 1 year ago

@Scratch-net yes, I updated e3kit to 2.5.0 my package.json and my terminal output below for ref.

{
  "name": "thecannabisapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "serve": "firebase serve",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export",
    "emulator": "firebase emulators:start"
  },
  "dependencies": {
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.5",
    "@googlemaps/js-api-loader": "^1.15.1",
    "@mui/icons-material": "^5.10.9",
    "@mui/material": "^5.10.12",
    "@stream-io/stream-chat-css": "^3.7.0",
    "@tanstack/react-query": "^4.14.5",
    "@tanstack/react-query-devtools": "^4.14.5",
    "@virgilsecurity/e3kit-browser": "^2.5.0",
    "autosuggest-highlight": "^3.3.4",
    "date-fns": "^2.29.3",
    "firebase": "^9.13.0",
    "formik": "^2.2.9",
    "framer-motion": "^7.6.5",
    "libphonenumber-js": "^1.10.14",
    "mui-markdown": "^0.5.5",
    "mui-tel-input": "^2.0.4",
    "next": "12.3.1",
    "next-pwa": "^5.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.0.3",
    "react-hot-toast": "^2.4.0",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1",
    "stream-chat": "^8.1.0",
    "stream-chat-react": "^10.4.0",
    "virgil-sdk": "6.1.2",
    "yup": "^0.32.11",
    "yup-phone": "^1.3.2"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/emoji-mart": "^3.0.9",
    "@types/google.maps": "^3.50.5",
    "@types/grecaptcha": "^3.0.4",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "eslint": "8.27.0",
    "eslint-config-next": "12.3.1",
    "file-loader": "^6.2.0",
    "next-transpile-modules": "^9.1.0",
    "sass": "^1.56.0",
    "typescript": "4.8.4"
  },
  "author": "chinesehemp"
}
├─ @virgilsecurity/e3kit-browser@2.5.0
│  ├─ @types/level-js@4.0.2
│  ├─ @virgilsecurity/e3kit-base@2.4.5
│  ├─ @virgilsecurity/pythia-crypto@1.1.3
│  ├─ level-js@^5.0.1
│  ├─ virgil-crypto@4.2.2
│  └─ virgil-sdk@6.1.2

❯ firebase deploy --only hosting
Detected a Next.js codebase. This is an experimental integration, proceed with caution.

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (7/7)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ / (7943 ms)                            192 B           704 kB
├   /_app                                  0 B             263 kB
├ ○ /[username] (8001 ms)                  2.34 kB         706 kB
├ ○ /404                                   183 B           263 kB
├ ○ /channel/[cid] (7797 ms)               328 kB          743 kB
├ ○ /chat (7910 ms)                        719 B           704 kB
└ ○ /contacts (8006 ms)                    2.75 kB         706 kB
+ First Load JS shared by all              283 kB
  ├ chunks/framework-b3802df6cb251587.js   45.5 kB
  ├ chunks/main-75fd11754c169a69.js        35.1 kB
  ├ chunks/pages/_app-d82dd35ec0791859.js  180 kB
  ├ chunks/webpack-a644dd9317b0450b.js     1.92 kB
  └ css/3dd171819a422d23.css               20.5 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

✘ [ERROR] Could not resolve "pnpapi"

    node_modules/enhanced-resolve/lib/ResolverFactory.js:126:17:
      126 │     return require("pnpapi"); // eslint-disable-line node/no-missing-require
          ╵                    ~~~~~~~~

  You can mark the path "pnpapi" as external to exclude it from the bundle, which will
  remove this error. You can also surround this "require" call with a try/catch block to
  handle this failure at run-time instead of bundle-time.

Error: An unexpected error has occurred.

I get the same pnpapi error from enhanced-resolve when deploying to Firebase.

rstp-god commented 1 year ago

Hello @chinesehemp! Problem can be inside e3kit-browser package, because e3kit-base version inside e3kit-browser is 2.4.5 without updated dependencies, it's my mistake, today or tomorrow release a hot fix for this, ty for issue! P.S We do not use webpack 5 in this kit, so i do not know why error can affect by this. After hot fix will test this.

thecannabisapp commented 1 year ago

Thank you, @azirb I look forward to trying out the hotfix when it's released.

rstp-god commented 1 year ago

@chinesehemp Hotfix released, pls checkout mb problem is gone!

thecannabisapp commented 1 year ago

Hi @azirb, thank you for the update. I tried the new 2.5.1 release, but I have the same can't resolve pnpapi error as before when I tried to deploy my nextjs app to firebase. Here's my terminal output for ref.

❯ firebase deploy --only hosting
Detected a Next.js codebase. This is an experimental integration, proceed with caution.

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (7/7)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ / (8361 ms)                            192 B           704 kB
├   /_app                                  0 B             263 kB
├ ○ /[username] (8331 ms)                  2.34 kB         706 kB
├ ○ /404                                   183 B           263 kB
├ ○ /channel/[cid] (8175 ms)               327 kB          742 kB
├ ○ /chat (8345 ms)                        719 B           704 kB
└ ○ /contacts (8337 ms)                    2.75 kB         706 kB
+ First Load JS shared by all              283 kB
  ├ chunks/framework-b3802df6cb251587.js   45.5 kB
  ├ chunks/main-75fd11754c169a69.js        35.1 kB
  ├ chunks/pages/_app-bf21af6d09dfd2e1.js  180 kB
  ├ chunks/webpack-a644dd9317b0450b.js     1.92 kB
  └ css/3dd171819a422d23.css               20.5 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

✘ [ERROR] Could not resolve "pnpapi"

    node_modules/enhanced-resolve/lib/ResolverFactory.js:126:17:
      126 │     return require("pnpapi"); // eslint-disable-line node/no-missing...
          ╵                    ~~~~~~~~

  You can mark the path "pnpapi" as external to exclude it from the bundle, which
  will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

Error: An unexpected error has occurred.

❯ yarn list --pattern  enhanced-resolve
yarn list v1.22.19
├─ enhanced-resolve@5.10.0
└─ webpack@4.46.0
   └─ enhanced-resolve@4.5.0
✨  Done in 0.52s.

❯ yarn list --pattern virgil
yarn list v1.22.19
├─ @virgilsecurity/core-foundation@1.2.1
├─ @virgilsecurity/core-pythia@1.1.0
├─ @virgilsecurity/crypto-types@1.1.1
├─ @virgilsecurity/data-utils@1.0.0
│  └─ @virgilsecurity/crypto-types@1.0.0
├─ @virgilsecurity/e3kit-base@2.5.0
├─ @virgilsecurity/e3kit-browser@2.5.1
├─ @virgilsecurity/init-utils@1.0.0
├─ @virgilsecurity/keyknox@1.0.3
├─ @virgilsecurity/pythia-crypto@1.1.3
├─ @virgilsecurity/sdk-crypto@1.1.1
├─ virgil-crypto@4.2.2
├─ virgil-pythia@1.0.2
└─ virgil-sdk@6.1.2
✨  Done in 0.54s.
rstp-god commented 1 year ago

@chinesehemp Hello! Googled your bug and this problem not inside virgilsecurity package. https://github.com/webpack/enhanced-resolve/issues/263 enhanced-resolve have this bug with webpack 5.4.0, try some answers from issue above!

thecannabisapp commented 1 year ago

Thank you @azirb I will do as you suggest. Appreciate your help!

rstp-god commented 1 year ago

Closing as resolved