Shopify App - unable to get Polaris interface working.

New Member
8 0 0



I'm following the React App tutorial and I'm up to the installing Polaris. I've installed Polaris, created the next.config.js file, an _app.js file,  and restarted my terminal but I don't see the CSS change. Here are my _app.js and config files. I don't see any error in the terminal. 


import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;
        return (
                    <title>Sample App</title>
                    <meta charSet="utf-8" />
                <Component {...pageProps} />

export default MyApp;
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');

const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
module.exports = withCSS({
    webpack: (config) => {
        const env = {
            API_KEY: apiKey

        config.plugins.push(new webpack.DefinePlugin(env));
        return config;
Shopify Staff
Shopify Staff
1555 81 298

Have you tried importing the styles explicitly in your file?


import React from 'react';
import '@shopify/polaris/styles.css';
import {AppProvider, Page, Heading} from '@shopify/polaris';

function App() {
  return (
        <Heading>Hello, world!</Heading>

export default App;

I was able to find success with the above, let me know how that goes. Correct me if I'm wrong in understanding your question at all.



New Member
2 0 2

When I add 

import '@shopify/polaris/styles.css';

I get a build error.  

ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }


Any ideas ? 

Shopify Partner
1 0 0

Same error here, following the standard tutorial here:

I'm stuck and can't go further than step: Add the Polaris app provider component

New Member
1 0 1

Hi all - Please check and follow this. It will fix your issues:

New Member
1 0 0

It seems zeit/next-css is an old plugin and isn't needed by the latest version of next.js as it has native support for CSS now (you should get an error/warning in the console when you run next). My styles were broken too following the tutorial (it should be updated!). If you only have to have the following import in your _app.js file:

import '@shopify/polaris/dist/styles.css';

You don't actually need the next.config.js file at all any more.