hupe1980 / gatsby-plugin-material-ui Goto Github PK

View Code? Open in Web Editor NEW

136.0 5.0 25.0 4.08 MB

Gatsby plugin for Material-UI with built-in server-side rendering support

License: MIT License

JavaScript 100.00%

gatsby gatsby-plugin react material-ui mui

gatsby-plugin-material-ui's Introduction

gatsby-plugin-material-ui

A Gatsby plugin for @material-ui with built-in server-side rendering support.

This is the plugin for Material-UI v5 (emotion). The plugin for v4 can be found here.

Documentation

Read the documentation.

gatsby-plugin-material-ui's People

Contributors

Stargazers

Watchers

gatsby-plugin-material-ui's Issues

gatsby-plugin-material-ui correct rendering & deployment issue

I'm getting the error log from gitlab ci (the output below) when deploying the website with the gatsby-plugin-material-ui to aws s3. The deployment without the plugin works. My app works locally, but on command "gatsby serve" the plugin does not render all components correctly. Only after a refresh I get the correct page. I'm using the latest versions of every npm package.

Gitlab CI Error:
error "gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:

Gitlab CI:

Running with gitlab-runner 12.10.0-rc2 (6c8c540f)
   on docker-auto-scale 0277ea0f
Preparing the "docker+machine" executor
 Using Docker executor with image node:latest ...
 Pulling docker image node:latest ...
 Using docker image sha256:a5a6a9c328776cffabad04bf248e308c5efdd6d93b1e76166ac28a6695c71ccc for node:latest ...
Preparing environment
00:02
 Running on runner-0277ea0f-project-14727150-concurrent-0 via runner-0277ea0f-srm-1587664533-e9ebaf82...
Getting source from Git repository
00:03
 $ eval "$CI_PRE_CLONE_SCRIPT"
 Fetching changes with git depth set to 50...
 Initialized empty Git repository in /builds/myapp/my-homepage/homepage/.git/
 Created fresh repository.
 From https://gitlab.com/myapp/my-homepage/homepage
  * [new ref]         refs/pipelines/139242621 -> refs/pipelines/139242621
  * [new branch]      feature/#60-add-gatsby-plugin-material-ui -> origin/feature/#60-add-gatsby-plugin-material-ui
 Checking out e8ef5285 as feature/#60-add-gatsby-plugin-material-ui...
 Skipping Git submodules setup
Restoring cache
 Checking cache for feature--60-add-gatsby-plugin-material-ui...
 Downloading cache.zip from https://storage.googleapis.com/gitlab-com-runners-cache/project/14727150/feature--60-add-gatsby-plugin-material-ui 
 Successfully extracted cache
Downloading artifacts
00:01
Running before_script and script
 $ yarn
 yarn install v1.22.4
 [1/4] Resolving packages...
 [2/4] Fetching packages...
 warning [email protected]: Invalid bin field for "url-loader".
 info [email protected]: The platform "linux" is incompatible with this module.
 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
 info [email protected]: The platform "linux" is incompatible with this module.
 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
 [3/4] Linking dependencies...
 warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
 [4/4] Building fresh packages...
 warning Error running install script for optional dependency: "/builds/newcubator/newcubator-homepage/homepage/node_modules/git-win: Command failed.
 Exit code: 1
 Command: node lib/install.js
 Arguments: 
 Directory: /builds/newcubator/newcubator-homepage/homepage/node_modules/git-win
 Output:
 `git-win` not support this platform, please install from Windows."
 info This module is OPTIONAL, you can safely ignore this error
 success Saved lockfile.
 Done in 107.63s.
 $ yarn build
 yarn run v1.22.4
 $ NODE_OPTIONS='-r dotenv/config' gatsby build
 success open and validate gatsby-configs - 0.030s
 success load plugins - 1.182s
 success onPreInit - 0.010s
 success delete html and css files from previous builds - 0.012s
 success initialize cache - 0.007s
 success copy gatsby files - 0.023s
 error "gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:
 The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null
   39 |   }
   40 | 
 > 41 |   fs.writeFileSync(dir + "/styles-provider-props.js", module);
      |      ^
   42 | };
   Error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type s  tring or an instance of Buffer, TypedArray, or DataView. Received null
   
   - gatsby-node.js:41 Object.exports.onPreBootstrap
     [homepage]/[gatsby-plugin-material-ui]/gatsby-node.js:41:6
   
   - api-runner-node.js:256 runAPI
     [homepage]/[gatsby]/dist/utils/api-runner-node.js:256:37
   
   - api-runner-node.js:375 Promise.catch.decorateEvent.pluginName
     [homepage]/[gatsby]/dist/utils/api-runner-node.js:375:15
   
   - debuggability.js:384 Promise._execute
     [homepage]/[bluebird]/js/release/debuggability.js:384:9
   
   - promise.js:518 Promise._resolveFromExecutor
     [homepage]/[bluebird]/js/release/promise.js:518:18
   
   - promise.js:103 new Promise
     [homepage]/[bluebird]/js/release/promise.js:103:10
   
   - api-runner-node.js:374 
     [homepage]/[gatsby]/dist/utils/api-runner-node.js:374:12
   
   - util.js:16 tryCatcher
     [homepage]/[bluebird]/js/release/util.js:16:23
   
   - reduce.js:166 Object.gotValue
     [homepage]/[bluebird]/js/release/reduce.js:166:18
   
   - reduce.js:155 Object.gotAccum
     [homepage]/[bluebird]/js/release/reduce.js:155:25
   
   - util.js:16 Object.tryCatcher
     [homepage]/[bluebird]/js/release/util.js:16:23
   
   - promise.js:547 Promise._settlePromiseFromHandler
     [homepage]/[bluebird]/js/release/promise.js:547:31
   
   - promise.js:604 Promise._settlePromise
     [homepage]/[bluebird]/js/release/promise.js:604:18
   
   - promise.js:649 Promise._settlePromise0
     [homepage]/[bluebird]/js/release/promise.js:649:10
   
   - promise.js:729 Promise._settlePromises
     [homepage]/[bluebird]/js/release/promise.js:729:18
   
 not finished onPreBootstrap - 0.061s
 error Command failed with exit code 1.
 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Running after_script
