using vue-dapp with nuxt3 error

``/Users/jevan/nuxt3-app/node_modules/@ethersproject/basex/lib.esm/index.js:40` import { arrayify } from “@ethersproject/bytes”; ^^^^^^

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loader:1065:27) at Object.Module._extensions…js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29) at ModuleJob.run (node:internal/modules/esm/module_job:185:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:281:24) [vite dev] Error loading external “/Users/jevan/nuxt3-app/node_modules/@ethersproject/basex/lib.esm/index.js”. at file://./.nuxt/dist/server/server.mjs:12284:286
at async instantiateModule (file://./.nuxt/dist/server/server.mjs:21383:3) m.default is not a function at file://./.nuxt/dist/server/server.mjs:10:126
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async renderToString (file://./node_modules/vue-bundle-renderer/dist/index.mjs:247:19)
at async renderMiddleware (file://./.nuxt/nitro/index.mjs:191:20)
at async handle (file://./node_modules/h3/dist/index.mjs:601:19) `

[coxlr]

I wasn’t able to get this working with Vite, but managed to get to it working using webpack. There is probably a better way to do this, but for anyone else that is trying to use nuxt3 here is my current set up.

These are the dependencies:

  "devDependencies": {
    "buffer": "^6.0.3",
    "nuxt": "3.0.0-rc.1",
    "process": "^0.11.10"
  },
  "dependencies": {
    "@nuxt/webpack-builder": "^3.0.0-rc.1",
    "assert": "^2.0.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "vue-dapp": "^0.4.8"
  }

This is the nuxt.config.js

import { defineNuxtConfig } from "nuxt";

import { Buffer } from "buffer";
const webpack = require("webpack");

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  builder: "webpack",
  hooks: {
    "webpack:config"(configs) {
      configs[0].resolve.fallback = {
        assert: require.resolve("assert/"),
        stream: require.resolve("stream-browserify"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        os: require.resolve("os-browserify/browser"),
        url: require.resolve("url/"),
      };
      configs[0].plugins.push(
        new webpack.ProvidePlugin({
          process: "process/browser",
        })
      );
      configs[0].plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
        })
      );
    },
  },
});

[chnejohnson]

Added in the documentaion, @coxlr thank you a lot!