Rollup compilation exporting error

[francesco-gaglione]

• Version: 59.0.0
• Platform: Windows 10
• Node version: v18.12.1

Severity: High

Description:

I'm using ipfs-http-client into my custom react components library. In detail I created a .ts script that use the .create() method. The library dir structure is this:

rootFolder
    |_ src
        |_ web3
            |_ manager
                - index.ts
                - manager.ts
        - index.ts

The manager script is this:

import { create, IPFSHTTPClient } from 'ipfs-http-client'

class Manager {....}

export default Manager;

The src/web3/manager/index.ts is this:

export { default } from "./manager";

And into the src/index.ts:

....
import Manager from "./web3/manager";

export {
    ....
    Manager,
    ....
}

The library is compiled using rollup and these is my configurations:

rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import copy from "rollup-plugin-copy";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true
    }),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss(),
    copy({
      targets: [
        {
          src: "src/index.css",
          dest: "build",
          rename: "index.css"
        }
      ]
    })
  ]
};

tsconfig.json

{
  "compilerOptions": {
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "storybook-static",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
}

package.json

{
 ....
 "main": "build/index.js",
  "module": "build/index.esm.js",
  "files": [
    "build"
  ],
"peerDependencies": {
    "@pinata/sdk": "^2.1.0",
    "alchemy-sdk": "^2.2.1",
    "colors": "^1.4.0",
    "ethers": "^5.7.2",
    "ipfs-http-client": "^59.0.0", <- ipfs dependecy
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.9.4"
  },
  ....
}

I compile the library with rollup -c and the build process is ok, the build is done. But, when I try to use this library (both with npm install /libPath and npm install @scope/libname) into a next.js frontend I have this error:

../../projectlib/build/index.js
Module not found: Package path . is not exported from package C:\{path}\projectlib\node_modules\ipfs-http-client (see exports field in  C:\{path}\projectlib\node_modules\ipfs-http-client\package.json)

Import trace for requested module:
../../projectlib/build/index.js

Why this error? And how to solve it?

[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.

[pablomendezroyo]

I have been dealing with a similar issue and finally fix it.

Error

Module not found: Error: Package path . is not exported from package /home/dappnode/CORE/DNP_DAPPMANAGER/node_modules/ipfs-http-client (see exports field in /home/dappnode/CORE/DNP_DAPPMANAGER/node_modules/ipfs-http-client/package.json)

Versions

"ipfs-http-client": "^59.0.0",
"webpack": "^5.52.0",

My solution
Change the module and target fields in the tsconfig.json from commonjs to EsNext. Watch out, this can break other parts of your code

{
...
"module": "ESNext",
"target": "ESNext"
...
}

[richtera]

It looks like things are referring to MODULE/src/.... during import of types but ./src is not in the exports declaration of each module. I am not quite sure where this should be posted or as a new issue, but when using ipfs within a type=module environment each export needs to be mentioned. For example import { ImportCandidate } from 'ipfs-core-types/src/utils' should work in spirit, but won't work, if the environment is completely ESM, because the src folder is not exported inside of the package.json. At least that's what I am seeing with the latest versions and I can't switch because of this.
So it looks like ESNext would fix the one but not the other. So you can use the client just fine, but can't import the types from core.

[SgtPooki]

Hello @francesco-gaglione, @pablomendezroyo, & @richtera,

js-ipfs is being deprecated in favor of Helia. You can learn more about this deprecation and the corresponding migration guide here.

As a result, we are going to close this issue. If you think we have done this in error, please feel to reopen with any comments in the next week as we will circle back on the reopened issues.

We hope you will consider Helia for your IPFS in JS needs. If you believe this particular request belongs in Helia, feel free to open a Helia issue. We look forward to engaging with you more there.

Thanks,
@ipfs/helia-dev