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:

@
└─┬ payload@1.2.0
  ├─┬ babel-loader@8.3.0
  │ └── webpack@5.75.0 deduped
  ├─┬ css-loader@5.2.7
  │ └── webpack@5.75.0 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ └── webpack@5.75.0 deduped
  ├─┬ file-loader@6.2.0
  │ └── webpack@5.75.0 deduped
  ├─┬ html-webpack-plugin@5.5.0
  │ └── webpack@5.75.0 deduped
  ├─┬ mini-css-extract-plugin@1.3.3
  │ └── webpack@5.75.0 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── webpack@5.75.0 deduped
  ├─┬ sass-loader@12.6.0
  │ └── webpack@5.75.0 deduped
  ├─┬ style-loader@2.0.0
  │ └── webpack@5.75.0 deduped
  ├─┬ terser-webpack-plugin@5.3.6
  │ └── webpack@5.75.0 deduped
  ├─┬ url-loader@4.1.1
  │ └── webpack@5.75.0 deduped
  ├─┬ webpack-cli@4.10.0
  │ ├─┬ @webpack-cli/configtest@1.2.0
  │ │ └── webpack@5.75.0 deduped
  │ └── webpack@5.75.0 deduped
  ├─┬ webpack-dev-middleware@4.3.0
  │ └── webpack@5.75.0 deduped
  └── webpack@5.75.0

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