I am trying to add heap analytics script in my react project but it keeps throwing this error "'heap' is not defined". And I cannot compile the project due to this error.
As far as I know, heap wants their code to run in <head></head> tags. But I can't figure out how to make a code run inside <head></head> in react. The rest of the scripts like GTM and FB pixel code is running fine.
Any help is appreciated.
Just call it off:
window.heap.identify('random#myemail.com', 'email');
For some reason this isn't more clear on their website but if you check their docs here then you'll see that you just have to call window.heap.track() not just heap.track().
Also, you want the script as they mention in your index.html file at the bottom of the <head> element aka right before </head>
You should be able to include the heap script under head tag as below (Set right path to script in place of yourHeapScriptPath)
<script type="text/javascript" src="yourHeapScriptPath.js"></script>
If your're using webpack, you've got two options:
A) put your script in index.html and ask in your React-Scripts if the variables are defined
B) Put the scripts in your webpack entries, like the following:
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
See webpack-entries for more information.
Related
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
I ran next build followed by next start. It's still rendering with many JS files at once instead of a singular entrypoint.
Is there something I'm missing here? The docs make it seem as though this is all that's needed
The files you see are NextJS code splitting into functional and framework code , you can read more about it here
https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy
I see a comment about a <script file in your head, Next will leave this alone because its just a tag being printed - if you need your own outside JS file to be served by Next, place it in the public directory.
PROBLEM DESCRIPTION.
I'm trying to follow https://github.com/lucascosta/facebook-js-ads-sdk to install the Javascript SDK for Facebook. Before anyone objects, I am absolutely aware of the compact version (https://developers.facebook.com/docs/javascript/quickstart), but that API is absolutely useless to me. I need the one produced by Lucas Costa, in order to be able to make changes to my ads account, which the recommended script by Facebook does not enable.
As usual installation instructions (see github.com/lucascosta/facebook-js-ads-sdk) are horribly predicated on mysterious conditions, that are unbeknown to me. I cannot get the SDK to work and would like someone to tell me explicitly what to do. The crux of the problem is the paradoxical situation: I am supposed to use a require('...') command (where??) to include the SDK (where is this supposed to be saved??) and yet require cannot be used on folders, but on scripts. Maybe somewhere there is a require.config file, I'm supposed to set up, but I have no idea, as, like I said, the instructions completely bypass any mention of the necessary starting conditions.
Here is what I have done so far. My folder-structure looks like this (I don't even know if this is right, as no-one explains it anywhere!):
[Serverroot]
— [folder with my website]
– facebook-ads-sdk (the folder one gets by downloading)
– css — pagestyles.css
– js — lib
require.js
— app
( some header scripts )
– img
( some images )
index.php
In index.php I have a block of html followed by some javascript. It is here, that I try to insert the setup / example code from . The browser cannot even get past the line const adsSdk = require('facebook-ads-sdk');. I have tried a number of things: require('./facebook-ads-sdk');, moving all this to the folder ./js/app in a script main.js and then writing in my html in index.php where main and require are located. Setting up a require.config (or requirejs.config) replacing require by requirejs, etc. and including the appropriate scripts in the <head> part of index.php. Nothing helps. Here are the errors: first with const adsSdk = require('facebook-ads-sdk'); I get
Error: Module name "facebook-ads-sdk" has not been loaded yet for context: _. Use require([])
Okay. How do I ‘load the Module for the context _’?? Reading requirejs.org/docs/start.html is of no help here. I tried require([], function() {require('facebook-ads-sdk')}); Same error. I tried require(['facebook-ads-sdk']);
I tried using the following commands in my script in index.php:
require.config({
shim: {
'facebook': {
exports: 'adsSdk',
},
},
paths: {
'sdk': './facebook-ads-sdk',
}
});
var adsSdk = require(['sdk']);
Then I get the error
Failed to load resource: http:// .... /facebook-ads-sdk.js the server responded with a status of 404 (Not Found)
Ie, the browser thinks I'm trying to include a script facebook-ads-sdk.js, but I’m supposed to(???) ‘require’ the entire folder! What is going on? Can someone please give me thorough instructions about the necessary folder structure and command, in order to get this SDK working?
Why is this so infuriatingly vaguely described online? Is there some kind of mysterious way of installing SDKs, about which ‘everyone’ knows, but never mentions?
UPDATE: SOLUTION. For any future google-searches for this same problem: via the following simple methods, one can install & embed the Javascript-FB-Ads-SDK:
install via npm install --save facebook-ads-sdk a copy of the npm modul Lucas Costa’s facebook-ads SDK.
Copy this folder to your website’s architecture (actually you possibly just need one subfolder / file).
in your HTML include the script (via <script type='text/javascript' src='...'></script>) with the src pointing to the file in the facebook-ads-sdk folder: /dist/iife.js.
In your page’s script, you now have access to then API via the global variable fb.
alternatively to 3:
3’. in your HTML headers make sure to include the require.js script via a <script>-tag. Then in your website’s javascript apply the following commands anywhere:
require.config({
paths: {
'sdk': './[FOLDERNAME OF SDK]/dist/iife',
}
});
require(['sdk']);
Credit and special thanks goes to #SLaks and #KhauriMcClain (I would give you up-points if I could) for this solution.
The instructions are assuming that you're using a bundling system like Webpack or Browserify.
If you are, the instructions "just work"; you can require() it and everything will work fine.
If you're building a non-trivial codebase, you really should use such a system.
If you aren't, you can reference iife.js in a <script> tag and that will create global variables.
You need to change the way you are using require.
You cannot use the synchronous require method to load dependencies if they have not been loaded before. Hence const adsSdk = require('facebook-ads-sdk'); will not work. You will need to use the form require(['name-of-script'], callback).
Require does not allow you to load an entire folder. You have to find the exact script you are trying to work with so var adsSdk = require(['sdk']); will not work.
Ultimately your code should look something like:
require(['some-facebook-script'], function(someFacebookScript) {
// Do some work here
});
The parameter passed to the callback function will be the loaded module you are trying to consume. When using the asynchronous version (as I just demonstrated) the return from require is not useful.
Let's say I have my awesome.html file with
<head>
<script .. abc-library.js>
<script .. app.js>
</head>
and I would like to unit-test my own file, app.js.
but inside my app.js, I am calling something defined in abc-library.js, say like this
...
handy_function_from_abcjs("do something here");
...
Of course when I load my awesome.html in the browser, it works fine because I defined my handy_function before app.js, so my app.js sees it...
But, problem when I run the unit test on app.js, because it only loads app.js alone, and it will fail because it can't find handy_function's definition.
How is this kind of situation solved in those javascript unit test definitions? This is always encountered right?
I hit into this problem now when I am using karma to test out my beginner AngularJS app.
Temporarily place abc-library.js contents in app.js; why make it any more complicated? Remove the code once you're done with your unit-testing. Or you could always do a console.log if/when you run your awesome.html file in the browser.
I'm trying to write some simple tests on JS code that can be run from the command line to test code that has nothing to do with HTML, documents or user interface. To do this I need to include one file within another to pull the code being tested into the test script.
What I've found involved HTML or DOM to do the job; for example, something like
document.write( ) or some such.
Is there a simple way to do this? I'm imaging something like
include( "code2test.js" );
I'd appreciate any help in solving this. Can JQuery help or does it have to be used in a HTML/browser context?
Thanks in advance.j
It sounds like you just need two script tags:
<script type="text/javascript" src="code2test.js"></script>
<script type="text/javascript" src="testscript.js"></script>
If that doesn't work, try reversing the order.
Sounds like what you need is Require.js. It's designed to allow inclusion of javascript in the web page using javascript rather than script tags. For example, instead of:
<script scr="foo.js"></script>
<script>
use_foo_here();
</script>
using Require.js you can write:
require(["foo.js"],function(foo){
use_foo_here();
})
The cool thing about Require.js is that it can even be used on Node.js. So for command line invocation you can use Node to run your scripts and the require() statements would work just like it does on the web page.
If you just want access to a javascript engine (eg Webkit) without using a browser, you can use something like nodeJS or PhantomJS
We are using Chutzpah as our test runner, and are very satisfied with it. We write the tests using Jasmine. Jasmine does not require a DOM.
At the start of the test file, the references to the JavaScript files under test are added, like this:
/// <reference path="dependantModule.js" />
/// <reference path="code2test.js" />
and then the test code follows:
describe("code2test test suite", function () {
it("should do something"", function () {
var result;
// Assuming code2test.js exposes a global called 'code2test'
result = code2test.doSomething();
expect(result).toEqual("the expected result");
});
});
Chutzpah uses the PhantomJS headless browser. So you can write tests that interact with the DOM if required.
We run the tests through Chutzpah from the command line for continuous integration, but also run them inside Visual Studio 2010 using the Chutzpah Visual Studio Extension. I believe integration of Chutzpah in VS2012 is even easier, but haven't tried it myself.
The tests can also be ran inside a 'real' browser, which is great for debugging. My browser of choice for debugging the test code is Chrome - the developer tools are great.