00:01
Uploading artifacts for failed job
00:02
 ERROR: Job failed: exit code 1

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "my website",
    shortTitle: "website",
  },
  plugins: [
    "gatsby-plugin-typescript",
    "gatsby-plugin-eslint",
    "gatsby-plugin-react-helmet",
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    "gatsby-transformer-json",
    "gatsby-plugin-material-ui",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "test app",
        short_name: "app",
        description: `my app`,
        start_url: "/",
        background_color: "#fff",
        theme_color: "#fff",
        display: "standalone",
        icon: "src/images/logos/mylogo.png",
        lang: "de",
      },
    },
    {
      resolve: "gatsby-source-contentful",
      options: {
        host: process.env.CONTENTFUL_HOST,
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        environment: process.env.CONTENTFUL_ENVIRONMENT,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        downloadLocal: true,
      },
    },
    {
      resolve: "gatsby-plugin-s3",
      options: {
        bucketName: process.env.AWS_S3_BUCKET_NAME,
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      options: {
        precachePages: [
          "/jobs",
          "/jobs/*",
          "/services/*"
        ],
      },
    },
    {
      resolve: "gatsby-plugin-preconnect",
      options: {
        domains: ["http://images.ctfassets.net/"],
      },
    },
  ],
};

package.json:

{
  "name": "my app",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@contentful/rich-text-types": "^14.1.0",
    "@material-ui/core": "^4.9.11",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.50",
    "@material-ui/styles": "^4.9.10",
    "axios": "^0.19.2",
    "gatsby": "^2.20.29",
    "gatsby-cli": "^2.11.15",
    "gatsby-image": "^2.3.4",
    "gatsby-plugin-manifest": "^2.3.6",
    "gatsby-plugin-material-ui": "^2.1.6",
    "gatsby-plugin-offline": "^3.1.4",
    "gatsby-plugin-preconnect": "^1.1.7",
    "gatsby-plugin-react-helmet": "^3.2.4",
    "gatsby-plugin-sharp": "^2.5.6",
    "gatsby-plugin-typescript": "^2.3.3",
    "gatsby-source-contentful": "^2.2.9",
    "gatsby-transformer-json": "^2.3.3",
    "gatsby-transformer-sharp": "^2.4.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-spring": "^8.0.27"
  },
  "devDependencies": {
    "@types/eslint": "^6.1.8",
    "@types/eslint-plugin-prettier": "^3.1.0",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/react-helmet": "^5.0.15",
    "@typescript-eslint/eslint-plugin": "^2.29.0",
    "@typescript-eslint/parser": "^2.29.0",
    "dotenv": "^8.2.0",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.4",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^2.5.1",
    "gatsby-plugin-eslint": "^2.0.8",
    "gatsby-plugin-s3": "^0.3.3",
    "prettier": "^2.0.5",
    "ts-node": "^8.9.0",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "build": "NODE_OPTIONS='-r dotenv/config' gatsby build",
    "develop": "NODE_OPTIONS='-r dotenv/config' gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
    "start": "NODE_OPTIONS='-r dotenv/config' yarn develop",
    "serve": "NODE_OPTIONS='-r dotenv/config' gatsby serve -p 8000",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
    "lint": "prettier --check src/**/*.{js,jsx,ts,tsx} && eslint -c .eslintrc 'src/**/*.{js,jsx,ts,tsx}'",
    "deploy": "NODE_OPTIONS='-r dotenv/config' gatsby-plugin-s3 deploy"
  }
}

Support for prefixing and minification

https://next.material-ui.com/getting-started/supported-platforms/#css-prefixing

@oliviertassinari Should we do that in the plugin? What do you think?

Doesn't work on starting on material-ui 4.2.1

After upgrading material ui to 4.2.1, theme is not applied. Gatsby and material ui versions are,

"@material-ui/core": "4.2.1",
"@material-ui/icons": "4.2.1",
"@material-ui/styles": "4.2.1",
"gatsby": "^2.13.32",
"gatsby-plugin-material-ui": "^2.1.4",

It is working fine on material-ui 4.2.0.

add support for @material-ui/styles

Material-Ui has a new theme engine. We should provide an option to the newer one which is available through the @material-ui/styles package

WebpackError: RangeError: Maximum call stack size exceeded with gatsby-plugin-material-ui

I for a mysterious reason got this error when using the plugin without disabling the css autoprefix disableAutoprefixing: true switching this to true fixed my problem, I'll leave this here in case someone else has the same issue:

The callstack:

295 |       return plugin(this.result.root, this.result);
  296 |     } catch (error) {
> 297 |       this.handleError(error, plugin);
      | ^
  298 |       throw error;
  299 |     }
  300 |   };


  WebpackError: RangeError: Maximum call stack size exceeded

  - lazy-result.js:297 LazyResult.run
    node_modules/postcss/lib/lazy-result.js:297:1

  - lazy-result.js:281 LazyResult.sync
    node_modules/postcss/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    node_modules/postcss/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    node_modules/postcss/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    node_modules/gatsby-plugin-material-ui/src/autoprefixer.js:8:55

  - lazy-result.js:295 LazyResult.run
    node_modules/postcss/lib/lazy-result.js:295:1

  - lazy-result.js:281 LazyResult.sync
    node_modules/postcss/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    node_modules/postcss/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    node_modules/postcss/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    node_modules/gatsby-plugin-material-ui/src/autoprefixer.js:8:55

  - lazy-result.js:295 LazyResult.run
    node_modules/postcss/lib/lazy-result.js:295:1

  - lazy-result.js:281 LazyResult.sync
    node_modules/postcss/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    node_modules/postcss/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    node_modules/postcss/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    node_modules/gatsby-plugin-material-ui/src/autoprefixer.js:8:55

  - lazy-result.js:295 LazyResult.run
    node_modules/postcss/lib/lazy-result.js:295:1

Next branch to use material-ui v5?

Is there a possibility of getting a next branch to match the v5 changes in material-ui?

"gatsby build" major problems? Things look really different? Check your versions!

If your gatsby build seems to just blow everything up and the final results looks terrible, check that you have the right material-ui + this plugin installed.

whew...

Dependency material-ui-plugin-cache-endpoint

