CODEWITHSUNDEEP
node.jsnpmwebpackcodemirror-6
ayejays
ayejays

Reputation: 1

Uncaught SyntaxError: I don’t have an export named ‘default’?

I'm encountering the following error in my console:

Uncaught SyntaxError: The requested module './dist/codemirrorbundle.js' does not provide an export named 'default' (at (index):22:16)

I've tried simplifying my code to a minimal example, but the error persists.

My environment:

My project directory structure is as follows:

nicegui-codemirror-minimal/
├── dist/
│   └── codemirrorbundle.js
│   └── ...
├── node_modules/
│   └── ...
├── codemirror_editor.js
├── index.html
├── package.json
├── package-lock.json
└── webpack.config.js

Here's my package.json:

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "@codemirror/commands": "^6.4.0",
    "@codemirror/lang-markdown": "^6.2.4",
    "@codemirror/merge": "^6.0.1",
    "@codemirror/state": "^6.4.1",
    "@codemirror/view": "^6.25.4",
    "codemirror": "^6.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@babel/preset-env": "^7.24.5",
    "babel-loader": "^9.1.3",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}

Here's my webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./codemirror_editor.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "codemirrorbundle.js",
    library: {
        name: 'CodeMirrorMerge',
        type: 'umd',
        export: 'default'
    },
    globalObject: 'this',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

Here's my codemirror_editor.js:

let mergeViewInstance;

async function createCodeMirrorEditor(element, props) {
  const initialValueA = props.value_a || "";
  const initialValueB = props.value_b || "";

  const { MergeView } = await import("@codemirror/merge");
  const { EditorView, keymap, updateListener } = await import("@codemirror/view");
  const { basicSetup } = await import("codemirror");
  const { EditorState } = await import("@codemirror/state");
  const { markdown } = await import("@codemirror/lang-markdown");
  const { defaultKeymap: commandsDefaultKeymap } = await import("@codemirror/commands");


  const createExtensions = (side) => [
    basicSetup,
    markdown(),
    EditorView.editable.of(true),
    keymap.of(commandsDefaultKeymap),
    updateListener.of((update) => {
      if (update.docChanged) {
        sendUpdate(side, update.state.doc.toString());
      }
    }),
  ];

  mergeViewInstance = new MergeView({
    a: {
      doc: initialValueA,
      extensions: createExtensions('a'),
    },
    b: {
      doc: initialValueB,
      extensions: createExtensions('b'),
    },
    parent: element,

  });

  function sendUpdate(side, value) {

    console.log(`Update: Side ${side}, Value: ${value}`);
  }

  function setValue(side, value) {
    const editor = side === 'a' ? mergeViewInstance.a : mergeViewInstance.b;

    const transaction = editor.state.update({
      changes: { from: 0, to: editor.state.doc.length, insert: value },
    });
    editor.dispatch(transaction);
  }

  return {
    setValue: setValue,
    destroy: () => { mergeViewInstance.destroy(); }
  };
}

export default { createCodeMirrorEditor };

And finally, here's my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeMirror Merge Example</title>
    <style>
        .cm-editor {
            border: 1px solid #ddd;
            height: 300px; /* Or whatever height you want */
        }
        .cm-merge-view {
          display: flex;
          flex-direction: row;
        }
    </style>
</head>
<body>
    <div id="codemirror-container"></div>

    <script type="module">
        import CodeMirrorMerge from './dist/codemirrorbundle.js';

        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('codemirror-container');
            if (!container) {
              console.error("Container element not found!");
              return;
            }

            CodeMirrorMerge.createCodeMirrorEditor(container, {
                value_a: "# Initial Value A",
                value_b: "Initial Value B",
            })
            .then(editor => {
                window.editor = editor; // For easy access in the browser console (good practice)
                console.log("CodeMirror MergeView initialized!");

            })
            .catch(error => {
                console.error("Error initializing CodeMirror:", error);
            });
        });

    </script>
</body>
</html>

I was initially trying to integrate this into my NiceGUI framework (a Python-based frontend framework), but I've realized that my JavaScript code itself is likely the issue. I'm now trying to run this simple HTML file, and it's still not working. I've read other posts about issues with default exports, but I'm new to JavaScript and suspect I'm making a fundamental mistake.

Upvotes: 0

Views: 28

Answers (0)

Related Questions