Polaris/style.css import issue

Highlighted
New Member
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

0 Likes
Tourist
9 0 0

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

0 Likes