NodeJs 18.16.0 port 3000 local server not responding

[natrenakres]

Hi,

I updated my project NodeJs version from 8 to 18 LTS, after that the local development server not responding. The build process is working but the port of 3000 is not working anymore and the response waiting. The project runs with nodemon in port 2999. However, proxying is not working. So, I update mangony to 1.7.0 version but the problem still persists. Version 2 produces an ESM error like this.

/Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/src/server/modules/express.js:141
undefined
      ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/node_modules/mangony/index.js from /Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/src/server/modules/express.js not supported.
Instead change the require of index.js in /Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/src/server/modules/express.js to a dynamic import() which is available in all CommonJS modules.
    at Object.newLoader [as .js] (/Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/node_modules/pirates/lib/index.js:141:7)
    at Object.<anonymous> (/Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/src/server/modules/express.js:7:17)
    at Module._compile (/Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/node_modules/pirates/lib/index.js:136:24)
    at Object.newLoader [as .js] (/Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/node_modules/pirates/lib/index.js:141:7)
    at Object.<anonymous> (/Users/ru37woj/Documents/Projects/LMU Projects/FE-DEV/relaunch-web-frontend/src/server/index.js:2:17) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.16.0
[nodemon] app crashed - waiting for file changes before starting...

Here is my express.js file

const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const deepExtend = require('deep-extend');
const Mangony = require('mangony');
const config = require('../configs/config');
const mangonyOptions = require('../../../configs/tasks/mangony/mangony.config');
const createMangony = express => {
	const mangonyDevOptions = deepExtend(mangonyOptions.dev.options, {
		devServer: {
			express: express,
			bsEnabled: true,
			usePort: false,
			useAssetsDir: false
		}
	});

	return new Mangony(deepExtend(mangonyOptions.options, mangonyDevOptions));
};

module.exports = (routes, apiRoutes) => {
	const app = express();
	const mangony = createMangony(app);

	app.use(express.static('app'));
	app.use(bodyParser.urlencoded({ extended: false }));
	app.use(bodyParser.json());
	app.use(morgan('dev'));

	/**
	 * Register routes and start express server
	 *
	 */
	mangony.render();
	app.use(apiRoutes);
	app.use(routes);

	

	return app;
};

'''

Express version is 

```
"express": "^4.15.3",
```

Any suggestions?

Thanks

[Sebastian-Fitzner]

Hi, First of all sorry for the late response.

To the first issue that the proxy is not working: I do not use V1 anymore and am not really sure what the issue ist without having a repo or example to test against. I would suggest to use the V2 which is actually really stable.

So let's talk about the second issue: When using V2 now you should change to ESM syntax and need to enable different plugins. The V2 has more flexibility in place with the plug-in system to support different template engines like Handlebars or JSX. That means, you need to rewrite your server file to use imports instead of require(). You can find a working example which should almost fit your needs in the examples folder (/examples/hbs.js).

Hope that helps a bit and just let me know if there are any other issues for setting it up.

[natrenakres]

Hi,

I changed the ESM but proxying still not working. What am I missing?

this is server file

import express from 'express';
import bodyParser from 'body-parser';
import morgan from 'morgan';
import deepExtend from 'deep-extend';
import Mangony, { plugins } from 'mangony';

const TemplaterPlugin = plugins.hbsTemplaterPlugin;
const ServerPlugin =plugins.serverPlugin;

import config from '../configs/config.js';
import mangonyOptions from '../../../configs/tasks/mangony/mangony.config2.js';
const createMangony = () => {	
	return new Mangony(mangonyOptions.options);
};

const SERVER_PORT = 2999;
const APP_PORT = 3000;

export default (routes, apiRoutes) => {
	const app = express();
	const mangony = createMangony();

	app.use(express.static('app'));
	app.use(bodyParser.urlencoded({ extended: false }));
	app.use(bodyParser.json());
	app.use(morgan('dev'));

	/**
	 * Register routes and start express server
	 *
	 */
	mangony.render().then(() => mangony.use(TemplaterPlugin, {
		helpers: [
			'shared/utilities/template-helpers/*.js'
		],
		compileStaticFiles: false,
		allow: {
			YFMContextData: true,
			YFMLayout: true
		},
	})).then(() => mangony.use(ServerPlugin, {
		express: express(),
		bsEnabled: true,
		usePort: false,
		useAssetsDir: false,
		start: true,
		injectScript: false,
		useExt: true,
		port: SERVER_PORT,
		bsOptions: {
			proxy: 'localhost:' + SERVER_PORT,
			port: APP_PORT,
			files: [
				 'app/**/*.html',
				'app/css/**/*.css',
				'app/scripts/**/*.js'
			]
		}
	}));
	
	app.use(apiRoutes);
	app.use(routes);

	

	return app;
};

and there is the options:

options: {		
		collections: [
			'sitemap',
			'components'
		],
		cwd: config.paths.src + '/',
		dest: config.paths.app,
		exportData: false,
		flatten: true,
		watch: true,
		types: {
			data: {
				dir: '',
				files: [
				  '**/*.json',
				  '**/*.hjson',
				],
			  },
			  pages: {
				dir: '',
				files: [
				  '**/*.hbs',
				  '**/*.md',
				],
			  },
			  partials: {
				dir: '',
				files: [
				  '**/*.hbs',
				],
			  },
			  layouts: {
				dir: '',
				files: [
				  '**/*.hbs',
				],
			  },
		},
		ext: '.html',

	},

The external link is working but http://localhost:3000 is not. Do you have any idea?

Thanks