Polaris/style.css import issue

w2Hardware
Tourist
5 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.

Replies 13 (13)

SBD_
Shopify Staff
1829 269 407

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?

Scott | Developer Advocate @ Shopify 

w2Hardware
Tourist
5 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

SBD_
Shopify Staff
1829 269 407

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

Scott | Developer Advocate @ Shopify 

wilko86
Shopify Partner
2 0 2

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

wilko86
Shopify Partner
2 0 2

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>
w2Hardware
Tourist
5 0 1

Everything is the latest version. 

 

node 10.16.3

All the code is on github.

jryanthe4th
Visitor
1 0 1

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/

fercastillo
Visitor
2 0 0

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;
    },
})
w2Hardware
Tourist
5 0 1

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.

fercastillo
Visitor
2 0 0

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

Detzler
Tourist
9 0 3

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

egillanton
Shopify Partner
11 2 2

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
 

gbrc
Shopify Partner
2 0 2

Update: the path is currently

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