Polaris styles.css import problem

andgamb · ‎08-19-2020

I followed the steps of the tutorial https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with... and thats where it fails.

I obviously have the classes in the html - so TextStyle in index.js from @shopify/polaris seems to work

In Frontend it still looks like this:

showing no Stylesheet in the Html Head:

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="next-head-count" content="2"><link rel="preload" href="/_next/static/chunks/main.js?ts=1597864669431" as="script"><link rel="preload" href="/_next/static/chunks/webpack.js?ts=1597864669431" as="script"><link rel="preload" href="/_next/static/chunks/pages/_app.js?ts=1597864669431" as="script"><link rel="preload" href="/_next/static/chunks/pages/index.js?ts=1597864669431" as="script"><noscript id="__next_css__DO_NOT_USE__"></noscript><script charset="utf-8" src="/_next/static/chunks/0.js"></script></head>

Adding the stylesheet manually in Html head brings up the correct styling...

whats wrong?

DeluxeDev · ‎09-02-2020

I'm getting exactly the same issue. I'm suspicious of this message when the node app starts

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

The link above blames the @zeit/next-css plugin, but removing it doesn't solve the issue either.

@andgamb did you get any further with it?

andgamb · ‎09-02-2020

No sadly I didn't - getting on with the Tutorial leads to many more Polaris related issues...

Would be nice the Writer of the tutorial would check in 😉

quentinlintz · ‎09-02-2020

@andgamb @DeluxeDev

In my app I have the import:

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

Without the dist folder in the path. I think this is the newer way of doing it.

If you still get the error I highly recommend just using the Shopify CLI to generate a sample app for you. That way everything is already setup and imported and you can focus solely on development.

DeluxeDev · ‎09-04-2020

Thanks @quentinlintz I'll check out the shopify CLI, I hadn't spotted there was one!

I have finally figured my issue out I'd added an extra 's' to _app.js so it was _apps.js

as _app.js is the magic filename required by next.js it didn't matter what css I included it didn't get picked up.

I had other issues beyond stylesheets and this may have been a cause of those also.

perhaps you've done something similar @andgamb ?