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.
