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
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.
https://www.gatsbyjs.org/docs/adding-images-fonts-files/
If you put a file into the static folder, it will not be processed by Webpack. Instead it will be copied into the public folder untouched.
You create a folder as your_gatsby_project_folder/static (not in project/src), and put your minified files from outside in it. Whatever is in the static will be copied onto public folder so you can link to them as usual
// in your react file, you can use script tag to link to the minified files
render(){
return(
<div>
<script src="/path/to/your/min.js" />
whatever
</div>
)
}
If you want to take a minified javascript file and add it to a <script tag in the <head of your Gatsby site, you do not want to import it.
Check the docs on custom html.
You could put the file into the static/ folder, then it will be copied into your built output. Then cp .cache/default-html.js src/html.js and edit src/html.js to add the <script tag you want.
However, this is not a very good approach. You would be better to give Gatsby the unminified file if you can. Then you can import it in the normal Gatsby way, and Gatsby will handle minifying it. Gatsby is really good at figuring out what javascript is required where. It's part of why Gatsby sites are so insanely fast. You will lose some of that advantage if you use the approach above.
Related
I am following the course of Full stack. https://fullstackopen.com/en/part1/introduction_to_react
It uses npx create-react-app part1 to create a example react project.
So for this statement in index.js
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
the course says that document.getElementById('root')) is using the content defined in the file public/index.html, having the id value 'root'.
So I wonder if we can modify something in the index.html to influence what will show in the result of web application. I tried but failed with no influence.
The corresponding part of "public/index.html, having the id value 'root'." is defined as following:
<div id="root"></div>
You can modify everything in the index.html.
Entire content of <div id="root"></div> will just be replaced with the React app.
Gatsby sort of provides a way to manipulate the main html.js link to gatsby docs
but this is still a React component and I need to place a custom analytics script inside the Head. I tried eval, surrounding the script content in curly bracket, nothing works.
Found a workaround using dangerouslySetInnerHTML. Since it will strip our script tags I just placed a script tag in the Head and set the attr dangerouslySetInnerHTML to the content of the script provided by third party. e.g. in the render function of html.js:
const googleOptimizeFlickeringScript = {
__html: `(function(a,s,y,n,c,h,i,d,e){..........`
}
return (
<html>
<head>
<style dangerouslySetInnerHTML={googleOptimizeFlickeringStyle} />
<script dangerouslySetInnerHTML={googleOptimizeFlickeringScript}/>
I'm doing some react.js in PhpStorm 10 and even though JSX Harmony is enabled as the JavaScript language level, it still gives all sorts of nonsense errors.
So I disabled inspection completely for JavaScript but it still gives errors like "expression expected" or "Expecting newline or semicolon".
How do I get ride of those for JS?
<script type="text/babel">
var MyComponent = React.createClass({
render: function () {
return <div>
<h1><p>{this.props.text}</p></h1>
</div>;
}
});
React.render(<div><MyComponent text="text1" />
<MyComponent text="text2" /></div>, document.getElementById('container'));
</script>
At the moment such inline scripts with type="text/babel" are not supported -- IDE only recognizes text/jsx as type for now.
https://youtrack.jetbrains.com/issue/WEB-18276 -- watch this ticket (star/vote/comment) to get notified on progress.
Possible workarounds (that I'm aware of):
change type to text/jsx (but then the in-browser babel most likely will not transform it, unless you can configure it somehow)
keep your JS code in a separate .jsx file
UPDATE: (23/03/2016) The aforementioned ticket is now marked as "Fixed" -- this functionality should be available in next update of 2016.1.
I'm new to MVCs and Angular and I tried to get angular-google-maps going by following the steps in the AGM QuickStart page. Firebug shows several errors, some of which I don't understand.
First, I get a 403 in accessing underscore. The message (minus localhost) is:
"NetworkError: 403 Forbidden - angular-oPast/app/..../node_modules/underscore/underscore-min.js" Why can't I access code that's in my own PC?
Second, I get SyntaxError: missing } after property list }; with some reference to ngLocale, which is not in my code.
Third, I get ReferenceError: _ is not defined with some reference to MarkerLabel, which I am not using.
Fourth, I get [$injector:nomod] Module 'residenceApp' is not available! This is the name of the overall Angular app. Despite having done a couple tutorials, I don't know how to build this for using AGM or where to put it.
Fifth, per the AGM QuickStart, I have the following in my CSS
.angular-google-map-container {height:400px;}
This is a puzzle because the instructions say nothing about creating an HTML class=".angular-google-map-container" I did not put an HTML class attribute in like that because there were no instructions to do that. What is that CSS doing, and is it correct for my situation?
My HTML using ng looks like:
<html lang="en" data-ng-app="residenceApp">
<div id="gMapCanvas" data-ng-controller="GMapController2">
<google-map center="map.center" zoom="map.zoom"></google-map>
</div>
Most of the rest of the HTML is mock up text, at this point.
My scripts look like:
<script src="..../node_modules/underscore/underscore-min.js"></script>
<script src="common/gmapGenerator2.js"></script>
<script src="common/mapGenerator/dist/angular-google-maps.min.js"></script>
Maybe I should say that example.html for AGM works in my PC. So I have the necessary code in the system. It just doesn't have dependencies set right, or something.
What do I need to do to fix these problems and get Google Maps working? I can provide more info, if necessary.
I went through the docs to find for a Ext.example.msg but, i am unable to find it.
According to this example, they have successfully used Ext.example.msg. How is this ?
I had another question on SO which is related to this.
UPDATE
I am trying to use the following code in my application;
Ext.example.msg('Button Click', 'You clicked ta button');
When i execute the code, i get an error saying TypeError: Ext.example is undefined .
To overcome this error i did the following;
1.) added <script type="text/javascript" src="app/extjs/examples/shared/examples.js"/> in my app.html file
2.) added the following in my app.js file
Ext.Loader.setPath('Ext.example', 'app/extjs/examples/shared');
Ext.require(['Ext.container.Viewport',
'Ext.example.*']
);
None of the above methods works, i still get the same error message.
My project folder structure is as follows;
Project_Name
->app (folder)
--> app.html
--> app.js
--> extjs
---> examples
---->shared
----->example.js
When you include your js script in you index.html, as you did in 1:
<script type="text/javascript" src="app/extjs/examples/shared/examples.js"/>
You no longer need loader or to require it - you have explicitly included it and it is clear the script content will be in scope.
It appear to me your path is incorrect: There's no app/extjs and it would make sense to have the extjs folder as sibling to that of your app. Thus this should work:
<script type="text/javascript" src="extjs/examples/shared/examples.js"/>