Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to use Material-UI framework

See original GitHub issue

I tried to add React Material-UI to the project template.

This is how it looks in package.json (by simply following the installation routine on material-ui page):

"dependencies": {
    ...
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.9.0",
    ...
}

And in one of the components simply used material button:

... (ommited other react imports)
import Button from '@material-ui/core/Button';
...
const Component = () => {
    return (
        <Button variant="contained" color="primary">
            Hello World!
        </Button>
    )
}

Somehow, I seem to hit unsolvable error similar to this issue.

jss.esm.js:1712 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'nonce-qahp5MvuRSU3PA6LfMc+Vg=='". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

I tried to modify this in webpack.development.js:

new CspHtmlWebpackPlugin({
      'base-uri': ["'self'"],
      'object-src': ["'none'"],
      'script-src': ["'self'"],
      'style-src': ["'self' 'unsafe-inline'"],  // Added unsafe-inline
      'frame-src': ["'none'"],
      'worker-src': ["'none'"],
}),

but it had no effect.

Is there a way to get Material-UI working along with this template? I feel like I’m terribly missing something trivial, but I don’t know what else to try. Thanks in advance.

Issue Analytics

State:
Created 4 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

4reactions

ecolmancommented, May 1, 2020

I figured this out by following your links @reZach. The material-ui doc link was to an old version and once I looked at the latest docs, I saw the answer.

CspHtmlWebpackPlugin and HtmlWebpackPlugin need to be provided a nonce, and a special meta-tag needs to be added to the index.html file for material-ui (really jss) to pick up on it. Both the index.html and index.prod.html files need to be renamed with the .ejs extension to enable templating.

Also need to add uuid for creation of the nonce: npm i -S uuid

create-nonce.js

const { v4: uuidv4 } = require('uuid');

module.exports = function() {
  return new Buffer(uuidv4()).toString('base64');
};

webpack.development.js

const nonce = require("./create-nonce")();

  ...
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "app/src/index.ejs"), // notice the change to ejs
      filename: "index.html",
      nonce: nonce  // added a new property for ejs template
    }),
    new CspHtmlWebpackPlugin({
      "base-uri": ["'self'"],
      "object-src": ["'none'"],
      "script-src": ["'self'"],
      "style-src": ["'self'", `'nonce-${nonce}'`],  // added a nonce for the style-src
      "frame-src": ["'none'"],
      "worker-src": ["'none'"]
    })
  ]

index.ejs (formally index.html)

<head>
  <meta charset="UTF-8">

  <meta property="csp-nonce" content="<%= htmlWebpackPlugin.options.nonce %>" />
</head>

The same change made to webpack.development.js/index.html should be made in webpack.production.js/index-prod.html as well.

1reaction

Salmon42commented, Apr 11, 2020

I solved it only partially, by removing the CspHtmlWebpackPlugin from webpack.development.js. Which I suppose isn’t a convenient way to solve this. As I was using this template for study purposes, I do not intend to release any electron app, it was sufficient enough for me. Another thing might be the wrong way of importing materialui in the project - when I began using this template, I had zero knowledge about webpack. Either way, the issue is closed for me, but there may be someone in future that will stumble upon the same situation, but they won’t be able to just delete some important code to enable usage of some react UI package.

I plan to look at this issue again within few months, when I have more time and knowledge about webpack, babel and some other stuff you are using in this template.

Thanks for help for now!