How to use Codemirror with Laravel 10 and Livewire 3?

It looks like you're trying to import CodeMirror in a way that's not compatible with the module's exports. CodeMirror does not have a default export, which is why you're getting the error about the missing 'default' export. Instead, you should import CodeMirror in a way that matches its provided exports.

Here's how you can properly import and set up CodeMirror with Laravel 10 and Livewire 3:

1. Install CodeMirror and the mode you need (for JSON in this case):

npm install codemirror
npm install @codemirror/mode-json

1. In your app.js, import CodeMirror and the necessary mode(s):

import './bootstrap';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript'; // for JSON highlighting

// Initialize CodeMirror on a specific textarea
window.addEventListener('DOMContentLoaded', (event) => {
    const textArea = document.getElementById('json-textarea');
    if (textArea) {
        const editor = CodeMirror.fromTextArea(textArea, {
            mode: {name: "javascript", json: true},
            lineNumbers: true,
            theme: 'default',
        });

        // If you're using Livewire, you might want to ensure that changes in the editor
        // are reflected in the Livewire component's state.
        editor.on('change', () => {
            textArea.value = editor.getValue();
            textArea.dispatchEvent(new Event('input'));
        });
    }
});

1. Make sure you have a textarea with the id json-textarea in your Livewire component's blade template:

<textarea id="json-textarea" wire:model="jsonInput"></textarea>

1. If you're using Vite with Laravel, you might need to configure it to properly handle the CSS imports. You can do this by editing your vite.config.js file to include the following:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    // Add this to handle CSS imports from JavaScript files
    css: {
        preprocessorOptions: {
            css: {
                javascriptEnabled: true,
            },
        },
    },
});

1. Finally, compile your assets with Vite:

npm run dev

This should set up CodeMirror in your Laravel 10 and Livewire 3 application. Remember to adjust the mode and other options according to your needs.