How to configure script folder so I can use import statement inside node

Viewed 30

So I honestly didn't know how to title my question, and I am not sure if is correct. I am new at the SSR, and I am building a small portfolio using node, express and ejs. Point is when I tried to use classes, lets says I have an app folder and inside an index.js and inside this file I am trying to import other classes and manage my main class App, but when I am including this file into the home.ejs I always get the "you cannot use import outside a module" error. So to solve it in the meantime ... I declared the script with "type='module'" so:

<script type="module" src="...mypath"></script>

which actually worked BUT now when I want to use some native node function(example: export default class Component extends EventEmitter) but I cannot because I suppose this will work only on the server side but not client side, please correct me if I am wrong ...?

So I realised somehow I need the entire files in my folder to run as my config.js file (where I can use the import statement), I was looking on possible solutions and I also tried to change inside my json to use "type:module", but my entire application collapsed

I think I should change or include that folder somehow in my config.js, I also saw something regarding webpack, but not sure if I really need to install webpack to configure this or if I can just doing on my config file? For now I am using express, node and ejs. I will be happy to get any advice regarding this : (

my config.js file looks like

import express from "express";
import path from "path";
import logger from "morgan";
import bodyParser from "body-parser";
import routes from "./routes";
import sassMiddleware from "node-sass-middleware";
import EventEmitter from 'events'


import i18next from "i18next";
import i18nextBackend from "i18next-fs-backend";
import i18nextMiddleware from "i18next-http-middleware";


const { PORT = 5050 } = process.env;
const app = express();


i18next.use(i18nextBackend)
  .use(i18nextMiddleware.LanguageDetector)
  .init({
    debug: true,
    fallbackLng: 'en',
    preload: ['de', 'en'],
    backend: {
      loadPath: './locales/{{lng}}/translation.json'
    },
    detection: {
      order: ['querystring', 'cookie'],
      caches: ['cookie'],
      lookupQuerystring: 'lang',
      lookupCookie: 'lang',
      ignoreCase: true,
      cookieSecure: false
    },
  })



app.use(i18nextMiddleware.handle(i18next));


app.set("views", path.join(__dirname, "../views"));
app.set("app", path.join(__dirname, "../app"));
app.set("view engine", "ejs");
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.locals = { config: { whatever: 'this is' } };

app.use(
  sassMiddleware({
    src: path.join(__dirname, "../public/scss"),
    dest: path.join(__dirname, "../public"),
    indentedSyntax: false,
    sourceMap: false
  })
);

app.use(express.static(path.join(__dirname, "../public")));
app.use("/", routes);


app.use(function (req, res) {
  res.status(404).render('404.ejs');
});

app.use(function (req, res) {
  res.status(500).render('500.ejs');
});

app.use(EventEmitter)


app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

export default app;

My json file

{
  "name": "My-portfolio",
  "version": "0.0.0",
  "private": true,
  "author": "My portfolio",
  "main": "dist/config.js",
  "scripts": {
    "start": "node  dist/config.js",
    "dev": "nodemon src/config.js --exec \"node -r dotenv/config -r @babel/register\"",
    "clean": "rimraf dist",
    "build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
    "postinstall": "npm run build"
  },
  "dependencies": {
    "@babel/cli": "^7.18.9",
    "@babel/core": "^7.18.9",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "body-parser": "^1.19.0",
    "ejs": "^3.1.8",
    "express": "^4.18.1",
    "graphql": "^16.5.0",
    "graphql-request": "^4.3.0",
    "i18next": "^21.9.1",
    "i18next-browser-languagedetector": "^6.1.5",
    "i18next-fs-backend": "^1.1.5",
    "i18next-http-middleware": "^3.2.1",
    "locomotive-scroll": "^4.1.4",
    "lodash": "^4.17.21",
    "morgan": "^1.10.0",
    "node-sass-middleware": "^1.0.1",
    "rimraf": "^3.0.0"
  },
  "devDependencies": {
    "@babel/register": "^7.18.9",
    "dotenv": "^16.0.1",
    "nodemon": "^2.0.19"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }
}

And the structure of my files so my app.js and my classes are located inside the app folder, as follows:

enter image description here

0 Answers
Related