This dependency was not found:
⠀
* material-ui-plugin-cache-endpoint in ./node_modules/gatsby-plugin-material-ui/gatsby-browser.js
⠀
To install it, you can run: npm install --save material-ui-plugin-cache-endpoint

Autoprefixing seems to not be working

It seems like autoprefixing is not happening, for e.g. using display: flex like so

const useStyles = makeStyles(theme => ({
  appBar: {
    display: "flex",
  },

I'd expect to see the following when inspecting the CSS

display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;

but I still just get, so no vendor prefixing seems to have been added

display: flex;

The config is the below i.e. Im not using disableAutoprefixing. What am I missing, shouldnt it autoprefix occur with this config and use case?

{
      resolve: "gatsby-plugin-material-ui",
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },

Using jss.insertionPoint instead of injectFirst

Question: I used to use my own StylesProvider in gatsby-browser.js, as suggested on the material-ui website:

import React from 'react';
import { jssPreset } from '@material-ui/styles';
import { create } from 'jss';

const jss = create({
  ...jssPreset(),
  // Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
  insertionPoint: document.getElementById('jss-insertion-point'),
});

const wrapRootElement = ({ element }) => {
  return (
    <>
      <StylesProvider jss={jss}>{element}</StylesProvider>
    </>
  );
};

Now, with this plugin, if I still want to use the jss-insertion-point approach, where do I place the create() function?

PS, I tried the below in the plugin config, following the structure of the material-ui/styles source code. It does not work, as I would need access to document to add the right insertionPoint (it should not be string, but rather a DOM node).

{
  resolve: `gatsby-plugin-material-ui`,
  options: {
    stylesProvider: {
      jss: {
        options: {
          insertionPoint: 'jss-insertion-point',
        },
      },
    },
  },
},

Plugin throws error if only stylesProvider is specified

import stylesProviderProps from "./.cache/styles-provider-props" returns an empty object instead of null

Make ThemeProvider available in pages

Hi,

I recently encountered a problem on using Material UI's ThemeProvider with Gatsby.
Since there is no root component, it's not possible to wrap the whole App with the ThemeProvider. Therefor I do wrap the layout component, which gets imported into the pages. In consequence I need to implement a workaround for all pages, to access the theme.

ThemeProvider in Layout:

const Layout = ({ children }) => {
  const classes = useStyles()
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Header />
      <main className={classes.content}>
        <div className={classes.toolbar} />
        {children}
      </main>
      <Footer />
    </ThemeProvider>
  )
}

Page workaround:

import theme from "../components/theme"

const Theme = theme
const useStyles = makeStyles(Theme => ({
// mui styles
}))

Is there a better way to use material ui ThemeProvider with gatsby?
Would it be possible to provide a injectIntoPages option in this plugin?

Build error: webpack warnings on build after upgrade to v3

After updating to "gatsby-plugin-material-ui": "^3.0.0" I've got the same issue as #65.

Installed packages:

browserslist: 4.16.3
autoprefixer: 10.2.5
postcss: 8.2.9
postcss-value-parser: 4.1.0

Error:

warn Unsafe builtin method was used, future builds will need to rebuild all pages
warn WebpackError: Unsafe builtin usage fs.existsSync
    at nikita-docs/node_modules/browserslist/node.js:38:1
    at nikita-docs/node_modules/browserslist/node.js:46:1
    at nikita-docs/node_modules/browserslist/node.js:197:1
    at nikita-docs/node_modules/browserslist/index.js:433:1
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/browsers.js:54:12
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/browsers.js:42:26
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:41:20
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:86:25
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:247:29
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:245:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:270:16
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/processor.js:67:27
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:138:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:74:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:60:16

  36 |     return filenessCache[file]
  37 |   }
> 38 |   var result = fs.existsSync(file) && fs.statSync(file).isFile()
     | ^
  39 |   if (!process.env.BROWSERSLIST_DISABLE_CACHE) {
  40 |     filenessCache[file] = result
  41 |   }

warn WebpackError: Unsafe builtin usage fs.statSync
    at nikita-docs/node_modules/browserslist/node.js:38:1
    at nikita-docs/node_modules/browserslist/node.js:46:1
    at nikita-docs/node_modules/browserslist/node.js:197:1
    at nikita-docs/node_modules/browserslist/index.js:433:1
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/browsers.js:54:12
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/browsers.js:42:26
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:41:20
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:86:25
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:247:29
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:245:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:270:16
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/processor.js:67:27
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:138:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:74:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:60:16

  36 |     return filenessCache[file]
  37 |   }
> 38 |   var result = fs.existsSync(file) && fs.statSync(file).isFile()
     | ^
  39 |   if (!process.env.BROWSERSLIST_DISABLE_CACHE) {
  40 |     filenessCache[file] = result
  41 |   }

warn WebpackError: Unsafe builtin usage fs.existsSync
    at nikita-docs/node_modules/browserslist/node.js:38:1
    at nikita-docs/node_modules/browserslist/node.js:199:1
    at nikita-docs/node_modules/browserslist/node.js:49:1
    at nikita-docs/node_modules/browserslist/node.js:197:1
    at nikita-docs/node_modules/browserslist/index.js:433:1
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/browsers.js:54:12
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/browsers.js:42:26
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:41:20
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:86:25
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:247:29
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:245:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/supports.js:270:16
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/autoprefixer/lib/processor.js:67:27
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:138:18
    at nikita-docs/node_modules/gatsby-plugin-material-ui/node_modules/postcss/lib/container.js:74:18

  36 |     return filenessCache[file]
  37 |   }
> 38 |   var result = fs.existsSync(file) && fs.statSync(file).isFile()
     | ^
  39 |   if (!process.env.BROWSERSLIST_DISABLE_CACHE) {
  40 |     filenessCache[file] = result
  41 |   }

