Problems installing sitemap - reactjs

i'm trying to install react-router-sitemap in my application but when i run the command "node sitemap-generator.js" (after the configuration) this message on my console came out:
internal/modules/cjs/loader.js:960
throw err;
^
Error: Cannot find module '/home/ricardo/xxxx/sitemap-generator.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
at Function.Module._load (internal/modules/cjs/loader.js:840:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
in the installation i've created a file called "sitemap-builder.js" (within src):
require('babel-register');
const router = require('../src/router/routes').default;
const Sitemap = require('./').default;
function generateSitemap() {
return (
new Sitemap(router())
.build("https://www.web.com")
//Save it wherever you want
.save("../public/sitemap.xml")
);
}
generateSitemap();

Related

How to use heic2any in Next.js client side?

Have following code:
import convert from 'heic2any'
try {
convertedImage = await convert({ blob: propsAndFile?.file })
} catch (error) {
console.error(error)
}
But got this error, though they promise it will run on client side: https://www.npmjs.com/package/heic2any
info - Collecting page data ..node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^
ReferenceError: window is not defined
at /Users/janoskukoda/Workspace/tikex/portal/team/node_modules/heic2any/dist/heic2any.js:23:1
at /Users/janoskukoda/Workspace/tikex/portal/team/node_modules/heic2any/dist/heic2any.js:11:26
at Object.<anonymous> (/Users/janoskukoda/Workspace/tikex/portal/team/node_modules/heic2any/dist/heic2any.js:20:2)
at Module._compile (node:internal/modules/cjs/loader:1205:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at 2233 (/Users/janoskukoda/Workspace/tikex/portal/team/.next/server/pages/_app.js:176:18) {
type: 'ReferenceError'
}
Node.js v19.1.0

Npm run build not working NEXTJS says TM undefined

I am trying to run npm run build on my NextJs project. The terminal says:
info - Loaded env from /mnt/c/Users/chloe/case4/2022-ca400-TEMPLATE/src/sage-project/.env.local
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
> Build error occurred
ReferenceError: withTM is not defined
at Object.<anonymous> (/mnt/c/Users/chloe/case4/2022-ca400-TEMPLATE/src/sage-project/next.config.js:13:1)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
and my next.config.js file looks like this:
/** #type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")([
"#fullcalendar/common",
"#babel/preset-react",
"#fullcalendar/common",
"#fullcalendar/daygrid",
"#fullcalendar/interaction",
"#fullcalendar/react",
"#fullcalendar/timegrid",
]);
module.exports = withTM({
reactStrictMode: true
});
It says withTM isn't defined, but it is with const? Where am I going wrong?

node:internal/modules/cjs/loader:936 Eror

I'm getting this error:
I tried to install Npm again, if anyone comes across I would be happy to help
node:internal/modules/cjs/loader:936
throw err;
^
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\yehon\\OneDrive\\שולחן העבודה\\yehonatan\\Work_projects\\Manhattan-client-13-03-2022_v2\\config\\paths.js',
'C:\\Users\\yehon\\OneDrive\\שולחן העבודה\\yehonatan\\Work_projects\\Manhattan-client-13-03-2022_v2\\config\\env.js',
'C:\\Users\\yehon\\OneDrive\\שולחן העבודה\\yehonatan\\Work_projects\\Manhattan-client-13-03-2022_v2\\scripts\\start.js'
]
}

NextJs + amcharts : production build error : ReferenceError: addEventListener is not defined

I am working on nextjs project and using amcharts library.
When I build production build, it gives me below error.
> Build error occurred
{ ReferenceError: addEventListener is not defined
at new Registry (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:4945:9)
at Module.u55L (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:5159:16)
at __webpack_require__ (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:29:31)
at Object.11 (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:334:18)
at __webpack_require__ (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:29:31)
at D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:124:18
at Object.<anonymous> (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:127:10)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32) type: 'ReferenceError' }
Automatically optimizing pages .npm ERR! code ELIFECYCLE
Here is my next.config.js file
const withCSS = require("#zeit/next-css");
const withImages = require("next-images");
const withFonts = require("nextjs-fonts");
const withTM = require("next-transpile-modules")([
"react-native-vector-icons",
"#amcharts/amcharts4/core",
"#amcharts/amcharts4/charts",
"#amcharts/amcharts4/themes/animated",
]); // pass the modules you would like to see transpiled
module.exports = withCSS(
withTM(
withImages(
withFonts({
/* config options here */
env: {
API_URL: "http://localhost:4000/api/",
SOCKET_URL: "http://localhost:4000/",
},
})
)
)
);
If I comment out below code then it works and no error.
this code is from - node_modules#amcharts\amcharts4.internal\core\Registry.js
UPDATE
I fixed the build error by removing amcharts from webpack file. and import it like below when page loads.
let am4core = null;
let am4charts = null;
let am4themesAnimated = null;
if (process.browser) {
console.log("process.browser", process.browser);
am4core = require("#amcharts/amcharts4/core");
am4charts = require("#amcharts/amcharts4/charts");
am4themesAnimated = require("#amcharts/amcharts4/themes/animated");
am4core.useTheme(am4themesAnimated.default);
}
Now my prod build works fine and chart is loading fine on first load.
When I refresh the page it shows me below error:
charts.js:1 Uncaught ReferenceError: am4internal_webpackJsonp is not defined
at charts.js:1
(anonymous) # charts.js:1
maps.js:1 Uncaught ReferenceError: am4internal_webpackJsonp is not defined
at maps.js:1

Importing AngularJS 1.6 into Angular-Universal Project

We have a hybrid Angular6 and AngularJS 1.6 project which we are currently migrating. In this process, we also want to introduce Server Side Rendering (SSR).
The problem is, that the SSR is running in a node environment, so running the SSR/prerendering gets the following error:
npm-run ts-node ./prerender.ts
[..]/node_modules/angular/index.js:2
**module.exports = angular;**
**ReferenceError: angular is not defined**
at Object.<anonymous> ([..]/node_modules/angular/index.js:2:18)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.angular ([..]/dist/server/webpack:/external "angular":1:1)
at _webpack_require_
([..]/dist/server/webpack:/webpack/bootstrap:19:1)
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {renderModuleFactory} from '#angular/platform-server';
import {writeFileSync} from 'fs';
const globalAny:any = global;
const Window = require('window');
let window = new Window();
globalAny.window = window;
globalAny.document = window.document;
const {AppServerModuleNgFactory} = require('./dist/server/main');
renderModuleFactory(AppServerModuleNgFactory, {
document: '<app-root></app-root>',
url: '/'
})
.then(html => {
console.log('Pre-rendering successful, saving prerender.html');
writeFileSync('./prerender.html', html);
})
.catch(error => {
console.error('Error occurred:', error);
});
The Project is based on the universal-starter repo: https://github.com/angular/universal-starter
Any suggestions what's going on here?

Resources