I'm getting this "TypeError: mergeOptions__default.default.bind is not a function"

[matheusAMDS]

• Version: 0.58.2

• Platform: Windows 10 64-bit; Brave v1.28.106

• Subsystem:

Severity: High

Description:

I'm using Next.js. I've created a IPFS provider and used it in my _app.tsx. This is the provider:

import IPFS, { IPFS as IPFSType } from "ipfs"
import { createContext, useContext, useEffect, useState } from "react"

interface IPFSContextInterface {
  ipfs: IPFSType
}

export const IPFSContext = createContext<IPFSContextInterface>(
  {} as IPFSContextInterface
)

export const useIPFS = () => useContext(IPFSContext)

export const IPFSProvider: React.FC = ({ children }) => {
  const [ ipfs, setIPFS ] = useState<IPFSType>({} as IPFSType)

  useEffect(() => {
    async function loadIPFS() {
      const ipfs = await IPFS.create({ repo: "./ipfs" })

      setIPFS(ipfs)
    }

    loadIPFS()
  }, [])

  return (
    <IPFSContext.Provider value={{ ipfs }}>
      {children}
    </IPFSContext.Provider>
  )
}

and this is my _app.tsx

import { AppProps } from "next/app"
import { IPFSProvider } from "../containers/ipfs"

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <IPFSProvider>
      <Component {...pageProps} />
    </IPFSProvider>
  )
}

export default App

When initializing the app i get the error:

Uncaught TypeError: mergeOptions__default.default.bind is not a function
    at Object../node_modules/ipfs-unixfs-importer/cjs/src/options.js (options.js:11)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Object../node_modules/ipfs-unixfs-importer/cjs/src/index.js (index.js:6)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Module../node_modules/ipfs-unixfs-importer/esm/src/index.js (validate-offset-and-length.js:26)
    at Module.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Object../node_modules/ipfs-core/src/components/add-all/index.js (index.js:3)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Object../node_modules/ipfs-core/src/components/root.js (root.js:4)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Object../node_modules/ipfs-core/src/components/index.js (index.js:30)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Object../node_modules/ipfs-core/src/index.js (index.js:10)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Object../node_modules/ipfs/src/index.js (index.js:7)
    at Object.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Module../src/containers/ipfs.tsx (index.js:389)
    at Module.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at Module../src/pages/_app.tsx (web3.tsx:20)
    at Module.options.factory (react refresh:8)
    at __webpack_require__ (bootstrap:25)
    at fn (hot module replacement:61)
    at (index):5
    at route-loader.js:207

It should just work normally

Steps to reproduce the error:

You can reproduce it by creating a new next app with typescript using npx create-next-app. Then adding the previous code.

[welcome]

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:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

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

[achingbrain]

I'm having trouble replicating this, I followed your instructions but the app creates an IPFS node successfully and starts without error for me using both npm run dev and npm run build && npm start under node 14 and node 16.

Could you please create a quick demo repo that I can use to reliably reproduce the problem?

[matheusAMDS]

Here: https://github.com/matheusAMDS/actionhouse . When you test it just wrap the IPFSProvider on <Container... /> on _app.tsx

[matheusAMDS]

I'm closing this. When i deleted the .next and node_modules folders + the yarn.lock file and installed everything again, it worked. So it was problably a dependency inconsistency, idk