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?
Related
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
i have some Problems with my Code that somehow none of my friends have ...
Some Code to see:
module.exports = {
data: new SlashCommandBuilder()
.setName('equipment')
.setDescription('Gives you Information about specific Equipments')
.addStringOption(option =>
option.setName('type')
.setDescription('Specify the Equipment')
.setRequired(true)
.addChoice('Flashlight', 'flashlight')
),
...
The Code is Cut here because its not necesery for it above to work.
My Error Code:
PS C:\Users\enric\Desktop\Ghosty Phasmo Help> node .
C:\Users\enric\Desktop\Ghosty Phasmo Help\commands\phasmo\equipment.js:15
.addChoice('Flashlight', 'flashlight')
^
TypeError: option.setName(...).setDescription(...).setRequired(...).addChoice is not a function
at C:\Users\enric\Desktop\Ghosty Phasmo Help\commands\phasmo\equipment.js:15:18
at MixedClass._sharedAddOptionMethod (C:\Users\enric\Desktop\Ghosty Phasmo Help\node_modules\#discordjs\builders\dist\index.js:1334:50)
at MixedClass.addStringOption (C:\Users\enric\Desktop\Ghosty Phasmo Help\node_modules\#discordjs\builders\dist\index.js:1323:17)
at Object.<anonymous> (C:\Users\enric\Desktop\Ghosty Phasmo Help\commands\phasmo\equipment.js:11:7)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
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)
at require (node:internal/modules/cjs/helpers:102:18)
Somehow my Discord.js thinks that im using a Function. I copied the Code from other friends where this completely work. but somehow the same Error message appears.
.addChoice() is outdated. Now, there is only .addChoices() (with an s)
.addStringOption(option =>
option.setName('type')
.setDescription('Specify the Equipment')
.setRequired(true)
.addChoices({
name: 'Flashlight',
value: 'flashlight'
})
)
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
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();
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?