使用Nextjs时,@ionic/react中出现“无法在模块外部使用导入语句”错误

rwqw0loc  于 11个月前  发布在  Ionic
关注(0)|答案(1)|浏览(181)

每当我试图构建或只是运行开发服务器使用nextjs,我得到以下错误:

unhandledRejection C:\proj\node_modules\@ionic\react\dist\index.js:1
import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment, useCallback } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1175:20)
    at Module._compile (node:internal/modules/cjs/loader:1219:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)   
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at 244 (C:\proj\.next\server\pages\_app.js:50:31)
    at __webpack_require__ (C:\proj\.next\server\webpack-runtime.js:25:42) {
  type: 'SyntaxError'
}

字符串
我使用的是next-transile模块:

const withTM = require("next-transpile-modules")([
  "@ionic/react",
  "@ionic/core",
  "@stencil/core",
  "ionicons",
]);

module.exports = withTM({
  basePath: "'./src",
  swcMinify: true,
});


My app.tsx:

import Head from "next/head";
import Script from "next/script";
  
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
import "../css/global.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css"; // Remove if nothing is visible
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
import { setupIonicReact } from "@ionic/react";

setupIonicReact();

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, viewport-fit=cover"
        />
      </Head>
        <Component {...pageProps} />
        <Script
          type="module"
          src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
        ></Script>
        <Script
          noModule
          src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
        ></Script>
    </>
  );
}

export default MyApp;


我的tsconfig模块被设置为“esnext”,类型是package.json中的模块。我使用的是nextjs版本“13.4.2”和@ionic/react版本“7.0.0”。任何帮助都非常感谢。
我之前使用vite,它还能工作,但是切换到nextjs后,它就停止工作了。
我试过和那些人打架,但都没用。

gz5pxeao

gz5pxeao1#

好吧,看来只是重新安装为我工作。

相关问题