将JS文件导入下一个JS -获取引用错误

Question

在我的下一个js项目中导入JS文件时，我得到了以下错误。

错误： ReferenceError:导航器未定义

下面是我用来插入文件的组件。我需要它来使Codemirror正确地呈现python，但是只有当我移除mode/python/python.js导入时，组件才能工作。

import Link from "next/link";
import { UnControlled as CodeMirror } from "react-codemirror2";
// import "../node_modules/codemirror/mode/python/python.js";
import "../node_modules/codemirror/lib/codemirror.css";
import "../node_modules/codemirror/theme/material.css";
import styled from "styled-components";

const CodeContainer = styled.div`
  position: absolute;
  width: 600px;
  left: 600px;
  height: 100%;
  overflow-y: auto;
  z-index: 1;
`;

const Code = () => (
  <CodeContainer>
    <CodeMirror
      value="<h1>Hello World</h1>"
      options={{
        mode: "python",
        theme: "material",
        lineNumbers: true
      }}
      onChange={(editor, data, value) => {}}
    />
  </CodeContainer>
);

export default Code;

Answer 1

您应该像这样动态导入python模式：

import dynamic from "next/dynamic";
 const dynamicPython= dynamic(() =>import("codemirror/mode/python/python.js"),{
     ssr:false,
 });