Webpack config is not working

[Israel001]

I am using @shopify/post-purchase-ui-extensions-react to build a post-purchase extension for Shopify. I am trying to render some Polaris components inside the App but whenever I run it, I get a webpack error that says:

ERROR in ./styles/polaris.css 1:0 ┃ Module parse failed: Unexpected character '@' (1:0) ┃ You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ┃ > @charset "UTF-8"; ┃ | :root { ┃ | --polaris-version-number: '6.6.0'; ┃ @ ./src/index.tsx 15:0-31 ┃ @ multi @shopify/ui-extensions-webpack-hot-client/worker ./src/index.tsx

Here is the webpack config I am using but it doesn't seem to work:

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

module.exports = addWebpackConfig({
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
});

Please what am I doing wrong?

[rushigandhi]

Hi @Israel001 were you able to figure out what was wrong? I'm facing a similar problem.

[Crunchyman-ralph]

I'm having the same problem, if anyone could shed some light, that would be great

[Crunchyman-ralph]

From what I understood, the problem is with CSS using @

So to remedy that, I upgraded my webpack from 4 --> 5 and I tried to add the following lines in my next.config.js

config.module.rules.push({
            test: /\.s[ac]ss$/i,
            include: /node_modules/,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',
            ]
        })

just like you.

but I am using next.config.js not webpack.config.js

here is what my config looks like:

module.exports = {
    webpack: (config) => {
        const env = {API_KEY: apiKey};
        config.plugins.push(new webpack.DefinePlugin(env));

        // handle '@' not recognised error:
        config.module.rules.push({
            test: /\.s[ac]ss$/i,
            include: /node_modules/,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',
            ]
        })

        return addWebpackConfig(config, {preact: false});
    },
};