Unable to infer path to ace from script src

[28development]

Unable to infer path to ace from script src

I am using react ace in my Next.js Project, so far the editor seems to work but my chrome dev console returns following error message which I would like to understand and fix:

Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver 
    at ReactAce (webpack-internal:///./node_modules/.pnpm/[email protected]_sfoxds7t5ydpegc3knd667wn6m/node_modules/react-ace/lib/ace.js:38:28)
    at Editor (webpack-internal:///./src/components/Editor/index.tsx:35:22)
    at LoadableImpl (webpack-internal:///./node_modules/.pnpm/[email protected]_sfoxds7t5ydpegc3knd667wn6m/node_modules/next/dist/shared/lib/loadable.js:101:38)

Sample code to reproduce your issue

This is how my Editor component looks like:

import { ComponentProps, useState } from 'react';
import AceEditor from 'react-ace';

// import mode-<language> , this imports the style and colors for the selected language.
import 'ace-builds/src-noconflict/mode-javascript';
// there are many themes to import, I liked monokai.
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/theme-xcode';
// this is an optional import just improved the interaction.
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-beautify';
import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
import { Shimmer } from '../ui/Shimmer';
import useHasMounted from '~/hooks/useHasMounted';

interface Props<T extends FieldValues = any>
	extends Omit<ComponentProps<'form'>, 'onSubmit'> {
	form: UseFormReturn<T>;
	onSubmit?: SubmitHandler<T>;
}

const Editor = ({ form, onSubmit }: Props) => {
	const hasMounted = useHasMounted();
	const [value, setValue] = useState('');
	const [mode, setMode] = useState('javascript');
	const [theme, setTheme] = useState('xcode');

	if (!hasMounted) {
		return <Shimmer />;
	}

	return (
		<AceEditor
			{...form.register('content')}
			style={{
				width: '100%',
			}}
			placeholder="Start Coding"
			mode={mode}
			theme={theme}
			name="basic-code-editor"
			onChange={(v) => setValue(v)}
			fontSize={18}
			showPrintMargin={true}
			showGutter={true}
			highlightActiveLine={true}
			value={value}
			setOptions={{
				enableBasicAutocompletion: true,
				enableLiveAutocompletion: true,
				enableSnippets: true,
				showLineNumbers: true,
				tabSize: 4,
			}}
		/>
	);
};

export default Editor;

I am also importing the component using dynamic in my parent like this:

const Editor = dynamic(() => import('~/components/Editor'), { ssr: false });

[wfmonster]

I'm having the same issue. Hopefully if they see more people are having this error, then they will look into it.

import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-dracula";`

//... 
// inside component

<AceEditor
    id="ace_editor"
    className="editor_code"
    mode="python"
    theme="dracula"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
    setOptions={...}
/>

[tomercohen1210]

@wfmonster @28development Add import 'ace-builds/webpack-resolver' and it will solve this error

[wfmonster]

@tomercohen1210 Thank you, this solved the issue for me.

[chenbinli-dev]

import 'ace-builds/webpack-resolver' I added this dependency, but I got a new error ReferenceError: ace is not defined

[94zn]

import 'ace-builds/webpack-resolver' I added this dependency, but I got a new error ReferenceError: ace is not defined

import ace from 'ace-builds';

[94zn]

@wfmonster @28development Add import 'ace-builds/webpack-resolver' and it will solve this error

But,Size too large

[ea167]

Just import import ace from 'ace-builds/src-noconflict/ace'; before import AceEditor from 'react-ace';

No need of 'ace-builds/webpack-resolver' which does not work with Webpack 5+