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:
