Search code examples
reactjsminifyazure-application-insightsgatsby

How to get minified files in project ( Gatsby / React )

gatsby version = 2.0.0-beta.19

node version = v10.6.0

npm version = 6.1.0

VScode version = 1.25.1

When adding minified files (.min.js or .js with minified content) to my react Gatsby project, I get the following error when I try to do gatsby develop:

 ERROR  Failed to compile with 1 errors                                                                                                                      10:41:47 AM
 error  in ./src/components/appinsights.js

Module Error (from ./node_modules/eslint-loader/index.js):

/mnt/d/my_site/src/components/appinsights.js
  2:185  error    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  2:248  warning  Unexpected use of comma operator                                       no-sequences
  2:493  warning  Unexpected use of comma operator                                       no-sequences
  2:649  error    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  2:660  warning  Unexpected use of comma operator                                       no-sequences
  2:761  warning  Unexpected use of comma operator                                       no-sequences
  7:1    error    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  7:31   warning  Unexpected use of comma operator                                       no-sequences

✖ 8 problems (3 errors, 5 warnings)

I added a new file "./src/components/appinsights.js" and the contents of the file are from inside the script tag of App insights JS snippet

var appInsights=window.appInsights||function(a){
    function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
}({
    instrumentationKey: "<my_key>"
});

window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();

In my "./src/components/layout.js" 

import appinsightsFile from './appinsights.js'
...
<Helmet
    title={data.site.siteMetadata.title}>
    <html lang="en" />
    <script type="application/ld+json">{appinsightsFile}</script>
</Helmet>
...

I am not sure if this is a react issue or Gatsby. I can't seem to get any minified code to work with my application.

I have tried:

  • inline app insights code in my layout.js
  • taking the script tags out of the helmet code
Solution

  • I am not that experienced and wanted to comment on this, but I need 50 reputation. Anyways, maybe we can solve your issue together.

    First off, why do you use type application/ld+json instead of text/javascript as stated in the ApplicationInsights-JS readme?

    To debug this issue try to insert the contents of appinsights.js directly into the script tag.

    The following should work:

    <Helmet
    title={data.site.siteMetadata.title}>
    <html lang="en" />
    <script type="text/javascript">
      {`SCRIPT`}
    </script>
</Helmet>

    If not, try dangerouslySetInnerHTML instead.

    Note the back ticks inside {}. If this is working correctly, proceed with your component.

    As I know – correct me if I go wrong – the use case of directly importing a file in Gatsby belongs to static files. You could simply import logo from './Logo.svg' and this will return the url to that file. Behind the scenes, Webpack will include that file in the bundle and you can reference it like in src and href attributes.

    If you want to include that JavaScript string from a component (that what you placed inside the components directory is not a component), you should write a component for that, which renders this JavaScript.

    I didn't try that myself, but I think this could work with some modification.

    The errors you are facing are part of eslint, I think. The compiler (Webpack?) expects non-minified ES6 JavaScript. Again, correct me if I am wrong.

    Some sort of a stateless functional component should help you here:

    appinsights.js

    import React from 'react'

const AppInsights = () => {
  return `
    SCRIPT
  `
}

export default AppInsights

    layout.js

    import AppInsights from './appinsights.js' // Replace with your path.

<Helmet
    title={data.site.siteMetadata.title}>
    <html lang="en" />
    <script type="text/javascript"><AppInsights /></script>
</Helmet>

    But I think it is safer to work with dangerouslySetInnerHTML as before.