Error Module FS Cannot Resolved on NextJS

[fwidjaya20]

Describe the issue

I Wrapped Axios library in my own library, and I found this error while install it in NextJS Project.

./node_modules/@pandora/core/dist/external/form-data/lib/form_data.js:1:245
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@myownlib/core/dist/external/axios/lib/helpers/toFormData.js
./node_modules/@myownlib/core/dist/external/axios/lib/axios.js
./node_modules/@myownlib/core/dist/Http/Client.js
./node_modules/@myownlib/core/dist/index.js
./node_modules/@myownlib/ui/dist/SsoLogin/Component.js
./node_modules/@myownlib/ui/dist/index.js
./src/pages/_app.tsx

Can you help me figure it out what wrong ?

Example Code

No response

Expected behavior

No response

Axios Version

1.4.0

Adapter Version

No response

Browser

Chrome

Browser Version

No response

Node.js Version

18.13.0

OS

No response

Additional Library Versions

No response

Additional context/Screenshots

No response

[fwidjaya20]

this only can be reproduce if i build my own lib using rollup, when i switch it using tsc --build the errors doesn't appear.

Here's my rollup.config

import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import terser from '@rollup/plugin-terser'
import typescript from '@rollup/plugin-typescript'
import { defineConfig } from 'rollup'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import { visualizer } from 'rollup-plugin-visualizer'

import packageJson from './package.json' assert { type: 'json' }

export default defineConfig([
  {
    input: 'src/index.ts',
    output: {
      dir: 'dist',
      format: 'esm',
      preserveModules: true,
      preserveModulesRoot: 'src',
      sourcemap: true,
      entryFileNames: (chunkInfo) => {
        if (chunkInfo.name.includes('node_modules')) {
          return chunkInfo.name.replace('node_modules', 'external') + '.js'
        }

        return '[name].js'
      },
    },
    plugins: [
      peerDepsExternal(),
      resolve({
        exportConditions: ['node'],
      }),
      json(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.json',
        declaration: true,
        declarationDir: 'dist',
      }),
      terser(),
      visualizer({
        filename: 'bundle-analysis.html',
        open: false,
      }),
    ],
    external: [...Object.keys(packageJson.peerDependencies || {})],
    treeshake: true,
  },
])

[duchk226]

hi @fwidjaya20 I have the same problem with you. After spending hours investigating, I figured out that Axios tries to use fs module on client side, but I have no idea about how to fix it. Did you have the solution?

[suhaotian]

Sorry, borther here, can you try xior? https://github.com/suhaotian/xior

• Use fetch and similar API with axios
• plugins support
• Less dependencies
• lightweight
• well tested and strong types