ReferenceError: navigator is not defined
loggerhead opened this issue · comments
loggerhead commented
When I build json4u, I got a navigator is not defined
error, and I tried the solution at #74 , but it not works for me. How can I resolve the problem?
[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
json4u/node_modules/codemirror/lib/codemirror.js:18
var userAgent = navigator.userAgent;
^
ReferenceError: navigator is not defined
at json4u/node_modules/codemirror/lib/codemirror.js:18:19
at json4u/node_modules/codemirror/lib/codemirror.js:11:83
at Object.<anonymous> (json4u/node_modules/codemirror/lib/codemirror.js:14:2)
at Module._compile (node:internal/modules/cjs/loader:1097:14)
loggerhead commented
Resolved by some changes:
MyCompent.vue
<script setup lang="ts">
import { onMounted } from "vue";
import Editor from "../utils/editor";
let leftEditor = new Editor();
let rightEditor = new Editor();
onMounted(async () => {
// important!
if (typeof window === "undefined") {
return;
}
// dynamic import CodeMirror packages
await leftEditor.setupCM("left-editor");
await rightEditor.setupCM("right-editor");
window.addEventListener("keydown", (e) => {
// ...
});
});
</script>
../utils/editor.ts
import { Ref } from "vue";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/idea.css";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/lint/lint.css";
export default class Editor {
cm: CodeMirror.Editor;
constructor() {
this.cm = <CodeMirror.Editor>(<unknown>null);
}
async setupCM(id: string) {
var CodeMirror = await import("codemirror");
// @ts-ignore
await import("codemirror/mode/javascript/javascript.js");
await import("codemirror/addon/display/placeholder.js");
await import("codemirror/addon/fold/foldgutter.js");
await import("codemirror/addon/fold/foldcode.js");
await import("codemirror/addon/fold/brace-fold.js");
await import("codemirror/addon/lint/lint.js");
await import("codemirror/addon/lint/json-lint.js");
// @ts-ignore
(window as any).jsonlint = await import("jsonlint-mod");
const el = document.getElementById(id) as HTMLTextAreaElement;
const cm = CodeMirror.fromTextArea(el, {
mode: "application/json",
theme: "idea",
smartIndent: true,
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
});
this.cm = cm;
return this;
}
}
main.ts
import { ViteSSG } from "vite-ssg/single-page";
import App from "./App.vue";
// export 'createApp' is important!
export const createApp = ViteSSG(App);