Polaris/style.css import issue

w2Hardware · ‎10-19-2019

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.

SBD_ · ‎10-20-2019

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 · ‎10-21-2019

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_ · ‎10-22-2019

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

Scott | Developer Advocate @ Shopify

wilko86 · ‎10-23-2019

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

wilko86 · ‎10-23-2019

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 · ‎10-23-2019

Everything is the latest version.

node 10.16.3

All the code is on github.

jryanthe4th · ‎11-25-2019

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 · ‎12-28-2019

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 · ‎12-31-2019

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 · ‎12-31-2019

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 · ‎01-19-2020

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 · ‎07-23-2020

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 · ‎02-09-2022

Update: the path is currently

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