payload: plugin-cloud-storage: Can't resolve 'fs' error with cloud-storage-plugin s3 adapter

Link to reproduction

https://github.com/haliacmon/payload-reproduction

Describe the Bug

Getting Module not found: Error: Can’t resolve ‘fs’ error with plugin-cloud-storage and s3-adapter

ERROR in ./node_modules/.pnpm/@payloadcms+plugin-cloud-storage@1.1.1_@aws-sdk+client-s3@3.454.0_@aws-sdk+lib-storage@3.454.0_payload@2.1.1/node_modules/@payloadcms/plugin-cloud-storage/dist/adapters/s3/handleUpload.js 140:27-40
Module not found: Error: Can't resolve 'fs' in '...\node_modules\.pnpm\@payloadcms+plugin-cloud-storage@1.1.1_@aws-sdk+client-s3@3.454.0_@aws-sdk+lib-storage@3.454.0_payload@2.1.1\node_modules\@payloadcms\plugin-cloud-storage\dist\adapters\s3'

To Reproduce

1- npx create-payload-app@latest reproduce-error-s3 -t blank --use-pnpm using postgress 2- pnpm add @payloadcms/plugin-cloud-storage 3- pnpm add @aws-sdk/client-s3 @aws-sdk/lib-storage aws-crt 4- optional. add s3 related variables to .env. Not necessary to reproduce the error. 5- adding build config for plugin-cloud-storage & s3-adapter by instructions. (error happens after step 5) https://github.com/payloadcms/payload/tree/c10db332cdeb3f702d378b0649be20eb789c13e1/packages/plugin-cloud-storage#s3-adapter

//payload.config.ts
...
import { cloudStorage } from '@payloadcms/plugin-cloud-storage'
import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3'

const adapter = s3Adapter({
  config: {
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
    region: process.env.S3_REGION,
  },
  bucket: process.env.S3_BUCKET,
})
...

plugins: [
...
    cloudStorage({
      collections: {
        "my-collection-slug": {
          adapter: adapter,
        },
      },
    }),
  ],
...

Payload Version

2.1.1

Adapters and Plugins

db-postgres, plugin-cloud-storage, S3 Adapter

About this issue

Original URL
State: open
Created 7 months ago
Reactions: 6
Comments: 22 (7 by maintainers)

Most upvoted comments

Can confirm I’m also running into this issue.

tyteen4a03 on Feb 5, 2024

I found a a workaround.

webpack: (config) => {
  config.resolve.fallback.fs = false;

  return config;
},

If I add this to buildConfig() error goes away

export default buildConfig({
  admin: {
    user: Users.slug,
    bundler: webpackBundler(),
    webpack: (config) => {
      config.resolve.fallback.fs = false;
      
      // This is to get rid of typescript error
      // if (config.resolve?.fallback)
      // config.resolve.fallback = { ...config.resolve.fallback, fs: false };

      return config;
    },
  },
...

Your mileage may vary by disabling those features. I’ve been trying similar stuff. something else to note if you want to preserve + override the webpack config you can do it like this:

  webpack: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      fallback: {
        ...config.resolve.fallback,
        fs: false
      }
    }    
  }),

ericuldall on Nov 22, 2023

I found a a workaround.

webpack: (config) => {
  config.resolve.fallback.fs = false;

  return config;
},

If I add this to buildConfig() error goes away

export default buildConfig({
  admin: {
    user: Users.slug,
    bundler: webpackBundler(),
    webpack: (config) => {
      config.resolve.fallback.fs = false;
      
      // This is to get rid of typescript error
      // if (config.resolve?.fallback)
      // config.resolve.fallback = { ...config.resolve.fallback, fs: false };

      return config;
    },
  },
...

haliacmon on Nov 22, 2023

@haliacmon Just published a new beta to try.

@ericuldall We’ve identified some issues w/ the vite bundler with this package that are yet to be resolved 👍

denolfe on Nov 22, 2023

more errors this time.

webpack built e8766af5f2dc60d372e8 in 38675ms
ERROR in ./node_modules/.pnpm/@payloadcms+plugin-cloud-storage@1.1.2-beta.0_@aws-sdk+client-s3@3.454.0_@aws-sdk+lib-storage@3.454.0_payload@2.1.1/node_modules/@payloadcms/plugin-cloud-storage/dist/adapters/s3/handleUpload.js 136:49-62
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\@payloadcms+plugin-cloud-storage@1.1.2-beta.0_@aws-sdk+client-s3@3.454.0_@aws-sdk+lib-storage@3.454.0_payload@2.1.1\node_modules\@payloadcms\plugin-cloud-storage\dist\adapters\s3'

ERROR in ./node_modules/.pnpm/@payloadcms+plugin-cloud-storage@1.1.2-beta.0_@aws-sdk+client-s3@3.454.0_@aws-sdk+lib-storage@3.454.0_payload@2.1.1/node_modules/@payloadcms/plugin-cloud-storage/dist/adapters/s3/webpack.js 64:49-62
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\@payloadcms+plugin-cloud-storage@1.1.2-beta.0_@aws-sdk+client-s3@3.454.0_@aws-sdk+lib-storage@3.454.0_payload@2.1.1\node_modules\@payloadcms\plugin-cloud-storage\dist\adapters\s3'

ERROR in ./node_modules/.pnpm/detect-file@1.0.0/node_modules/detect-file/index.js 7:9-22
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\detect-file@1.0.0\node_modules\detect-file'

ERROR in ./node_modules/.pnpm/fill-range@7.0.1/node_modules/fill-range/index.js 60:11-26
Module not found: Error: Can't resolve 'util' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\fill-range@7.0.1\node_modules\fill-range'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/.pnpm/findup-sync@4.0.0/node_modules/findup-sync/index.js 4:13-26
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\findup-sync@4.0.0\node_modules\findup-sync'

ERROR in ./node_modules/.pnpm/global-prefix@1.0.2/node_modules/global-prefix/index.js 7:9-22
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\global-prefix@1.0.2\node_modules\global-prefix'

ERROR in ./node_modules/.pnpm/homedir-polyfill@1.0.3/node_modules/homedir-polyfill/index.js 2:9-22
Module not found: Error: Can't resolve 'os' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\homedir-polyfill@1.0.3\node_modules\homedir-polyfill'    

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

ERROR in ./node_modules/.pnpm/homedir-polyfill@1.0.3/node_modules/homedir-polyfill/polyfill.js 2:9-22
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\homedir-polyfill@1.0.3\node_modules\homedir-polyfill'    

ERROR in ./node_modules/.pnpm/isexe@2.0.0/node_modules/isexe/index.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\isexe@2.0.0\node_modules\isexe'

ERROR in ./node_modules/.pnpm/isexe@2.0.0/node_modules/isexe/mode.js 3:9-22
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\isexe@2.0.0\node_modules\isexe'

ERROR in ./node_modules/.pnpm/isexe@2.0.0/node_modules/isexe/windows.js 3:9-22
Module not found: Error: Can't resolve 'fs' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\isexe@2.0.0\node_modules\isexe'

ERROR in ./node_modules/.pnpm/micromatch@4.0.5/node_modules/micromatch/index.js 84:11-26
Module not found: Error: Can't resolve 'util' in 'D:\_code2\Azak\payload-reproduction\node_modules\.pnpm\micromatch@4.0.5\node_modules\micromatch'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

webpack compiled with 12 errors

haliacmon on Nov 21, 2023