mantinedev/gatsby-template

Mantine + Gatsby.js template

gatsby-template's Issues

Title props not all working

Update: this is ready to look at now

Because mantine-gatsby-template (this repo) is still on 5.1.0 of @mantine/hooks and @mantine/core, Title props are not all working correctly (particularly size and variant/gradient) but updating to 5.10.1 like the Vite template already is fixes it. I will open a PR if you want. PR #3 opened with that. Do you want to update any other deps like gatsby, @emotion/react or react & react-dom simultaneously?

gatsby-template exhibiting the issue in my fork's canary branch:

• diff
• CodeSandbox
• Vercel deployment

my fork's updated-mantine-5.10.1 branch, issues resolved:

• diff from master
• diff from rdela:canary
• CodeSandbox
• Vercel deployment

mantine-vite-template working fine with the same code, also on 5.10.1

• diff
• CodeSandbox
• Vercel deployment

FOUC on v. 6.0.1

Hi!

I was trying to investigate an issue with FOUC on Gatsby in my own project, but it's easily replicated with this template too.

Bug description

FOUC on loading the page.
There is <style data-emotion="mantine "></style> in the head of the HTML document instead of actual styles.

Steps to reproduce

See README.md of this repo. Reproducible locally and on Vercel.

Expected behavior

The styles are loaded initially and there is no FOUC.

Notes

Happens on 6.0.1 too.

## Breaks with Gatsby 5 and React 18 or React 17

Breaks with Gatsby 5 and React 18 or React 17

This only works as is with legacy versions of the deps, I need this to work up to date and help aid in debugging why the gatsby-plugin-mantine isn't handling the server side code in my real application, but I couldn't even get this to work.

• git clone [email protected]:mantinedev/mantine-gatsby-template.git
• cd into mantine-gatsby-template
• ran yarn
• then ran yarn gatsby to get the latest gatsby v5.5
• Final command to run application yarn start and I am presented with this error

My package.json

{
  "name": "mantine-gatsby-template",
  "version": "1.0.0",
  "description": "Mantine + Gatsby.js template",
  "main": "index.js",
  "repository": "[email protected]:mantinedev/mantine-gatsby-template.git",
  "author": "Vitaly Rtishchev <[email protected]>",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "clean": "gatsby clean",
    "start": "gatsby develop -H 0.0.0.0 -p 5001",
    "serve": "gatsby serve -H 0.0.0.0 -p 5002"
  },
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@mantine/core": "5.1.0",
    "@mantine/hooks": "5.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "eslint": "^8.10.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "^16.1.0",
    "eslint-config-mantine": "1.1.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "gatsby": "^5.5.0",
    "gatsby-plugin-mantine": "^5.0.0",
    "typescript": "^4.6.4"
  }
}

How can this work or is there a more updated template I am not aware of?