search

Open-Study-College / osc-sanity-remix

0 stars 0 forks source link

Sanity V3 media plugin dependency issue #33

Open stevenbister opened 2 years ago

stevenbister commented 2 years ago

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

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 commented 1 year ago

Possible solution?

stevenbister commented 1 year ago

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 commented 1 year ago

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