Unexpected character '' error

[croxydev]

my packages:

"electron": "^21.3.3",
"electron-builder": "^23.6.0",
"next": "^12.3.4",
"nextron": "^8.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"@uiw/react-monacoeditor": "^3.5.9",

how can i fix this?

[jaywcjlove]

@croxywastaken

To import a TTF file in Next.js, you need to configure the appropriate loader in the next.config.js file of your project.

Here is an example next.config.js file that demonstrates how to configure the loader for importing TTF files:

module.exports = {
  webpack: (config, { isServer }) => {
    // Add a loader for TTF files
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: '/_next/static/fonts',
          outputPath: 'static/fonts',
          esModule: false,
        },
      },
    });

    // Configure behavior when importing TTF files on the server-side
    if (isServer) {
      const originalEntry = config.entry;
      config.entry = async () => {
        const entries = await originalEntry();
        if (entries['main.js'] && !entries['main.js'].includes('./utils/fix-ttf-import.js')) {
          entries['main.js'].unshift('./utils/fix-ttf-import.js');
        }
        return entries;
      };
    }

    return config;
  },
};

This configuration file does the following:

1. Adds a loader for TTF files using file-loader to handle the import of font files.
2. Configures the behavior when importing TTF files on the server-side to ensure that the font files load correctly during server-side rendering.

Additionally, you need to create a file named fix-ttf-import.js in the utils directory of your project with the following content:

if (typeof window !== 'undefined') {
  require('monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf');
}

This file is responsible for importing the TTF file on the browser-side.

Please note that the above configuration is suitable for Next.js version 10 and above. If you are using an older version, refer to the respective documentation or community resources for the appropriate configuration method.

[jaywcjlove]

https://github.com/jaywcjlove/react-monacoeditor/blob/bff1838125ea5fe209cf7693cd3d4d9dc58a2e4f/core/src/index.tsx#L6-L7

[croxydev]

Now it gives me this error :(

My code:

import React, { useEffect, useRef, useState } from "react";
import MonacoEditor from '@uiw/react-monacoeditor';

function App() {
	const [code, setCode] = useState('')
	
  return ( 
    <>
      <div className="bg-white marker:shadow-lg flex flex-col text-sm select-none">
            <main className="bg-dark-700">
              <div className="main-content">
                <div className="bg-gray-1">
				<MonacoEditor
					language="html"
					value="<h1>I ♥ react-monacoeditor</h1>"
					options={{
						theme: 'vs-dark',
					}}
				/>
                </div>
              </div>
            </main>
      </div>
    </>
  );
}

export default App;

[croxydev]

Btw, i'm using this module on electron app. (next.js + electron)