search

blocknative / web3-onboard

Client library to onboard users to web3 apps
https://onboard.blocknative.com/
MIT License
831 stars 491 forks source link

SvelteKit+Vite preview error - [ERR_UNSUPPORTED_DIR_IMPORT] ... node_modules/rxjs/operators' is not supported resolving ES modules imported #2074

Closed Elliott-Green closed 6 months ago

Elliott-Green commented 6 months ago

Current Behavior

I have previously been able to build and deploy a Sveltekit project with web3-onboard to vercel in the past and currently have a site live, so I have a working example to reference.

I have started a new project and had some difficulty with running preview on a built project, using the exact same files

I keep getting this error

elliott@EG-MBP ProjName % npm run preview

> preview
> vite preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/elliott/Documents/GitHub/ProjName/node_modules/rxjs/operators' is not supported resolving ES modules imported from /Users/elliott/Documents/GitHub/ProjName/.svelte-kit/output/server/chunks/_layout.js
Did you mean to import rxjs/operators/index.js?
    at finalizeResolution (node:internal/modules/esm/resolve:249:11)
    at moduleResolve (node:internal/modules/esm/resolve:908:10)
    at defaultResolve (node:internal/modules/esm/resolve:1121:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/elliott/Documents/GitHub/ProjName/node_modules/rxjs/operators'
}

So I went back to my other working project and tried the same thing and got the same error.

I am now abroad on a different machine (was PC, now Mac)

vite.config.ts

import { purgeCss } from 'vite-plugin-tailwind-purgecss';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

import inject from '@rollup/plugin-inject';
import nodePolyfills from 'rollup-plugin-polyfill-node';

const MODE = process.env.NODE_ENV;
const development = MODE === 'development';

export default defineConfig({
    plugins: [
        sveltekit(),
        development &&
            nodePolyfills({
                include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js'), 'http', 'crypto']
            }),
        purgeCss()
    ],
    resolve: {
        alias: {
            crypto: 'crypto-browserify',
            stream: 'stream-browserify',
            assert: 'assert'
        }
    },
    build: {
        rollupOptions: {
            external: ['@web3-onboard/*'],
            plugins: [nodePolyfills({ include: ['crypto', 'http'] }), inject({ Buffer: ['buffer', 'Buffer'] })]
        },
        commonjsOptions: {
            transformMixedEsModules: true
        }
    },
    optimizeDeps: {
        exclude: ['@ethersproject/hash', 'wrtc', 'http'],
        include: ['@web3-onboard/core', '@web3-onboard/gas', '@web3-onboard/sequence', 'js-sha3', '@ethersproject/bignumber'],
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            }
        }
    }
});

package.json

{
    "name": "",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write ."
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^25.0.7",
        "@skeletonlabs/skeleton": "2.1.0",
        "@skeletonlabs/tw-plugin": "0.2.0",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.20.4",
        "@tailwindcss/typography": "0.5.10",
        "@types/node": "20.6.3",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "assert": "^2.1.0",
        "autoprefixer": "10.4.15",
        "crypto-browserify": "^3.12.0",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "8.4.30",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "rollup-plugin-polyfill-node": "^0.12.0",
        "stream-browserify": "^3.0.0",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tailwindcss": "3.3.3",
        "tailwindcss-animated": "^1.0.1",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.4.2",
        "vite-plugin-tailwind-purgecss": "0.1.3"
    },
    "type": "module",
    "dependencies": {
        "@floating-ui/dom": "1.5.3",
        "@metamask/jazzicon": "^2.0.0",
        "@web3-onboard/coinbase": "^2.2.6",
        "@web3-onboard/core": "^2.21.2",
        "@web3-onboard/frame": "^2.0.2",
        "@web3-onboard/injected-wallets": "^2.10.8",
        "@web3-onboard/ledger": "^2.5.2",
        "@web3-onboard/trezor": "^2.4.3",
        "@web3-onboard/walletconnect": "^2.5.1",
        "alchemy-sdk": "^2.10.1",
        "bignumber.js": "^9.1.2",
        "buffer": "^6.0.3",
        "ethers": "^5.7.2",
        "intl-messageformat": "^10.5.4",
        "rollup-plugin-node-polyfills": "^0.2.1",
        "svelte-ethers-store": "^2.6.1",
        "svelte-i18n": "^3.7.4",
        "svelte-meta-tags": "^3.0.4"
    }
}

Expected Behavior

npm run preview to not error when polyfills and other expected config are present and correct

Steps To Reproduce

  1. Pull https://github.com/blocknative/web3-onboard
  2. cd examples/with-sveltekit
  3. run npm i
  4. receive 2 errors that are resolved with installing them [commonjs--resolver] Could not load crypto-browserify: ENOENT: no such file or directory, open 'crypto-browserify' [commonjs] Could not load stream-browserify: ENOENT: no such file or directory, open 'stream-browserify'
  5. run npm run build && npm run preview and it works.

I notice the SK example does not have the fixes included here? https://onboard.blocknative.com/docs/modules/core#sveltekit-vite

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

2.21.2

Node Version

20.10.0

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Anything else?

I think the error is upstream because of the error Error [ERR_UNSUPPORTED_DIR_IMPORT] ... node_modules/rxjs/operators' is not supported resolving ES modules imported ...

Though apart from the Mac/PC change I don't know why my other project is not previewing like it used to.

Sanity Check

Elliott-Green commented 6 months ago

I don't really know what happened, but I had to fork all of the demo repos again and merge them together and then add my custom imports on it so it works.

If anyone else ends up here, this was my package.json that manages to resolve, if that even was the issue.

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check . && eslint .",
    "format": "prettier --write ."
  },
  "devDependencies": {
    "@skeletonlabs/skeleton": "2.9.0",
    "@skeletonlabs/tw-plugin": "0.3.1",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@tailwindcss/forms": "0.5.7",
    "@tailwindcss/typography": "0.5.10",
    "@types/cookie": "^0.5.4",
    "@types/eslint": "8.56.0",
    "@types/node": "20.11.24",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "autoprefixer": "10.4.18",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.35.1",
    "postcss": "8.4.35",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "rollup-plugin-polyfill-node": "^0.12.0",
    "svelte": "^4.2.7",
    "svelte-check": "^3.6.6",
    "svelte-preprocess": "^5.1.3",
    "tailwindcss": "3.4.1",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.0.3",
    "vite-plugin-tailwind-purgecss": "0.2.0"
  },
  "type": "module",
  "dependencies": {
    "@floating-ui/dom": "1.6.3",
    "@fontsource/fira-mono": "^4.5.10",
    "@web3-onboard/coinbase": "^2.2.6",
    "@web3-onboard/core": "^2.21.2",
    "@web3-onboard/frame": "^2.0.2",
    "@web3-onboard/injected-wallets": "^2.10.11",
    "@web3-onboard/ledger": "^2.5.2",
    "@web3-onboard/trezor": "^2.4.3",
    "@web3-onboard/walletconnect": "^2.5.3",
    "alchemy-sdk": "^3.1.2",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "highlight.js": "11.9.0",
    "intl-messageformat": "^10.5.11",
    "lightweight-charts": "^4.1.3",
    "stream-browserify": "^3.0.0",
    "svelte-ethers-store": "^2.6.1",
    "svelte-lightweight-charts": "^2.2.0",
    "svelte-meta-tags": "^3.1.1"
  }
}