gatsby-plugin-material-ui icon indicating copy to clipboard operation
gatsby-plugin-material-ui copied to clipboard

Published 20 hours ago • verified publisher icon hupe1980

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

Open visualjeff opened this issue 3 years ago • 6 comments

Does [email protected] for (material-ui 4) work with Gatsby 4.0.X?

npm i [email protected] npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] 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 [email protected] 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!

visualjeff avatar Oct 28 '21 19:10 visualjeff 

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...

mwskwong avatar Nov 10 '21 02:11 mwskwong

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

amalitsky avatar Nov 10 '21 05:11 amalitsky

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.

mwskwong avatar Nov 10 '21 06:11 mwskwong

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'
}

marcelpanse avatar Nov 24 '21 12:11 marcelpanse

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

yorchperaza avatar Mar 29 '22 01:03 yorchperaza

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

yorchperaza avatar Mar 29 '22 01:03 yorchperaza