Polaris/style.css import issue

Retired Boards Appdev Store Design
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-interface-with-polaris

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.

2

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?

3 
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

4

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

5

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

6

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>
7

Everything is the latest version.

node 10.16.3

All the code is on github.

8

First npm install the css-loader webpack loader package

npm install --save-dev css-loader

Next create a root level file called webpack.config.js. Webpack will automatically pickup this file and and read the contents.
Add the following code to the file and restart your server.

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
};

https://webpack.js.org/concepts/loaders/

9

You have to use this plugin in order to use css files in nextjs:

https://github.com/zeit/next-plugins/tree/master/packages/next-css

Additionally add webpack (if is not currently added).

Finally create a next.config.js in your root folder:

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

module.exports = withCSS({
    webpack: (config)=>{
        //Additional example to use environment variables with webpack
        //const env = { API_KEY: apikey };
        //config.plugins.push(new webpack.DefinePlugin(env));
        return config;
    },
})
10

Thank you for the reply, after installing the steps you said. I now get this error.

[ 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?, esModule? }

I searched for this error and see many people are having this issue with the newest version of the css-loader.
github BUG ISSUES 8909

I am not sure how to get around this error and still get this tutorial done.

Thank you for the help.

11

Well probably it has to do with version issues.

Actually I’m working in a brand new project with nextjs and shopify polaris css without any problem.

This is my current package.json

{
  "name": "borderbuddy_merchant",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@shopify/polaris": "^4.10.2",
    "@zeit/next-css": "^1.0.1",
    "dotenv": "^8.2.0",
    "next": "9.1.6",
    "next-redux-wrapper": "^4.0.1",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "webpack": "^4.41.5"
  },
  "devDependencies": {}
}

And this is my current next.config.js file:

require("dotenv").config();
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');

const env = Object.keys(process.env).reduce((acc, curr) => {
    acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
    return acc;
}, {});

module.exports = withCSS({
    webpack: (config)=>{
        config.plugins.push(new webpack.DefinePlugin(env));
        return config;
    },
    env
})

As an additional note I’m using yarn instead npm.

And my node version is “lts/erbium → v12.13.1”

with npm version “6.12.1”

Check if some of my config values work for you.

Regards

12

in my case I had this browserlist-config in the package.json:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    ...
  }

Setting >0.2% to >2% helped.

This issue comment inspired me:

https://github.com/Shopify/polaris-react/issues/441#issuecomment-429490870

13

I was running in similar problems when following the Build a Shopify App with Node and React>Build your user interface with Polaris.

error - ./pages/_app.js> Module not found: Can’t resolve ‘@shopify/polaris/styles.css’ in ‘C:\Users\USER\Documents\shopify-sample-app\pages’

I solved it by replacing:

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

with

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

I found this by looking at Polaris Next.js example

14

Update: the path is currently

import '@shopify/polaris/build/esm/styles.css'