Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doesn't work with Create React App's build script

See original GitHub issue

Hi 👋

At the moment, analytics-node doesn’t work with Create React App, as the build script fails when trying to minify the ES6 code (https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify). I’d like to hear if you’d be willing to publish a pre-compiled version?

I understand that this is a node library and perhaps not meant to be used in the browser, but the analytics.js package on NPM is outdated, so please correct me if I’m wrong, but analytics-node seems like the only way to use Segment if you want to load it through a module.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:14 (3 by maintainers)

Top GitHub Comments

3reactions

f2prateekcommented, Jan 5, 2019

Please keep in mind that you are sort of comparing apples and oranges when comparing analytics-node in the browser to analytics.js and are giving up a lot of functionality.

analytics-node fits into this relatively tiny ~300 line file https://github.com/segmentio/analytics-node/blob/master/index.js

analytics.js by contrast looks like this for segment’s public facing site https://cdn.segment.com/analytics.js/v1/zaySL4FGIiLsxt3I7omU5uLxXqxaBMPh/analytics.js and packs in a lot more functionality than its analytics-node counterpart.

3reactions

hzhucommented, Jul 27, 2018

Also, another thought on why you might prefer analytics-node over analytics.js is that it’s hard to ensure window.analytics is loaded, while with the npm module you can be sure. (Any thoughts on this?)

Edit: The following is instructions for create-react-app, client side rendering.

Hiyo @denkristoffer, the proper way to setup analytics.js in create-react-app is to put the script inside the <head> element of your document; then load it with your Segment API key which is referenced through a custom environment variable:

First, create an .env file in the root of your project which contains your API key. Your .env should look like this:

REACT_APP_SEGMENT_API_KEY=<Insert your Segment API key here>

Then put the analytics.js snippet in the <head> of your public/index.html and load the script using your API key which is referenced through custom environment variables:

<script type="text/javascript">
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(n,o);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
  analytics.load("%REACT_APP_SEGMENT_API_KEY%");
  analytics.page();
  }}();
</script>

Now window.analytics is loaded and available to use through your app 🎉 !

Top Results From Across the Web

Create React App build does not work correctly - Stack Overflow

In localhost I can use and see everything correctly but when try it with npm run build , I can't reach anything and...

react-scripts fails to build project with Node 17 #11562 - GitHub

Describe the bug we have a CRA app, it used to build with Node 14.x very fine, today I upgrade nodejs to 17.0.0...

Deployment | Create React App

By default, Create React App produces a build assuming your app is hosted at the server root. This will let Create React App...

How to fix build failures with `create-react-app` in production

If your build is using create-react-app and has been failing since approximately the 18th of June 2020, this post will help you fix...

Everything you need to know about react-scripts

In this guide, we'll give an overview of react-scripts, compare a few different types of scripts, and describe how Create React App dramatically ......