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

Sanity V3 media plugin dependency issue #33

Open
3 tasks
stevenbister opened this issue Sep 7, 2022 · 3 comments
Open
3 tasks

Sanity V3 media plugin dependency issue #33

stevenbister opened this issue Sep 7, 2022 · 3 comments
Assignees
@stevenbister
Labels
bug Something isn't working

Comments

@stevenbister
Copy link
Contributor

stevenbister commented Sep 7, 2022 •
edited
Loading

Description

When installing sanity-plugin-media an error get's thrown by Remix

Link to Reproduction

http://localhost:3000

Steps to reproduce

Install the sanity-plugin-media

https://github.com/robinpyon/sanity-plugin-media/tree/v3-studio

npm install --save sanity-plugin-media@v3-studio @mdx-js/react

Import and add the plugin to your sanity.config.ts file

import {media} from 'sanity-plugin-media'

export default createConfig({
  // ...
  plugins: [media()]
})

Run

npm run dev

When you visit localhost you will be greeted with a similar error

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/stevebister/SITES/osc-sanity-remix/node_modules/@mdx-js/react/index.js from /Users/stevebister/SITES/osc-sanity-remix/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js not supported.
Instead change the require of index.js in /Users/stevebister/SITES/osc-sanity-remix/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/stevebister/SITES/osc-sanity-remix/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js:8:13)
    at Object.<anonymous> (/Users/stevebister/SITES/osc-sanity-remix/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.js:6:20)
    at Object.<anonymous> (/Users/stevebister/SITES/osc-sanity-remix/node_modules/theme-ui/dist/theme-ui.cjs.dev.js:7:11)
    at Object.<anonymous> (/Users/stevebister/SITES/osc-sanity-remix/node_modules/theme-ui/dist/theme-ui.cjs.js:6:20)
    at Object.<anonymous> (/Users/stevebister/SITES/osc-sanity-remix/node_modules/sanity-plugin-media/lib/cjs/index.js:10:22)
    at Object.<anonymous> (/Users/stevebister/SITES/osc-sanity-remix/build/index.js:1522:165)
    at /Users/stevebister/SITES/osc-sanity-remix/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:144:13)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:138:14)
    at Route.dispatch (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/layer.js:95:5)
    at /Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:284:15
    at param (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:365:14)
    at param (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:376:14)
    at Function.process_params (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:421:3)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:280:10)
    at logger (/Users/stevebister/SITES/osc-sanity-remix/node_modules/morgan/index.js:144:5)
    at Layer.handle [as handle_request] (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:328:13)
    at /Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/express/lib/router/index.js:280:10)
    at SendStream.error (/Users/stevebister/SITES/osc-sanity-remix/node_modules/serve-static/index.js:121:7)
    at SendStream.emit (node:events:527:28)
    at SendStream.error (/Users/stevebister/SITES/osc-sanity-remix/node_modules/send/index.js:270:17)
    at SendStream.onStatError (/Users/stevebister/SITES/osc-sanity-remix/node_modules/send/index.js:417:12)
    at next (/Users/stevebister/SITES/osc-sanity-remix/node_modules/send/index.js:759:28)
    at /Users/stevebister/SITES/osc-sanity-remix/node_modules/send/index.js:767:23
    at FSReqCallback.oncomplete (node:fs:198:21)

Release Version

1.0.0

Browser

No response

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

This appears to be an issue with Remix not liking the ES module in @theme-ui/mdx which is a dependency of sanity-plugin-media and doesn't seem to play nice with Remix
@stevenbister stevenbister self-assigned this Sep 7, 2022
@stevenbister stevenbister added the bug Something isn't working label Sep 7, 2022
@stevenbister
Copy link
Contributor Author

stevenbister commented Sep 8, 2022 •
edited
Loading

Possible solution?

@stevenbister
Copy link
Contributor Author

stevenbister commented Sep 8, 2022 •
edited
Loading

The serverDependenciesToBundle option in the config doesn't seem to work with this package. And the rmx-cli doesn't pick it up as an ESM dependency :/

I have a fix in place with some steps needed to apply:

  1. Install @theme-ui/mdx as our own dependency (patch-package won't work if it can't find it in our package.json)
  2. Locate the @theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js & @theme-ui/mdx/dist/theme-ui-mdx.cjs.prod.js files
  3. Update the require(...) to import(...) at the top of the files
  4. Run npx patch-package @theme-ui/mdx to create a patch file (https://www.npmjs.com/package/patch-package)
  5. Add "postinstall": "patch-package" to the package.json
  6. Run npm i patch-package --save-dev
  7. Add COPY patches/@theme-ui+mdx+0.14.7.patch /myapp/patches/@theme-ui+mdx+0.14.7.patch to each Dockerfile to ensure the patch file gets included in the CI build

Requires testing in CI

@stevenbister stevenbister mentioned this issue Sep 8, 2022
Merged
@stevenbister stevenbister linked a pull request Sep 8, 2022 that will close this issue
Feature/install media #38
Merged
@stevenbister
Copy link
Contributor Author

It looks as though theme-ui has it on their roadmap to fully support ESM/MDX which I imagine should fix this issue

@stevenbister stevenbister removed a link to a pull request Sep 9, 2022
Feature/install media #38
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@stevenbister stevenbister

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@stevenbister