Problem

Hello I need to use emmet in ace code editor As said in guide I tried to import "ace-builds/src-noconflict/ext-emmet" in my component, but nothing changed, emmet code still accepted in code editor as plain code

With and without import "ace-builds/src-noconflict/ext-emmet" console warn

script for emmet-core is not loaded

Also i added <script src="https://cloud9ide.github.io/emmet-core/emmet.js"></script> to my index.html but still no effect, emmet from cdn loads, sets to window.emmet and still has no effect

Where I am wrong and what i need to do to get emmet work fine?

Sample code to reproduce your issue

CodeEditor.jsx

import React, { useState, useEffect } from "react";

import AceEditor from "react-ace";

import "ace-builds/webpack-resolver";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-beautify";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/ext-options";
import "ace-builds/src-noconflict/snippets/html";
import "ace-builds/src-noconflict/snippets/javascript";
import "ace-builds/src-noconflict/snippets/css";
import "ace-builds/src-noconflict/ext-emmet";



const CodeEditor = ({}: Props) => {

  return (
      <AceEditor
        mode="html"
        enableBasicAutocompletion
        enableLiveAutocompletion
        enableSnippets
        setOptions={{ enableEmmet: true }}
        theme="monokai"
      />
    </Box>
  );
};

export default CodeEditor;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script src="https://cloud9ide.github.io/emmet-core/emmet.js"></script>

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

References

Progress on: #

Apr 12 '21 12:04 V54ND

Same issue.

Jul 09 '21 05:07 nikhilmwarrier

import Emmet from "ace-builds/src-noconflict/ext-emmet" and install an import "emmet-core" ; works for me but message "script for emmet-core is not loaded" still on the console

Aug 17 '21 16:08 jmamegia

I found a work around for this in the kitchen sink demo.js. Here

Just save https://cloud9ide.github.io/emmet-core/emmet.js to your src-noconflict folder as ext-emmet_core.js and add the following lines:

ace.require("ace/ext/emmet").setCore('ext/emmet_core');

The module ext-emmet.js is looking for a path to the emmet core when it calls LoadModule(), and it is throwing a warning since it isn't set.

May 20 '22 08:05 bernesto

This should be mentioned in docs. Is this code really needed with react?

exports.load = function (cb) {
    if (typeof emmetPath !== "string") {
        config.warn("script for emmet-core is not loaded");
        return false;
    }
    config.loadModule(emmetPath, function () {
        emmetPath = null;
        cb && cb();
    });
    return true;
};

Jan 14 '23 10:01 cherepanov

Emmet enabling problem

Problem

Sample code to reproduce your issue

References