uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.69k stars 134 forks source link

Use with Snowpack #95

Open jcuenod opened 3 years ago

jcuenod commented 3 years ago

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
jaywcjlove commented 3 years ago

@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

jcuenod commented 3 years ago

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