Shopify / post-purchase-ui

MIT License
9 stars 10 forks source link

Webpack Config Not Working for post-purchase-ui-react #4

Open LucasHarvey opened 3 years ago

LucasHarvey commented 3 years ago

I am trying to use @shopify/post-purchase-ui-react in my Next.js application. I've added the necessary webpack configuration to next.config.js, but the CSS for the npm package is not being loaded. I get the following error:

> Build error occurred
/Users/lucasharvey/Documents/Coding/salesboost/node_modules/@shopify/post-purchase-ui-react/build/cjs/utilities/typography-styles.css:1
[class].style1,
      ^
SyntaxError: Unexpected token ']'

Here's my next.config.js:

const withCSS = require("@zeit/next-css");
const withImages = require("next-images");

const { addWebpackConfig } = require("@shopify/post-purchase-ui-react/webpack");

const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
const appURL = JSON.stringify(process.env.SHOPIFY_APP_URL);

module.exports = withCSS(
  withImages(
    addWebpackConfig({
      webpack: (
        config,
        { buildId, dev, isServer, defaultLoaders, webpack }
      ) => {
        const env = { API_KEY: apiKey, APP_URL: appURL };
        config.plugins.push(new webpack.DefinePlugin(env));

        config.module.rules.push({
          include: /node_modules/,
          test: /\.mjs$/,
          type: "javascript/auto",
        });
        return config;
      },
    })
  )
);

@alxclark I've been stuck on this for a few weeks now and am unable to finish my app; I would appreciate any help in unblocking this!

Crunchyman-ralph commented 2 years ago

Hey @LucasHarvey did you find a solution to this ?