React-Realm-Electron 导入

Question

我正在做一个项目，将 React 用于 GUI、电子和领域。

在我尝试从另一个 .js 文件导入“组件”之前一切正常

这是我的 App.js 导入部分：

import logo from './logo.svg';
import './App.css';
import * as Realm from 'realm';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Signin from './Signin';

我的 Signin.js 文件看起来像这样：

import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';

function Copyright(props) {
  return (
    <Typography variant="body2" color="text.secondary" align="center" {...props}>
      {'Copyright © '}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const theme = createTheme();

export default function SignIn() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // eslint-disable-next-line no-console
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
  };

  return (
    <ThemeProvider theme={theme}>
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
            <TextField
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
            />
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2">
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </Box>
        </Box>
        <Copyright sx={{ mt: 8, mb: 4 }} />
      </Container>
    </ThemeProvider>
  );
}

这是我在 BrowserWindow 控制台中遇到的错误：

Uncaught Error: require() of ES Module C:\Users\valco\Documents\GATO\Main\my_electron_react_application\node_modules\@babel\runtime\helpers\esm\defineProperty.js from C:\Users\valco\Documents\GATO\Main\my_electron_react_application\build\index.html not supported.
Instead change the require of defineProperty.js in C:\Users\valco\Documents\GATO\Main\my_electron_react_application\build\index.html to a dynamic import() which is available in all CommonJS modules.
    at __node_internal_captureLargerStackTrace (node:internal/errors:464)
    at new NodeError (node:internal/errors:371)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1144)
    at Module.load (node:internal/modules/cjs/loader:988)
    at Module._load (node:internal/modules/cjs/loader:829)
    at Function.c._load (node:electron/js2c/asar_bundle:5)
    at Function.o._load (node:electron/js2c/renderer_init:33)
    at Module.require (node:internal/modules/cjs/loader:1012)
    at require (node:internal/modules/cjs/helpers:94)
    at Object.<anonymous> (defineProperty":1)
    at l (index.html:1)
    at Module.<anonymous> (main.e3312a17.chunk.js:1)
    at l (index.html:1)
    at r (index.html:1)
    at Array.t [as push] (index.html:1)
    at main.e3312a17.chunk.js:1

我知道它可能与 ES6 和 require，或节点版本，或节点获取有关， 由于领域，我不能只启动之前必须通过 CRADO 构建的脚本。

当我不尝试导入登录时，一切正常，但一旦我尝试导入它...我收到此错误。

Answer 1

我找到了问题的原因：

我的 app.js 基于 React-Native 而 Signin.js 是 React。

Realm 似乎无法使用 React..？