Environment

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 15.14.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/.npm-global/bin/yarn
    npm: 7.5.3 - ~/.npm-global/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
    Safari: 13.1
  npmPackages:
    gatsby: ^3.2.1 => 3.2.1
    gatsby-image: ^3.2.0 => 3.2.0
    gatsby-plugin-catch-links: ^3.2.0 => 3.2.0
    gatsby-plugin-emotion: ^6.2.0 => 6.2.0
    gatsby-plugin-google-analytics: ^3.2.0 => 3.2.0
    gatsby-plugin-manifest: ^3.2.0 => 3.2.0
    gatsby-plugin-material-ui: ^3.0.0 => 3.0.0
    gatsby-plugin-mdx: ^2.2.0 => 2.2.0
    gatsby-plugin-offline: ^4.2.0 => 4.2.0
    gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
    gatsby-plugin-sitemap: ^3.2.0 => 3.2.0
    gatsby-remark-autolink-headers: ^3.2.0 => 3.2.0
    gatsby-remark-prismjs: ^4.2.0 => 4.2.0
    gatsby-remark-title-to-frontmatter: ^1.1.2 => 1.1.2
    gatsby-source-filesystem: ^3.2.0 => 3.2.0
  npmGlobalPackages:
    gatsby: 3.2.1

WebpackError: RangeError: Maximum call stack size exceeded (injectFirst TRUE)

When running gatsby build and injectFirst:true, the build fails with a WebPack Build error WebpackError: RangeError: Maximum call stack size exceeded

Upgrading to newer versions of Gatsby and related plugins still resulted in error. Is this due to a missing dependency when injectFirst mode is enabled? Both NPM and Yarn were used for package setup but still resulted in a failed build.

Running gatsby develop however works fine.

MacOS High Sierra 10.13.3
Node v11.6.0
Gatsby 2.1.23
React 16.8.4

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
    `gatsby-plugin-styled-components`,
  ],
};

> gatsby build

success open and validate gatsby-configs — 0.007 s
success load plugins — 0.178 s
success onPreInit — 0.352 s
success delete html and css files from previous builds — 0.027 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.019 s
success copy gatsby files — 0.056 s
success onPreBootstrap — 0.011 s
success source and transform nodes — 0.026 s
success building schema — 0.140 s
success createPages — 0.003 s
success createPagesStatefully — 0.067 s
success onPreExtractQueries — 0.001 s
success update schema — 0.073 s
success extract queries from components — 0.041 s
success run graphql queries — 0.031 s — 6/6 207.24 queries/second
success write out page data — 0.003 s
success write out redirect data — 0.001 s
⠐ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.371 s

info bootstrap finished - 3.033 s

⠈ Building production JavaScript and CSS bundles
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

⠁ Building production JavaScript and CSS bundlesBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
success Building production JavaScript and CSS bundles — 36.787 s

error Building static HTML failed for path "/404/"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  295 |       return plugin(this.result.root, this.result);
  296 |     } catch (error) {
> 297 |       this.handleError(error, plugin);
      | ^
  298 |       throw error;
  299 |     }
  300 |   };


  WebpackError: RangeError: Maximum call stack size exceeded

  - lazy-result.js:297 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:297:1

  - lazy-result.js:281 LazyResult.sync
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    [lib]/[gatsby-plugin-material-ui]/src/autoprefixer.js:8:53

  - lazy-result.js:295 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:295:1

  - lazy-result.js:281 LazyResult.sync
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    [lib]/[gatsby-plugin-material-ui]/src/autoprefixer.js:8:53

  - lazy-result.js:295 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:295:1

  - lazy-result.js:281 LazyResult.sync
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    [lib]/[gatsby-plugin-material-ui]/src/autoprefixer.js:8:53

  - lazy-result.js:295 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:295:1

package.json Dependencies

  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "@material-ui/styles": "^4.2.1",
    "gatsby": "2.1.23",
    "gatsby-image": "2.0.31",
    "gatsby-plugin-config": "1.0.7",
    "gatsby-plugin-htaccess": "^1.1.1",
    "gatsby-plugin-layout": "1.0.12",
    "gatsby-plugin-manifest": "2.0.22",
    "gatsby-plugin-material-ui": "^2.1.4",
    "gatsby-plugin-mixpanel": "^3.0.3",
    "gatsby-plugin-react-helmet": "3.0.8",
    "gatsby-plugin-react-svg": "2.1.0",
    "gatsby-plugin-sharp": "2.0.25",
    "gatsby-plugin-typescript": "2.0.10",
    "gatsby-plugin-ueno": "2.0.1",
    "gatsby-source-filesystem": "^2.1.6",
    "gatsby-source-mysql": "^2.2.0",
    "gatsby-transformer-sharp": "2.1.15",
    "gsap": "2.1.2",
    "gsap-tools": "1.0.9",
    "lodash": "^4.17.11",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-helmet": "5.2.0"
  },
  "devDependencies": {
    "@babel/core": "7.3.4",
    "@types/gsap": "1.20.2",
    "@types/lodash": "4.14.122",
    "@types/node": "11.10.4",
    "@types/react": "16.8.6",
    "@types/react-dom": "16.8.2",
    "@types/react-helmet": "5.0.8",
    "@ueno/stylelint-config": "1.1.2",
    "@ueno/tslint-config": "1.0.5",
    "rimraf": "2.6.3",
    "stylelint": "9.10.1",
    "tslint": "5.13.1",
    "tslint-react": "3.6.0",
    "typescript": "3.3.3333"
  }

Passing theme as an object does not set the primary color

.cache published on npm

@hupe1980 I have noticed that we publish a .cache folder in the npm package. It's strange: https://unpkg.com/browse/[email protected]/.cache/. Do you have this folder name configured in your global gitignore?

When to use the plugin vs. the theme?

Thanks @hupe1980 for publishing both. How should new users choose between using this plugin, vs. the theme?

Material UI V5 support?

Does this plugin work with Material UI V5 (alpha)? The docs only reference V3 and V4. Thanks!

hot reloading doesn't work

Thanks for the plugin, takes away some of the pain of integrating MUI especially with SSR.

While using it I'm noticing that changes to the theme aren't being picked up when running gatsby in development mode. I guess the way gatsby works is it doesn't watch the gatsby-config file.

What I'm doing though, is defining the theme in a file that should be watched by the app, and then require it in the gatsby-config file, besides in other parts of the application. This causes hot reloading to kick in, and yet the plugin doesn't reload the configuration, so changes to the theme are not reproduced in development mode until the app is restarted. Any ideas how to fix this?

[question] is there ways to uninline material ui style in html ?

I use plugin gatsby-plugin-uninline-styles to un-inline CSS from generated HTML files.

but with gatsby-plugin-material-ui, it cannot un-inline style tags from html file.

