I am trying to run a Server-Side Rendering web app on Vite. I used the following commands:
npx create vite@latest
(ssr-react)
(Non-Streaming)
(JavaScript)
I installed react-tabs-scrollable and am trying to implement them onto my app. But even just the act of importing them is causing an error.
App.jsx (See Line 4)
import "./App.css";
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { Tab } from "react-tabs-scrollable";
function App() {
const [count, setCount] = useState(0);
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
...
}
export default App;
But when I try to run the app, it gives me an error:
Error:
[MyFolderPath]sample-projectnode_modulesreact-tabs-scrollabledistreact-tabs-scrollable.es.js:1
import k, { useRef as hr, useCallback as pr, useEffect as _r, useLayoutEffect as gr } from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (node:internal/modules/cjs/loader:1378:20)
at Module._compile (node:internal/modules/cjs/loader:1428:41)
...
.
What I Have Tried:
I have tried changing my package.json to have type: “module”, but it is already there:
package.json
{
"name": "sample-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "node server",
"build": "npm run build:client && npm run build:server",
...
The type=”module” is also present in index.html.
I have also tried using –experimental-modules on the “node server” command. I have tried changing the server file to cjs and mjs, but neither of those worked.
Can I ask how would one fix this situation? Thank you!