CodeEditor + Next.js?

[phstc]

I'm trying to run the code for the example page with a Next.js application. The editor loads correctly, but I don't get syntax highlighting or errors, or warnings.

Any idea of what it could be? I don't see any related error in the console.

[just-boris]

Did you import CSS files for the themes like it is shown in our example? Only explicitly imported themes will work.

You may also configure lazy-loading for theming assets via ace.config.set("basePath", "/some/folder"); config, but it would require manually copying files into the target folder, not sure if you can do it with next.js

[phstc]

Hi @just-boris

Yes, I did. It's pretty much a copy and paste from the example, unless I missed something.

The code I'm using 👇

import { CodeEditor, Header } from "@cloudscape-design/components"; import "ace-builds/css/ace.css"; import "ace-builds/css/theme/dawn.css"; import "ace-builds/css/theme/tomorrow_night_bright.css"; import { withSSRContext } from "aws-amplify"; import React from "react"; const i18nStrings = { loadingState: "Loading code editor", errorState: "There was an error loading the code editor.", errorStateRecovery: "Retry", editorGroupAriaLabel: "Code editor", statusBarGroupAriaLabel: "Status bar", cursorPosition: (row, column) => `Ln ${row}, Col ${column}`, errorsTab: "Errors", warningsTab: "Warnings", preferencesButtonAriaLabel: "Preferences", paneCloseButtonAriaLabel: "Close", preferencesModalHeader: "Preferences", preferencesModalCancel: "Cancel", preferencesModalConfirm: "Confirm", preferencesModalWrapLines: "Wrap lines", preferencesModalTheme: "Theme", preferencesModalLightThemes: "Light themes", preferencesModalDarkThemes: "Dark themes", }; type CodeEditorSnippetProps = { resourceResponse: any; id: string; }; type CodeEditorSnippetState = { ace: any; value: string; language: string; preferences: any; loading: boolean; }; export default class CodeEditorSnippet extends React.PureComponent< CodeEditorSnippetProps, CodeEditorSnippetState > { constructor(props) { super(props); this.state = { ace: undefined, value: JSON.stringify(props.resourceResponse.data, null, 2), language: "json", preferences: undefined, loading: true, }; this.onChange = this.onChange.bind(this); this.onPreferencesChange = this.onPreferencesChange.bind(this); } componentDidMount() { this.setState({ loading: true }); import("ace-builds") .then((ace) => import("ace-builds/webpack-resolver") .then(() => { ace.config.set("useStrictCSP", true); ace.config.set("loadWorkerFromBlob", false); this.setState({ ace, loading: false }); }) .catch(() => this.setState({ loading: false })) ) .catch(() => this.setState({ loading: false })); } onChange(e) { this.setState({ value: e.detail.value }); } onPreferencesChange(e) { this.setState({ preferences: e.detail }); } render() { return ( <> <Header variant="h1">{this.props.id}</Header> <CodeEditor ace={this.state.ace} value={this.state.value} language={this.state.language} onChange={this.onChange} preferences={this.state.preferences} onPreferencesChange={this.onPreferencesChange} loading={this.state.loading} i18nStrings={i18nStrings} /> </> ); } }

[just-boris]

Converted this into an issue #703. Let's move the conversation here