Issue
Whenever im trying to build or just run the dev server using nextjs, im getting the following error:
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'
}
I'm using next-transpile modules:
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;
My tsconfig module is set to "esnext" and type is module in package.json. Im using nextjs version "13.4.2" and @ionic/react version "7.0.0". Any help is highly appreciated.
I as using vite earlier and it was working, but after switched to nextjs, it stopped working.
Ive tried figeting with the configs, nothing worked.
Solution
Well, it seems that just reinstalling worked for me 😅😛
Answered By - Kingerious
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.