addWebpackConfig for next.config.js

[rushigandhi]

Hey,

I'm trying to make a WYSIWYG editor for the new Post Purchase UI Extension in my Shopify app. I'm using this npm module to show the components in React. I followed the Shopify Node React app tutorial and they use Next.js for the backend. I see that we have to use addWebpackConfig from this module in our webpack.config.js. Since my app uses Next.js, I tried adding it to my next.config.js.

I reimplemented everything in webpack-config.ts by doing config.module.rules.push and the equivalent for the other parts of the Webpack config. I still run into weird errors like:

./node_modules/@shopify/post-purchase-ui-react/build/esm/components/View/View.mjs
Can't import the named export 'classNames' from non EcmaScript module (only default export is available)

or

./node_modules/@shopify/post-purchase-ui-react/build/esm/style.css
TypeError: this.getOptions is not a function

or

ERROR in ./styles/polaris.css 1:0 ┃ Module parse failed: Unexpected character '@' (1:0)

Could someone shine some light on how use addWebpackConfig in Next.js. All my files are in JavaScript (not Typescript). This has been a huge blocker for me and I've been stuck for quite a while.

In my next.config.js I also tried to just call addWebpackConfig to the webpack part of the file by doing:

module.exports = {
  webpack: (config) => {
  return addWebpackConfig(config);
}}

and it gave me the same error:

./node_modules/@shopify/post-purchase-ui-react/build/esm/components/View/View.mjs
Can't import the named export 'classNames' from non EcmaScript module (only default export is available)

Is there any other way to directly just call the addWebpackConfig function in my next.config.js?

Thank you!