Polaris/style.css import issue

Highlighted
Tourist
4 0 1

When following this tutorial. I run into an issue when I try to add CSS to the app. 

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-int...

 

When adding this code my Dev breaks.
import '@shopify/polaris/styles.css';

Error:
./node_modules/@shopify/polaris/styles.css 1:0
Module parse failed: Unexpected token (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
> :root{
| --polaris-version-number:'4.6.1'; }


When I comment that line out. The Dev runs find but without any styling. Which is not ideal. 

Any ideas on how to get this to work like in the tutorial?

 

Thanks.

0 Likes
Shopify Staff
Shopify Staff
126 17 20

Hey @w2Hardware,

 

I'm able to replicate this by skipping the next.config.js step - can you share the contents of your next.config.js file?

0 Likes
Tourist
4 0 1
require("dotenv").config();
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;
  },
});

Thanks

1 Like
Shopify Staff
Shopify Staff
126 17 20

Are you able to share your project code + node version?

0 Likes
New Member
2 0 0

I too am getting the same error. I am not skipping any steps. There's also some people on GitHub having similar issues

0 Likes
New Member
2 0 0

I have found a work around, by importing the CSS (change for your Polaris version) this way.


This is not optimal, as an additional request is made for the css, but it'll help until a proper solution is found.

 

            <React.Fragment>
                <Head>
                    <title>Sample App</title>
                    <meta charSet="utf-8" />
                    <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@4.7.0/styles.min.css" />
                </Head>
                <AppProvider>
                    <Component {...pageProps} />
                </AppProvider>
            </React.Fragment>
0 Likes
Tourist
4 0 1

Everything is the latest version. 

 

node 10.16.3

All the code is on github.

0 Likes