I found that it is because gatsby-plugin-material-ui do not generate css files

can it generate css file here src/gatsby-ssr.js#L46 instead of style tag for each pages ?

What options can be passed in the config??

The documentation is very limited, could you expand on how to use this theme/plugin by improving the documentation? I am really unsure as to what config options I can pass etc..

Error in restart codesandbox

Following the process, installed the plugin, materia-ui core on restart, I am getting following error:

> Sandbox Container: sandbox y0nj68znr9 restarting...
yarn run v1.13.0
$ gatsby develop
success open and validate gatsby-configs — 0.012 s
error Unable to find plugin "gatsby-plugin-material-ui". Perhaps you need to install its package?


  Error: Unable to find plugin "gatsby-plugin-material-ui". Perhaps you need to   install its package?

  - load.js:107 resolvePlugin
    [sandbox]/[gatsby]/dist/bootstrap/load-plugins/load.js:107:11

  - load.js:150 processPlugin
    [sandbox]/[gatsby]/dist/bootstrap/load-plugins/load.js:150:20

[Question]Should it work when js is disabled on the client?

Should this package render the HTML and CSS served straight from the server?

[email protected]" has unmet peer dependency "@material-ui/styles@>=4.0.0".

I get this warning but it never seems to cause problems. Any ideas? Sounds like I do indeed to install the other package as well?

Webpack warnings on build after upgrade to gatsby v3

After updating to gatsby v3 I get a bunch of warnings on build

WebpackError: Unsafe builtin usage fs."insert name of fs command"
They are coming from calls to autoprefixer

gatsby v3 now uses webpack 5 which I think requires [email protected]

Can you use without advanced configuration?

Hi!

I was trying to use this plugin but without the jss insertion specified here https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/#advanced you can't override styles properly. I think this should be done by default instead of requiring every project to setup another extra js file of config.

Unable to define function in the theme object

As per Gatsby doc

(...) plugin options will be stringified by Gatsby, so they cannot be functions

There is some case where defining functions in the theme object would be useful, in particular when dealing with the new @material-ui/system package to define some variant on a component as per the official doc.

Here is a minimal example

import { Button } from '@material-ui/core';
import { styled } from '@material-ui/styles';
import { style } from '@material-ui/system';

import { yellow, blue } = from './colors';

const variant = style({
  prop: 'gradient',
  cssProperty: false,
  themeKey: 'gradientButton',
});

const gradients = {
  primary: `linear-gradient(-61deg, ${yellow.light} 0%, ${yellow.dark} 100%)`,
  secondary: `linear-gradient(-61deg, ${blue.light} 0%, ${blue.dark} 100%)`,
};

const theme = {
  gradientButton: gradient => ({
    backgroundImage: gradients[gradient],
    color: '#fff',
  }),
};

const StyledButton = styled(Button)(variant);

<StyledButton gradient="primary">{'Gradient button'}</StyledButton>

A workaround would be to manually define every gradient objects under the gradientButton key but I can't remember if the Material-ui spec prohibits us to define functions in our custom theme object. Maybe @oliviertassinari can enlighten us on that point.

Maybe the Install Instruction should include `material-ui/core`?

Currently the install instruction is as followed:
Install
npm install gatsby-plugin-material-ui @material-ui/styles

However, in order for the components from material-ui to work, we still need to install @material-ui/core.

I am wondering why the installation is only installing material-ui/styles?

Theme workaround seems to be necessary

Currently using the ThemeProvider inside a Layout Component does not work.
Using the ThemeProvider inside a regular component provides the theme to the first child but does not propagate.

I had to use the workaround described here:
https://stackoverflow.com/questions/55821752/where-to-put-theme-file-when-using-the-gatsby-plugin-material-ui-with-gatsby

This works for me:

// mui-root-wrapper.js

import React from 'react'
import { ThemeProvider } from '@material-ui/styles'
import theme from './src/theme.js'
import CssBaseline from '@material-ui/core/CssBaseline'

const MUIWrapper = ({ element }) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {element}
  </ThemeProvider>
)
export default MUIWrapper

// gatsby-ssr.js

import MUIWrapper from './mui-root-wrapper'

export const wrapRootElement = MUIWrapper

// gatsby-browser.js

import MUIWrapper from './mui-root-wrapper'

require('typeface-roboto')

export const wrapRootElement = MUIWrapper

[Question] Why remove the server-side injected CSS?

Looks like a nice plugin with a cleaner implementation than the official one from Material-UI. Although, I don't understand why both these solutions to integrate Material-UI needs to first add the CSS on server-side, only to remove and re-apply them client side? It seems that I am misunderstanding something elemental, I only just got into Gatsby recently.

Also, I assume this is supported with Gatsby v2? :)

Thanks in advance,
Michael

CHANGELOG missing

I would like to see Changelog file and check all new updates from one place as I believe this plugin will get bigger over time.

Minimize Bundle Size procedures recommended?

In https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size.md it is recommend to use babel plugins to ensure that

import { Button, TextField } from '@material-ui/core';

are transpiled to:

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

I wonder if this also holds true for this the combination of gatsby and this plugin

WebpackError: TypeError: Cannot read property 'getStyleElement' of undefined

I am getting this error when I run gatsby build.

  18 |
  19 |   const sheets = globalLeak.get(pathname);
> 20 |   setHeadComponents([sheets.getStyleElement()]);
     |                             ^
  21 |   globalLeak.delete(pathname);
  22 | };
  23 |

gatsby-ssr.js:20 Module.onRenderBody
lib/plugins/gatsby-plugin-material-ui/gatsby-ssr.js:20:29
- api-runner-ssr.js:43
  lib/.cache/api-runner-ssr.js:43:39
- api-runner-ssr.js:39 ./.cache/api-runner-ssr.js.module.exports
  lib/.cache/api-runner-ssr.js:39:25
- develop-static-entry.js:80 Module../.cache/develop-static-entry.js._webpack exports.default
  lib/.cache/develop-static-entry.js:80:12
- bootstrap:24 Promise
  lib/webpack/bootstrap:24:1
- develop-static-entry.js:10 Promise._resolveFromExecutor
  lib/.cache/develop-static-entry.js:10:21
- bootstrap:68 new Promise
  lib/webpack/bootstrap:68:1
