CODEWITHSUNDEEP
reactjsjsxcode-editor
Naveed Qureshi
Naveed Qureshi

Reputation: 41

ACE editor integration in react application (JSX) - ReferenceError: window is not defined

I am new to react(JSX) and working on a POC where I have to integrate ACE code editor. I have a parent component which has UI controls and a child component where I have added ACE editor code following this link (https://www.npmjs.com/package/react-ace). Below is the child component

import React, { useState} from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";


const AceEditorTest = () =>
{
    const [search, setSearch] = useState('');
    function onChange(e) {
        setSearch(e.target.value);
        console.log("change", newValue);
    }
    return (
        <AceEditor
            mode="java"
            theme="github"
             onChange={onChange}
            name="UNIQUE_ID_OF_DIV"
            editorProps={{ $blockScrolling: true }}
        />       
    );
}
export default AceEditorTest;

This is how I have integrated the child component in to Main component

<AceEditorTest/>

When I run the application I am getting "ReferenceError: window is not defined" error .

Can anyone help me here?

Upvotes: 0

Views: 460

Answers (0)

Related Questions