react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

Use with Snowpack

Open jcuenod opened this issue 4 years ago • 2 comments

On an initial attempt to get this working with snowpack, I'm running into an issue resolving the mode:

Uncaught (in promise) TypeError: Failed to resolve module specifier 'codemirror/mode/jsx/jsx.js'

My code is minimal boilerplate:

import React from "react"
import CodeMirror from "@uiw/react-codemirror"
import "codemirror/keymap/sublime"
import "codemirror/theme/monokai.css"

const code = `const a = 0`

const App = () =>
	<div>
		<CodeMirror
			value={code}
			options={{
				theme: "monokai",
				keyMap: "sublime",
				mode: "jsx",
				lineNumbers: true,
			}}
		/>
	</div>

export default App

jcuenod avatar Mar 24 '21 18:03 jcuenod

@jcuenod

Snowpack takes a different approach: Instead of bundling your entire application for this one requirement, Snowpack processes your dependencies separately. Here’s how it works:

node_modules/react/**/*     -> http://localhost:3000/web_modules/react.js
node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js
node_modules/codemirror/**/* -> http://localhost:3000/web_modules/codemirror.js 

https://github.com/uiwjs/react-codemirror/blob/b8cd61eb270fb9b35d23c3f971e37a2c52fbd94c/src/index.js#L43

Here we are dynamically loading mode js

jaywcjlove avatar Mar 25 '21 02:03 jaywcjlove

Yes, so I'm wondering whether there's another way to load a mode (like whether I can supply a mode object or something).

jcuenod avatar Mar 25 '21 14:03 jcuenod