- bootstrap:5 tryCatcher
  lib/webpack/bootstrap:5:1
- bootstrap:50 MappingPromiseArray._promiseFulfilled
  lib/webpack/bootstrap:50:1
- api-runner-ssr.js:6 MappingPromiseArray.PromiseArray._iterate
  lib/.cache/api-runner-ssr.js:6:16
- bootstrap:67 MappingPromiseArray.init
  lib/webpack/bootstrap:67:1
- bootstrap:19 MappingPromiseArray._asyncInit
  lib/webpack/bootstrap:19:1
- api-runner-ssr.js:18 _drainQueueStep
  lib/.cache/api-runner-ssr.js:18:1
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 2.6.0 - /usr/local/bin/fish
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Languages:
Python: 3.6.4 - /Users/alex/anaconda3/bin/python
Browsers:
Chrome: 73.0.3683.103
Firefox: 65.0
Safari: 12.0.2
npmPackages:
gatsby: ^2.3.23 => 2.3.23
gatsby-image: ^2.0.39 => 2.0.39
gatsby-plugin-manifest: ^2.0.29 => 2.0.29
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
gatsby-plugin-sharp: ^2.0.34 => 2.0.34
gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
gatsby-source-filesystem: ^2.0.29 => 2.0.29
gatsby-transformer-sharp: ^2.1.18 => 2.1.18
npmGlobalPackages:
gatsby-cli: 2.5.8

Material-UI v3 and Styled Components? Can they play nicely together when using this plugin?

Hi there,

I would like to use Material UI v3 with Styled Components. I have read this package's issues and readme and am not too clear if it can be achieved with the plugin. Can you please provide some clarity.

If it can be achieved is it possible to also provide a detailed example.

Many thanks in advance.

Error in gatsby build with gatsby-plugin-material-ui enabled

I'm getting this error (output below) when building my application with this plugin enabled (enabled in gatsby-config.js). If I remove the plugin from gatsby-config.js, the problem goes away. My app still works just fine, so I'm not sure what this plugin actually does. But you can see in the error stack trace the error is originating in this plugin.

I'm using the latest versions of everything (I've updated all my plugins). I'm not sure where I'd even look to resolve this error further. I also don't get the error in development mode.

> gatsby build

success open and validate gatsby-configs - 0.024 s
success load plugins - 1.557 s
success onPreInit - 0.015 s
success delete html and css files from previous builds - 0.009 s
success initialize cache - 0.012 s
success copy gatsby files - 0.110 s
success onPreBootstrap - 0.008 s
success loading DatoCMS content - 4.262 s
success source and transform nodes - 4.496 s
success building schema - 0.642 s
success createPages - 0.001 s
success createPagesStatefully - 0.139 s
success onPreExtractQueries - 0.014 s
success update schema - 0.063 s
success extract queries from components - 0.388 s
success write out requires - 0.018 s
success write out redirect data - 0.002 s
success Build manifest and related icons - 0.310 s
success onPostBootstrap - 0.326 s
⠀
info bootstrap finished - 11.224 s
⠀
success run static queries - 0.093 s — 5/5 57.03 queries/second
success Building production JavaScript and CSS bundles - 85.968 s
success Rewriting compilation hashes - 0.005 s
success run page queries - 0.035 s — 3/3 122.73 queries/second
⠏ Building static HTML for pages

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  102 |       )
  103 |     } else {
> 104 |       result = new CssSyntaxError(
      |                ^
  105 |         message, line, column, this.css, this.file, opts.plugin)
  106 |     }
  107 | 


  WebpackError: CssSyntaxError: <css input>:2022:7: Unknown word
  
  - input.es6:104 Input.error
    input.es6:104:16
  
  - parser.es6:481 Parser.unknownWord
    parser.es6:481:11
  
  - parser.es6:198 Parser.decl
    parser.es6:198:11
  
  - parser.es6:108 Parser.other
    parser.es6:108:13
  
  - parser.es6:56 Parser.parse
    parser.es6:56:11
  
  - parse.es6:8 parse
    parse.es6:8:5
  
  - lazy-result.es6:41 new LazyResult
    lazy-result.es6:41:16
  
  - processor.es6:109 Processor.<anonymous>
    processor.es6:109:12
  
  - gatsby-ssr.js:57 Object.onRenderBody
    node_modules/gatsby-plugin-material-ui/gatsby-ssr.js:57:47
  

