Error: Can't resolve 'fs' in Shopify Storefront API

Question

I'm building out a custom CMS integration with my Shopify store and it's called Payload. I've installed the Shopify CLI and am getting 212 Errors due to the Webpack 5 breaking change that removes the polyfills.

ERROR in ./node_modules/tar/lib/unpack.js 11:11-24 Module not found: Error: Can't resolve 'fs' in

There currently is NO webpack.config.js file in the project at all which makes me think it's using the default. I am using Typescript as well and do have a tsconfig.json.

I have tried adding a webpack.config.js that just returns the resolve section outlined in this similar question but that isn't working.

I'm at a loss at this point and I'm completely blocked. Here is my project structure:

+ src
+ .env
+ .gitignore
+ .npmrc
+ docker-compose.yml
+ nodemon.json
+ package.json
+ tsconfig.json

And just in case I can do this in tsconfig (I assume not but nodemon is executing ts-node) here is the config:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
  ],
  "ts-node": {
    "transpileOnly": true
  }
}

If I comment out the reference to the ShopifyClient in my project which is included in @shopify/shopify-api it builds successfully. So it comes down to that package causing the issues.

=== Update ===

When running npm ls webpack the only modules that have a webpack dependancy are:

@
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ ├─┬ @webpack-cli/[email protected]
  │ │ └── [email protected] deduped
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  └── [email protected]

Notice that none of the shopify content is in there. So for some reason it seems that webpack is iterating over the node_modules which doesn't make any sense.

Error: Can't resolve 'fs' in Shopify Storefront API

0 Answers0