Problem
My Next.js/React/Node app crashes when I import Chart from "react-apexcharts" in any file. Attempting to visit the app results in the following error: Server ErrorReferenceError: window is not definedThis error happened while generating the page. Any console logs will be displayed in the terminal window. (see call stack below). This happens regardless if the imported <Chart/> is rendered in the page or just left unused. Interesting thing is, if I save a file and initiate a Next.js quick refresh, my app begins working as normal (sometimes). But, when I just launch the app and attempt to visit it, or when I manually refresh with f5, the aforementioned error occurs. Basically, it only works after a Next.js quick refresh (and sometimes, presumably randomly, it doesn't work in this scenario either, throwing the same error as before).
Environment
Node.js (14.16.0), React (17.0.2), Express (4.17.1), Next.js (10.2.0), react-apexcharts (1.3.9), apexcharts (3.26.3), Edge Browser, Win10.
Next.js server is integrated together with Express server.
Logging
ReferenceError: window is not defined
at Object.<anonymous> (C:\Users\georg\Documents\development\web\projects\Angelina-Website\node_modules\apexcharts\dist\apexcharts.common.js:6:345884)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\georg\Documents\development\web\projects\Angelina-Website\node_modules\react-apexcharts\dist\react-apexcharts.min.js:1:722)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.react-apexcharts (C:\Users\georg\Documents\development\web\projects\Angelina-Website\.next\server\pages\partner\dashboard.js:4973:18)
at __webpack_require__ (C:\Users\georg\Documents\development\web\projects\Angelina-Website\.next\server\webpack-runtime.js:25:42)
The above issue appears because you created the next.js app with SSR enabled
To solve this issue, you need to import the apex-charts component dynamically with SSR disabled.
import dynamic from 'next/dynamic'
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
You should import it using this :
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('yourcomponent using react apex-charts'),
{ ssr: false }
)
because of the use of window it's not working with the ssr mode enabled
Related
I'm new to parcel and I'm following a tutorial I downloaded parcel last version is not working I tried the version the instructor using but the same thing happened the
the output in the terminal is
Error: The specified module could not be found.
\\?\\D:\\Downloads\\starter\\node_modules#parcel\\source-map\\parcel_sourcemap_node\\artifacts\\index.win32-x64-msvc.node
at Module.\_extensions..node (node:internal/modules/cjs/loader:1243:18)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module.\_load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (D:\\Downloads\\starter\\node_modules\\v8-compile-cache\\v8-compile-cache.js:159:20)
at Object.\<anonymous\> (D:\\Downloads\\starter\\node_modules#parcel\\source- map\\parcel_sourcemap_node\\index.js:15:18)
at Module.\_compile (D:\\Downloads\\starter\\node_modules\\v8-compile-cache\\v8-compile-cache.js:192:30)
at Module.\_extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module.\_load (node:internal/modules/cjs/loader:878:12) {
code: 'ERR_DLOPEN_FAILED'
}
ive had the same error before,
i removed my node_modules package and then ran again, this worked for me
I'm a beginner at JavaScript so go easy on me here. (This is not supposed to be Java. I know they're different)
So I'm trying to run my first script in the Eclipse IDE and the code is just:
document.write("<h1>Hello World<h1>");
But my console says:
<terminated> js Proj 2-ffirst.js [Node Application] Node.js Process
at Object.<anonymous> (D:\Javascript\js Proj 2\ffirst.js:1:1)
at Module._compile (node:internal/modules/cjs/loader:1092:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47
I suspect my issue is in how I set up the software but I haven't learned how to use this yet really so I'm open to any suggestions you have. Thanks!
you are running a node app - as node is on the server it doesn't know what the document and window are (they are browser api's only accessible on the client side)
Because they don't know what the document Object is you get an error.
Try either console.log to print a response in the terminal from your node server or move to something like VS code to write a plain .js file that can be launched through the browser.
How can i Fix my error. i need to display a pdf from my assets folder. im using expo, react native, react-native-pdf
Scanning folders for symlinks in C:\Users\kjdelacruz\mobile\cdo-mobile-organizer\node_modules (31ms)
RNFetchBlob checking app version ..
RNFetchBlob detected app version => 6
Add Android permissions => false
react-native-fetch-blob link FAILED
Could not automatically link package :TypeError: path must be a string or Buffer
at Object.fs.readFile (fs.js:358:11)
at Object.<anonymous> (C:\Users\kjdelacruz\mobile\cdo-mobile-organizer\node_modules\react-native-fetch-blob\scripts\prelink.js:29:8)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3please follow the instructions to manually link the library : https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-Package
rnpm-install info Linking assets to ios project
rnpm-install ERR! Something went wrong while linking. Error: Cannot read property 'pbxprojPath' of null
Please file an issue here: https://github.com/facebook/react-native/issues
Cannot read property 'pbxprojPath' of null
Apparently rn-fetch-blob is incompatible with expo. I have dealt with this very problem before with expo and rn-fetch-blob.
"It doesn't work with Expo because Expo doesn't support native module linking. Like you said you'll have to detach from Expo in order to run react-native link react-native-fetch-blob for this to work."
https://docs.expo.io/versions/latest/guides/detach.html
You will need to use XCode to get it working.
There are a couple threads discussing. No solutions with expo though.
https://github.com/joltup/rn-fetch-blob/issues/97
https://github.com/wkh237/react-native-fetch-blob/issues/371
Im trying to create an offline app following this tutorial here:
http://rafaelquintanilha.com/offline-app-with-meteor-and-cordova/
But whenever I get to the:
meteor run android-device
I get an error:
=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:
While loading plugin compileScss from package fourseven:scss:
/home/bryam/.meteor/packages/fourseven_scss/.2.1.1.1l0pytj++os.linux.x86_64+web.browser+web.cordova/plugin.compileScss.os.linux.x86_64/npm/node_modules/meteor/compileScss/compileScss/node_modules/node-sass/lib/index.js:22:11:
libsass bindings not found. Try reinstalling node-sass? at
getBinding
(/home/bryam/.meteor/packages/fourseven_scss/.2.1.1.1l0pytj++os.linux.x86_64+web.browser+web.cordova/plugin.compileScss.os.linux.x86_64/npm/node_modules/meteor/compileScss/compileScss/node_modules/node-sass/lib/index.js:22:11)
at Object.
(/home/bryam/.meteor/packages/fourseven_scss/.2.1.1.1l0pytj++os.linux.x86_64+web.browser+web.cordova/plugin.compileScss.os.linux.x86_64/npm/node_modules/meteor/compileScss/compileScss/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:409:26) at
Object.Module._extensions..js (module.js:416:10) at Module.load
(module.js:343:32) at Module.Mp.load
(/home/bryam/.meteor/packages/meteor-tool/.1.4.0-1.13j49n2++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/reify/node/runtime.js:16:23)
at Function.Module._load (module.js:300:12) at Module.require
(module.js:353:17) at require (internal/module.js:12:17) at
Object. (/tools/isobuild/bundler.js:1565:22) at
Object.require (/tools/isobuild/bundler.js:1542:11) at
packages/compileScss/plugin/compile-scss.js:2:1 at
:151:4 at :158:3
=> Your application has errors. Waiting for file change.
I have tried everything that I found on google and I still keep getting the same error, somebody know how to fix this?
Building a site with yeoman angular-fullstack works great locally, but when I deploy and use the dist/release version it gives me this fun error on my server.
Error: Router.use() requires callback functions but got a [object Object]
at Function.proto.use (/home/bitnami/htdocs/dist/node_modules/express/lib/router/index.js:327:11)
at Object.<anonymous> (/home/bitnami/htdocs/dist/server/api/save/index.js:10:8)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.<anonymous> (/opt/bitnami/nodejs/lib/node_modules/pm2/node_modules/pmx/lib/transaction.js:62:21)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at module.exports (/home/bitnami/htdocs/dist/server/routes.js:13:25)
It seams that it's failing on this line
router.use(multer({ dest: './public/uploads/'}));
Though it works locally completely fine? Has me a bit stumped.
Wonder if its related to multer? I have the node module installed.
Thoughts?
Recent versions of multer changed the API. If you look at the examples, you will see you now have to do something like:
var upload = multer({ dest: './public/uploads/'});
// ...
router.use(upload.single('foofield'));
Or upload.array() or upload.fields().