search

hupe1980 / gatsby-plugin-material-ui

Gatsby plugin for Material-UI with built-in server-side rendering support
MIT License
136 stars 25 forks source link

Support for Gatsby 4.0.X. (We'd like to use Gatsby 4.0.X with Material-UI 4.0) #83

Open visualjeff opened 2 years ago

visualjeff commented 2 years ago

Does gatsby-plugin-material-ui@3.0.1 for (material-ui 4) work with Gatsby 4.0.X?

npm i gatsby-plugin-material-ui@3.0.1 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: gatsby-starter-default@0.1.0 npm ERR! Found: gatsby@4.0.2 npm ERR! node_modules/gatsby npm ERR! gatsby@"^4.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer gatsby@"^3.0.0" from gatsby-plugin-material-ui@3.0.1 npm ERR! node_modules/gatsby-plugin-material-ui npm ERR! gatsby-plugin-material-ui@"3.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Thank you for your time!

mwskwong commented 2 years ago 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps

The workaround is literally mentioned here. Just use --legacy-peer-deps when you update or install packages...

amalitsky commented 2 years ago

The workaround is literally mentioned here. Just use --legacy-peer-deps when you update or install packages...

Might not be that simple, i.e. #82

mwskwong commented 2 years ago

The workaround is literally mentioned here. Just use --legacy-peer-deps when you update or install packages...

Might not be that simple, i.e. #82

What do you mean? He was trying to use gatsby-plugin-material-ui v3 (not v4!!!!), MUI v4, and Gatsby v4. Everything is competible.

marcelpanse commented 2 years ago

We just upgraded to Gatsby 4 and are still using Material UI 4.

However when using the 3.0.1 version of this plugin I get a bunch of errors during the build, see the output below. It seems the plugin is not compatible with Gatsby 4?

When I use the 4.0.0 version of this plugin it works fine in at runtime, but the SSR fails to insert the inline CSS. It seems it only adds an empty <style data-emotion="css "></style> tag where previously it would insert a <style id="jss-server-side">...</style> tag with all the styles in it causing a nasty FOUC.

So I'm confused which version to use. Any help much appreciated.

/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
/Users/marcelpanse/Documents/Sources/website/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Channel closed
    at new NodeError (node:internal/errors:371:5)
    at process.target.send (node:internal/child_process:721:16)
    at Object.sendMessage (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-worker/dist/child.js:51:9)
    at Object.intentifiedActionCreators.<computed> [as endActivity] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter.js:341:9)
    at Object.end (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/lib/reporter/reporter-phantom.js:25:23)
    at updateSchemaComposer (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:187:12)
    at buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/schema.js:64:3)
    at build (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/schema/index.js:112:18)
    at Object.buildSchema (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby/src/utils/worker/child/schema.ts:25:3)
Emitted 'error' event on process instance at:
    at processEmit (/Users/marcelpanse/Documents/Sources/website/node_modules/signal-exit/index.js:161:32)
    at process.emit (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-telemetry/node_modules/@turist/fetch/dist/sourcemap-register.js:926:21)
    at processEmit [as emit] (/Users/marcelpanse/Documents/Sources/website/node_modules/gatsby-cli/node_modules/signal-exit/index.js:197:34)
    at node:internal/child_process:725:35
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  code: 'ERR_IPC_CHANNEL_CLOSED'
}
yorchperaza commented 2 years ago

Any solution to this error? --legacy-peer-deps result in broken build

yorchperaza commented 2 years ago

The issue is the documentation, which exists 2 pages and 2 commands, @next is the error https://www.gatsbyjs.com/plugins/gatsby-plugin-material-ui/ the correct: https://www.gatsbyjs.com/plugins/gatsby-theme-material-ui/

Correct command: npm install gatsby-theme-material-ui @mui/material @emotion/react @emotion/styled