Shopify App - unable to get Polaris interface working.

Highlighted
New Member
8 0 0

Hi,

 

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 (
            <React.Fragment>
                <Head>
                    <title>Sample App</title>
                    <meta charSet="utf-8" />
                </Head>
                <AppProvider>
                <Component {...pageProps} />
                </AppProvider>
            </React.Fragment>
        );
    }
}

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;
    },
});
0 Likes
Highlighted
Shopify Staff
Shopify Staff
1555 81 282

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 (
    <AppProvider>
      <Page>
        <Heading>Hello, world!</Heading>
      </Page>
    </AppProvider>
  );
}

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.

 

Cheers.

0 Likes
Highlighted
New Member
2 0 2

When I add 

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

I get a build error.  

/node_modules/@shopify/polaris/styles.css
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 ? 

2 Likes
Highlighted
Shopify Partner
1 0 0

Same error here, following the standard tutorial here: https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-int...

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

0 Likes
Highlighted
New Member
1 0 1

Hi all - Please check and follow this. It will fix your issues: https://github.com/zeit/next-plugins/issues/541#issuecomment-534863391

1 Like
Highlighted
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.

 

0 Likes