Using SDK with Next.js and making Amplitude global about amplitude-node HOT 10 OPEN

@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

• https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

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.