search

ipfs / js-ipfs

IPFS implementation in JavaScript
https://js.ipfs.tech
Other
7.44k stars 1.25k forks source link

ipfs-http-client is not compatible with vite #4091

Closed xxxxj-up closed 2 years ago

xxxxj-up commented 2 years ago

ipfs-http-client is not compatible with vite Vite is a front-end development and construction tool It's so fast but ipfs-http-client requires esbuild so ipfs-http-client is not compatible with vite I hop you can finish the compatible with vite

welcome[bot] commented 2 years ago

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review. In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment. Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

Finally, remember to use https://discuss.ipfs.io if you just need general support.

achingbrain commented 2 years ago

Could you give a bit more context please, how does ipfs-http-client require esbuild?

A small GitHub repo that demonstrates the problem you are seeing would be very helpful.

owklama commented 2 years ago

Hey, I have a Web3 project that includes multiple pages and I use Vite and React.js. One of the project sections is an NFT Marketplace that requires ipfs-http-client usage, For some reason, each time I try to create a connection I get a different type error. I'm not too experienced with webpack configuration and stuff but I've seen couple of threads of Vite having a hard time with ipfs-http-client

Let me know if any other logs would be helpful !

Component

import { create } from "ipfs-http-client";

const NewAsset = () => {
  // connect using a URL
  const client = create("http://127.0.0.1:5002");
}

TypeError

Uncaught TypeError: require_get3(...) is not a function
    at module2.exports (index.js:7:8)
    at create2 (index.js:31:10)
    at NewAsset (NewAsset.jsx:19:18)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)

package.json

{
  "name": "krypt",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@honkhonk/vite-plugin-svgr": "^1.1.0",
    "@metamask/detect-provider": "^1.2.0",
    "@nomiclabs/hardhat-ethers": "^2.0.6",
    "@nomiclabs/hardhat-waffle": "^2.0.3",
    "@openzeppelin/contracts": "^4.6.0",
    "@reduxjs/toolkit": "^1.7.1",
    "axios": "^0.25.0",
    "chai": "^4.3.6",
    "dotenv": "^14.3.2",
    "ethereum-waffle": "^3.4.4",
    "ethers": "^5.6.8",
    "formik": "^2.2.9",
    "hardhat": "^2.9.7",
    "ipfs-http-client": "^50.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.6",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^6.2.1",
    "redux": "^4.1.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.15",
    "vite": "^2.7.2",
    "web3modal": "^1.9.7"
  }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svgr(), react()],
});
xxxxj-up commented 2 years ago

Hey, I have a Web3 project that includes multiple pages and I use Vite and React.js. One of the project sections is an NFT Marketplace that requires ipfs-http-client usage, For some reason, each time I try to create a connection I get a different type error. I'm not too experienced with webpack configuration and stuff but I've seen couple of threads of Vite having a hard time with ipfs-http-client

Let me know if any other logs would be helpful !

Component

import { create } from "ipfs-http-client";

const NewAsset = () => {
  // connect using a URL
  const client = create("http://127.0.0.1:5002");
}

TypeError

Uncaught TypeError: require_get3(...) is not a function
    at module2.exports (index.js:7:8)
    at create2 (index.js:31:10)
    at NewAsset (NewAsset.jsx:19:18)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)

package.json

{
  "name": "krypt",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@honkhonk/vite-plugin-svgr": "^1.1.0",
    "@metamask/detect-provider": "^1.2.0",
    "@nomiclabs/hardhat-ethers": "^2.0.6",
    "@nomiclabs/hardhat-waffle": "^2.0.3",
    "@openzeppelin/contracts": "^4.6.0",
    "@reduxjs/toolkit": "^1.7.1",
    "axios": "^0.25.0",
    "chai": "^4.3.6",
    "dotenv": "^14.3.2",
    "ethereum-waffle": "^3.4.4",
    "ethers": "^5.6.8",
    "formik": "^2.2.9",
    "hardhat": "^2.9.7",
    "ipfs-http-client": "^50.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.6",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^6.2.1",
    "redux": "^4.1.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.15",
    "vite": "^2.7.2",
    "web3modal": "^1.9.7"
  }
}

vite.config.js

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

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

hey After a long time of research, this is not a simple bug. As far as I know, this bug appeared as early as 2019, and the cause of the bug involves the whole code construction, which is currently impossible to solve. But I compiled a simple file that can be used temporarily. I don't know if you need it

dlt98 commented 2 years ago

What could I do to get it working on my end? I tried disabling the error inside vite but it now just crashed whenever I try and use it.

BigLep commented 2 years ago

@xxxxj-up : it's hard to debug with your stack trace, but it looks like your client constructor needs to fixed. See https://github.com/ipfs/js-ipfs/issues/4072 which was recently updated in the docs.

xxxxj-up commented 2 years ago

What could I do to get it working on my end? I tried disabling the error inside vite but it now just crashed whenever I try and use it.

I'm so sorry. There is currently no way to fix such bugs. The only way to continue to use is to run after compilation, but the compilation results are not satisfactory and may lead to compilation errors

xxxxj-up commented 2 years ago

@xxxxj-up : it's hard to debug with your stack attack, but it looks like your client constructor needs to fixed. See #4072 which was recently updated in the docs.

https://github.com/ipfs/js-ipfs/issues/3452 https://github.com/ipfs/js-ipfs/issues/1927 https://github.com/ipfs/js-ipfs/issues/4011 Hope to help you

achingbrain commented 2 years ago

This appears to be a bug in how vite handles transitive deps with exports maps. I've opened an issue on the vite repo with a minimal repro case here.

achingbrain commented 2 years ago

The exports map issue is fixed in the latest vite beta. Unfortunately there are new regressions in that version.

github-actions[bot] commented 2 years ago

Oops, seems like we needed more information for this issue, please comment with more details or this issue will be closed in 7 days.

github-actions[bot] commented 2 years ago

This issue was closed because it is missing author input.