⠴ Building static HTML for pages
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/i809433/.npm/_logs/2019-06-29T01_51_54_062Z-debug.log```

Build error: Gatsby 3 and Gatsby-material-ui v3 error in lazy result.

Just updated to gatsby 3 and upgraded gatsby material ui to v3.
When running the build, I get this error:

gatsby-plugin-material-ui/node_modules/autoprefixer/node_modules/postcss/lib/
lazy-result.js: Property name expected type of string but got null

gatsby-config.js:
...

// Material ui
        // Material UI injection
        {
            resolve: "gatsby-plugin-material-ui",
            options: {
                stylesProvider: {
                    injectFirst: true,
                },
            },
        },
...

already tried this (found at other issue)

cd node_modules/gatsby-plugin-material-ui
yarn install --frozen-lockfile
yarn run build

but didn't work

any ideas or can I provide you with more information?

Build Error after upgrade: WebpackError: CssSyntaxError

After upgrading gatsby-theme-material-ui, which upgraded gatsby-plugin-material-ui to 2.0.1, I'm getting the following build error (only with gatsby build not with develop):

  WebpackError: CssSyntaxError: <css input>:3417:7: Unknown word
  
  - input.js:130 Input.error
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/input.js:130:1
  
  - parser.js:563 Parser.unknownWord
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/parser.js:563:1
  
  - parser.js:235 Parser.decl
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/parser.js:235:1
  
  - parser.js:133 Parser.other
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/parser.js:133:1
  
  - parser.js:77 Parser.parse
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/parser.js:77:1
  
  - parse.js:17 parse
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/parse.js:17:1
  
  - lazy-result.js:60 new LazyResult
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:60:1
  
  - processor.js:138 Processor.<anonymous>
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/processor.js:138:1
  
  - processor.js:117 Processor.process
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/processor.js:117:1
  
  - gatsby-ssr.js:50 Object.onRenderBody
    [lib]/[gatsby-plugin-material-ui]/gatsby-ssr.js:50:1
  
  - api-runner-ssr.js:43 
    lib/.cache/api-runner-ssr.js:43:20
  
  
  - api-runner-ssr.js:39 ./.cache/api-runner-ssr.js.module.exports
    lib/.cache/api-runner-ssr.js:39:17
  
  - static-entry.js:261 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
    lib/.cache/static-entry.js:261:3
  
  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1

2.0.0-alpha.6 flashing unstyled componentts

Tested only with the gatsby-material-kit-react starter, so not sure how specific to its config (material-ui version for example) this issue is. But one can easily toggle between having the unstyled flash or not by switching between @next (2.0.0-alpha.6) and @latest (1.2.4).

I'm afraid this may bite more people than necessary despite the alpha label because:

this repo's README only mentions the @next install now; and
there's currently no installation instructions on the plugin page at Gatsby's website (it's blank)

Where to put theme file when using this plugin?

I can't seem to get my theme file to have any effect on my components in a Gatsby app.

relevant part of gatsby-config.js

 `gatsby-plugin-netlify-cms`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToTheme: 'src/theme.js',
      },

theme.js

import { createMuiTheme } from '@material-ui/core/styles';

import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
  palette: {
    primary: indigo,
    secondary: pink,
    error: red,
  },
  spacing: {
      100
  }
})


export default theme;

within the component:

imports...
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  heroText: {
    color:'white',
    textAlign: 'center',
    lineHeight:7
  },
  mainBlogCopy: {
    marginTop: theme.spacing.unit,
    backgroundColor:theme.palette.primary
  },
});

export default withStyles(styles)(AboutPage);

package.json

 "dependencies": {
    "@material-ui/core": "^3.9.3",
    "gatsby": "^2.3.24",
    "gatsby-image": "^2.0.34",
    "gatsby-plugin-manifest": "^2.0.24",
    "gatsby-plugin-material-ui": "^1.2.4",

more...

How does one use a theme in another file with this plugin?

How can I get this to work?

I tried to follow the instructions in the example, but the elements I try to render don't have the default colors of the primary and secondary colors I give to the plugin syntax.

{
    resolve: `@wapps/gatsby-plugin-material-ui`,
    options: {
        theme: {
            primaryColor: '#D32F2F',
            secondaryCOlor: '#90A4AE',
        }
    },
},

Even if I pass the primary red and secondary grey, the theme still has purple in it.
Should be like this: https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=D32F2F&secondary.color=90A4AE
I have to be missing something, any help is appreciated.

Breaks gatsby develop whenever I yarn add a package

Whenever I yarn add a package, gatsby develop starts returning this error

It doesn't go away until I restart gatsby develop. Eats a lot of my time.

Error onPreBootstrap lifecycle

I recently started getting the error below when I run "gatsby develop", although the build step completes successfully afterwards (unsure if this will break a Netlify deploy however):

ERROR #11321 PLUGIN

"gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:

The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null

  39 |   }
  40 |
> 41 |   fs.writeFileSync(dir + "/styles-provider-props.js", module);
     |      ^
  42 | };

File: node_modules\gatsby-plugin-material-ui\gatsby-node.js:41:6

Font requested a second time upon hydration.

I am using this plugin and I am experiencing a strange issue where my font is being requested a second time after the page loads on the build.

My setup is like the following:

// gatsby-config.js
plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },

// ThemeProvider.js

import {  createMuiTheme, ThemeProvider as MuiThemeProvider, } from '@material-ui/core/styles';
import { ThemeProvider as ScThemeProvider } from 'styled-components';

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [raleway],
      },
    },
  },
});

const ThemeProvider = ({children }) => {
  return (
    <MuiThemeProvider theme={theme}>
      <ScThemeProvider theme={theme}>{children}</ScThemeProvider>
    </MuiThemeProvider>
  );
};
export default ThemeProvider;

// ... gatsby-browser.js and gatsby-ssr.js

exports.wrapPageElement = ({ element }) => (
  <ThemeProvider>
    <CssBaseline />
    {element}
  </ThemeProvider>
);

With this setup I am seeing the font load on the server-side and the once again once react hydrates:

The weird thing is that sometimes it DOESN'T load twice.... sometimes it loads once as expected. Am I doing something wrong here?

if you want to see the live website checkout https://coivd19.klick.com

Documentation - What Problem Does the Plugin Solve

Hi! I have added this plugin to my Material UI / Gatsby project (after seeing that the production build looks completely different than during development) and it seems to have fixed my problem (there are intermittent issues still persisting)

I wonder, the documentation is a bit lacking for Material UI and Gatsby in general, so what problem does this plugin actually solve for? What is happening in the prod build that is not allowing Material styling to work out of the box?

The documentation here seems to state you do not need a plugin for Material UI to work with Gatsby, but that does not seem to be the case?

Styles not injected in head on server side rendering

I have a material ui button

export const MenuButton: React.FC<{
  isOpen: boolean
  setIsOpen: (isOpen: boolean) => void
}> = props => {
  const {isOpen, setIsOpen} = props
  return (
    <IconButton
      color="primary"
      aria-label="menu"
      style={{marginLeft: 'auto'}}
      onClick={() => setIsOpen(!isOpen)}
    >
      {isOpen ? <MenuOpenIcon /> : <MenuIcon />}
    </IconButton>
  )
}

And then on the server side renders as

<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary" tabindex="0" type="button" aria-label="menu" style="margin-left:auto"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></span></button>

Which is fine, but .MuiButtonBase-root styles are not added to the header. Only with javascript enabled tha page actually works. And even with js, it will flicker from no styles to with styles.

config



    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
          pathToStylesProvider: `${__dirname}/stylesProviderProps.ts`,
        },
      },
    },

stylesProviderProps.ts

import { jssPreset } from '@material-ui/styles'
import { create } from 'jss'

const stylesProviderProps = {
  jss: create({ ...jssPreset(), insertionPoint: `mui-inject-first` }),
}

export default stylesProviderProps

When js is enabled this style is added:

<style data-jss="" data-meta="MuiButtonBase">
.MuiButtonBase-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.MuiButtonBase-root::-moz-focus-inner {
  border-style: none;
}
.MuiButtonBase-root.Mui-disabled {
  cursor: default;
  pointer-events: none;
}
@media print {
  .MuiButtonBase-root {
    -webkit-print-color-adjust: exact;
  }
}
</style>

I think this should already be in the html

I cannot pass function in `stylesProvider`

A plugin option cannot pass function so generateClassName and jss cannot be passed.

for jss I got the error from MakeStyles method said stylesOptions.jss.createStyleSheet is not a function

This might relate to #9

Incorrect styling after switching to client side

Problem:
After switching from SSR to client-side and dom hydration some of the jss styles are off and the whole layout is out of whack. Screenshots with an affected component for both server and client renders:

What you see on the screenshots is class name collision, somehow after hydration class name was generated again with a lower index which was already taken. I tried adding seed to the classnames generator, the collision was gone but the class was simply empty after hydration.

What I've already found:

I traced the problem to this gatsby issue gatsbyjs/gatsby#17676. The solution with replacing hydration function from hydrate to render. It works, but it is a performance hit and with React 17 it is said it soon will be deprecated
Solution:

//gatsby-broswer.js
export function replaceHydrateFunction() {
  return (element, container, callback) => {
    ReactDOM.render(element, container, callback)
  }
}

Fixable ?
Any tips for a better solution? I am really surprised nobody else has had this problem. Any chance we might fix this within the plugin?

Increased bundle size after gatsby build

Recently I updated the plugin and saw a major increase in my bundle size.
With v2.1.1 the size of public/app*.js was 360K which goes to 1.1M when building with v2.1.3. I just build the app with different of this plugin and didn't touch any of the code.

Below is the final build of my app with different versions of the plugin.

gatsby-plugin-material-ui: v2.1.1

-rw-rw-r-- 1 hello hello  20K Jul  2 14:42 public/10-ebe60cce32bd9ed2f0c5.js
-rw-rw-r-- 1 hello hello 360K Jul  2 14:42 public/app-59946657d0e4b7a8e1e8.js
-rw-rw-r-- 1 hello hello 2.3K Jul  2 14:42 public/component---src-pages-404-js-061263c378e3b117d776.js
-rw-rw-r-- 1 hello hello 6.1K Jul  2 14:42 public/component---src-pages-about-js-7c9c919efea8e8037a34.js
-rw-rw-r-- 1 hello hello 9.6K Jul  2 14:42 public/component---src-pages-blog-js-80e2624fc6d7249a3408.js
-rw-rw-r-- 1 hello hello 3.0K Jul  2 14:42 public/component---src-pages-contact-js-f8bf0b800be27a24409a.js
-rw-rw-r-- 1 hello hello 4.1K Jul  2 14:42 public/component---src-pages-index-js-d7fbf0f78749f602a59a.js
-rw-rw-r-- 1 hello hello  11K Jul  2 14:42 public/component---src-templates-blog-js-7c9f8a26f63d6327760f.js
-rw-rw-r-- 1 hello hello  104 Jul  2 14:42 public/styles-020a56298d1688f62e7b.js
-rw-rw-r-- 1 hello hello 2.6K Jul  2 14:42 public/webpack-runtime-093a3457aed3d7d10e1a.js

gatsby-plugin-material-ui: v2.1.3

-rw-rw-r-- 1 hello hello  20K Jul  2 14:37 public/10-1af1c46abb5c90e26110.js
-rw-rw-r-- 1 hello hello 1.1M Jul  2 14:37 public/app-6038e3b0fdefa64eac2a.js
-rw-rw-r-- 1 hello hello 2.3K Jul  2 14:37 public/component---src-pages-404-js-dc81a6b33d26e3acd251.js
-rw-rw-r-- 1 hello hello 6.1K Jul  2 14:37 public/component---src-pages-about-js-7ea57f97fe75d6617b59.js
-rw-rw-r-- 1 hello hello 9.6K Jul  2 14:37 public/component---src-pages-blog-js-f0585bba9eaadad47228.js
-rw-rw-r-- 1 hello hello 3.0K Jul  2 14:37 public/component---src-pages-contact-js-879bd071ae7b5ea9eabb.js
-rw-rw-r-- 1 hello hello 4.1K Jul  2 14:37 public/component---src-pages-index-js-477adb6a7b524c907d48.js
-rw-rw-r-- 1 hello hello  11K Jul  2 14:37 public/component---src-templates-blog-js-4125d7b8fcc5043a478f.js
-rw-rw-r-- 1 hello hello  104 Jul  2 14:37 public/styles-a6fef45c2fb19a05e4df.js
-rw-rw-r-- 1 hello hello 2.6K Jul  2 14:37 public/webpack-runtime-a1a2edf5579bbbba34b9.js

Packages

"@material-ui/core": "^4.1.3"
"@material-ui/icons": "^4.2.1"
"@material-ui/styles": "^4.1.2"
"gatsby": "^2.12.0"

Support Yarn PNP / Plug'n'Play

It seems this package tries to write to a .cache folder within node_modules. Using Yarn 2 Plug'n'Play this doesn't work as that is a read-only virtual file system so the build fails. Can you do like most other modules and store your .cache in the project directory instead? Or am I missing something?

Thanks for the great plugin!

"gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:

EROFS: read-only filesystem, mkdir '/node_modules/gatsby-plugin-material-ui/.cache'

  36 | 
  37 |   if (!fs.existsSync(dir)) {
> 38 |     fs.mkdirSync(dir);
     |        ^
  39 |   }
  40 | 
  41 |   fs.writeFileSync(dir + "/styles-provider-props.js", module);

File: .yarn/$$virtual/gatsby-plugin-material-ui-virtual-1b8deca526/0/cache/gatsby-plugin-material-ui-npm-2.1.6-fc64177c4c-2.zip/node_modules/gatsby-plugin-material-ui/gatsby-node.js:38:8

  Error: EROFS: read-only filesystem, mkdir '/node_modules/gatsby-plugin-material-ui/.cache'
  - .pnp.js:27535 makeError
    /home/noland/projects/acdc-shop/.pnp.js:27535:24

Using `Box` component.

Hey there,
I am trying to use this with material ui's Box . Which and I got error like this . I am using gatsby 2.1.4.

Any idea why?

Thanks for this plugin btw