Comments (10)
@hudsonhyunlim As a workaround I conditionally import and init amplitude only on the browser side like this:
let amplitude: any;
export const initAmplitude = () => {
if (process.browser) {
amplitude = require('amplitude-js');
amplitude.getInstance().init('your-amplitude-code');
}
};
Then in my _app.tsx
useEffect(() => {
initAmplitude();
}, []);
Then also wrap all other amplitude functions like the init:
export const setAmplitudeUserId = (userId: string) => {
if (process.browser) {
amplitude.getInstance().setUserId(userId);
}
};
const amplitudeEvent = (name: string, params?: {}) => {
if (process.browser) {
amplitude.getInstance().logEvent(name, params);
}
};
from amplitude-node.
Don't calls hooks inside conditions.
I think it should be like this.
useEffect(() => {
if (router.isReady) {
initAmplitude();
}
}, [router.isReady]);
See also
from amplitude-node.
@MohamedJakkariya window is not defined
usually means the code is trying to access the browser window on the server. You should wrap your code like...
if (process.browser) {
useEffect(() => {
initAmplitude();
}, []);
}
from amplitude-node.
The JS SDK does not work with server side rendered applications, as it relies heavily on accessing window.
Looking at the events that the node sdk sends, I am not sure I can use it as it sends the platform as Node.js and I won't be able to get devices or "Real" platforms such as Windows, Mac and Linux or browser usage.
The react amplitude sdk first paragraph says "react-amplitude is not an officially supported Amplitude SDK or library."
from amplitude-node.
@desmondmc Thanks for your reply. By the way, I found my issue. I just try to access the amplitude before loading it into the window. I realized. So I fixed it.
from amplitude-node.
Hi @bobthebuilder1900 ! I think the pattern you have with having is exported seems solid. I was wondering what issues you were encountering with the JS SDK for server side-rendered react?
If the JS SDK also works, you could also consider using our react sdk which wraps the JS SDK and provides useful helper components. You could also consider copying its pattern for the Node SDK and inserting the initialized node client into a top component of the React tree into the context and using context providers as necessary to fetch it within your components.
from amplitude-node.
@bobthebuilder1900 Apologies for the delayed response.
The react amplitude sdk first paragraph says "react-amplitude is not an officially supported Amplitude SDK or library."
We don't support it officially, but I think the pattern it has (and the community built amplitude-react-hooks
, or just using one of those libraries) of injecting Amplitude into React's context might worthwhile to try for building a react application with Amplitude.
The JS SDK does not work with server side rendered applications, as it relies heavily on accessing window.
Unfortunately this is true, and something we're looking into. It would however align better to your use case as it provides a better API for the web. Things you could consider as workarounds while we work to solve this:
- deferring the loading of the amplitude JS SDK to
componentDidMount
- adding a fallback window/document object
from amplitude-node.
Has this been solved yet? I'm running into the same problem using amplitude JS SDK on a NextJS project.
from amplitude-node.
I personally use react-amplitude for Next.js pages, and @amplitude/node for APIs.
from amplitude-node.
useEffect(() => {
initAmplitude();
}, []);
It works on next js. But somehow I get the following error
ReferenceError: window is not defined
at C:\Users\MD\Desktop\webV2\node_modules\amplitude-js\amplitude.umd.js:1197:12
at C:\Users\MD\Desktop\webV2\node_modules\amplitude-js\amplitude.umd.js:2:83
at Object.<anonymous> (C:\Users\MD\Desktop\webV2\node_modules\amplitude-js\amplitude.umd.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.amplitude-js (C:\Users\MD\Desktop\webV2\.next\server\pages\index.js:9193:18)
After reload automatically it works. Such a weird thing. Is anyone the same as me?
from amplitude-node.
Related Issues (20)
- Not compatible with Webpack 5 (Next.js 11) HOT 9
- Doesn't work with Next.js in APIs (events seem sent but aren't available on Amplitude dashboard) HOT 9
- Identify event taking too long to resolve HOT 3
- Node.js example has a bug for ES5 HOT 1
- requestTimeoutMillis breaks 1.8.0 -> 1.8.1 HOT 5
- How should I generate the device ID ? HOT 6
- User properties inheritance HOT 6
- UnhandledRejection when amplitude server is unavailable
- includeUtm HOT 1
- ChainAlert: new npm maintainer has published version 1.10.0 of package @amplitude/utils
- ChainAlert: new npm maintainer has published version 1.10.0 of package @amplitude/types
- Getting host verification error while installation npm install amplitude/node HOT 1
- Where can I see the event log in amplitude? HOT 1
- Can we send batch/bulk events at once HOT 1
- 📣 Introducing NEW Amplitude SDK for Node.js [BETA]
- Not compatible with Webpack 5 (Next.js 11) (fix)
- maj tslib to next major HOT 5
- How to track revenue? HOT 3
- insert_id parameter in amplitude android sdk
- Test Issue ticket creation in AMP
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amplitude-node.