Module not found: Package not exported from path...

[s3mi0tics]

I cant get my page to load here are my error messages, am I not importing the files right into my component?

Failed to compile.

Module not found: Error: Package path ./lib/codemirror.css is not exported from package /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror (see exports field in /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror/package.json)
WARNING in [eslint]
src/components/Editor.js
Line 7:24: 'ControlledEditor' is defined but never used no-unused-vars

ERROR in ./src/components/Editor.js 5:0-39
Module not found: Error: Package path ./lib/codemirror.css is not exported from package /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror (see exports field in /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror/package.json)

ERROR in ./src/components/Editor.js 6:0-37
Module not found: Error: Package path ./theme/github.css is not exported from package /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror (see exports field in /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror/package.json)

ERROR in ./src/components/Editor.js 7:0-33
Module not found: Error: Package path ./mode/xml/xml is not exported from package /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror (see exports field in /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror/package.json)

ERROR in ./src/components/Editor.js 8:0-47
Module not found: Error: Package path ./mode/javascript/javascript is not exported from package /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror (see exports field in /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror/package.json)

ERROR in ./src/components/Editor.js 9:0-33
Module not found: Error: Package path ./mode/css/css is not exported from package /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror (see exports field in /Users/colbykauk/Desktop/Engineering/Code_Alongs/Code_Pen_Clone/code_pen_clone/node_modules/codemirror/package.json)

ERROR in [eslint]
src/components/Editor.js
Line 26:10: 'ControledEditor' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.

webpack compiled with 6 errors and 1 warning

this is what my component looks like:

import React from 'react'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/github.css'
import 'codemirror/mode/xml/xml'
import 'codemirror/javascript/javascript'
import 'codemirror/mode/css/css'
import {Controlled as ControlledEditor} from 'react-codemirror2'

export default function Editor(props) {
    const{
        language,
        displayName,
        value,
        onChange
    } = props

    function handleChange(editor, data, value){
        onChange(value)
    }
  return (
    <div className='editor-container'>
        <div className='editor-title'>
            {displayName}
            <button>o/c</button>
        </div>
        <ControledEditor
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options ={{
                lineWrapping: true,
                lint: true,
                mode: language,
                lineNumbers: true
            }}
        />
    </div>
  )
}

[jaywcjlove]

@s3mi0tics You can post your example, I think you are not using our components.

You are using react-codemirror2 instead of @uiw/react-codemirror

[s3mi0tics]

@jaywcjlove i am using both by the direction of the video that I am following a long with. I am actually having this same problem in two separate tutorials from different people which I am following exactly what the tutorials are telling me.

[jaywcjlove]

@s3mi0tics You can use codesandbox.io to provide me with an example that can reproduce the error. Let me see what the problem is.

[s3mi0tics]

alright, forgive me for being a noob, I was able to copy the files to the sandbox but was unable to run it. If you look at this does it give you the info you need? https://codesandbox.io/p/github/s3mi0tics/code_pen_clone/main?workspace=%257B%2522activeFileId%2522%253Anull%252C%2522openFiles%2522%253A%255B%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522sidekickItems%2522%253A%255B%257B%2522type%2522%253A%2522SETUP_SHELL_LOG%2522%252C%2522shellId%2522%253A%2522claotejs0000jl0gce2ohfk2p%2522%252C%2522isMinimized%2522%253Afalse%252C%2522key%2522%253A%2522claotejs0000jl0gce2ohfk2p%2522%257D%252C%257B%2522key%2522%253A%2522clappgcx600083b6k1sfwynfj%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D

[s3mi0tics]

Also, Thank you so much!

[s3mi0tics]

does it have something to do with the version of my codemirror?

[jaywcjlove]

@s3mi0tics The repository of react-codemirror2 is here: https://github.com/scniro/react-codemirror2

This one is different, it depends on codemirror v5, @uiw/react-codemirror v4+ depends on codemirror v6

https://github.com/scniro/react-codemirror2/blob/0f2bb13cad2fb1364eb063cbd7ec9aae726a55eb/package.json#L56

[jaywcjlove]

https://github.com/scniro/react-codemirror2/blob/0f2bb13cad2fb1364eb063cbd7ec9aae726a55eb/package.json#L55-L57

@s3mi0tics

[jaywcjlove]

react-codemirror2 only supports codemirror v5, react >=15.5 <= 17.x

@s3mi0tics