Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
visualjeff opened this issue Oct 28, 2021 · 6 comments
Open

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

visualjeff opened this issue Oct 28, 2021 · 6 comments

Comments

@visualjeff
Copy link

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!
@mwskwong
Copy link 

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
Copy link

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
Copy link

mwskwong commented Nov 10, 2021 •
edited
Loading

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
Copy link

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

@kmjennison kmjennison mentioned this issue Jan 25, 2022
Closed
6 tasks
@yorchperaza
Copy link

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

@yorchperaza
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@marcelpanse @amalitsky @yorchperaza @visualjeff @mwskwong