I have installed the "lodash" using "npm install --save lodash" and imported in my JS file.My intention is to Deep clone of an Object and found that Lodash is the library which solve this problem. My HTML and JS files are as follows.
My HTML file is as follows.
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module" src="scripts.js" ></script>
</body>
</html>
My JS file (scripts.js) is as follows:
import _ from 'lodash';
let userOne = {
name: "Siju",
userFunction:function(){
return this.name;
}
};
// Deep Copy: Start
let userTwo=_.cloneDeep(userOne);
// Deep Copy: End
userTwo.name="Johnson";
userTwo.userFunction=function(){ return this.name.length }
console.log(userOne.name);
console.log(userTwo.name);
console.log(userOne.userFunction());
console.log(userTwo.userFunction());
But i am getting following errors.
Error1: (When use: import _ from 'lodash';)
Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".
Error2: (When use: import _ from './node_modules/lodash';)
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I have spend lot of time on this and did'nt get any suitable solution. I am really frustrated on this issue because it is a silly issue but did'nt get any proper fix in the internet. Most of the explanation is seems to be with so many dependency fixes and all. But no any fixes are worked for me. So anyone can be come up with simple and proper fix for this. Thank You Very Much in Advance!
You can go to http://lodash.com/ and download the entire .js file into your current project folder and then include the following line in your HTML body paragraph.
<script src="lodash.js"> </script>
And then import it at the top of your JavaScript file in which you would like to use it.
import _ from 'lodash'
Related
I'm working on a Flutter web project. The web/index.html file is injecting a JavaScript script which could be simplified as:
<script>
window['dataLayer'] = [];
</script>
So in my flutter code, I can do:
#JS()
import 'package:js/js.dart';
#JS('dataLayer.push')
external void push(data);
push(myData);
to push myData in the window.dataLayer array.
However, in the tests, when I'm running
flutter test --platform chrome
I'm getting the error
TypeError: Cannot read properties of undefined (reading 'push')
when I call
push(myData);
because window['dataLayer'] has never been created.
How can I inject some javascript scripts the same way I can do in the index.html?
It is possible to load a custom HTML file while running the tests, see the instructions of the package test.
If your test file name is folder/my_test.dart, then you can create a html file named (folder/my_test.html):
<!doctype html>
<html>
<head>
<title>Custom HTML file title</title>
<link rel="x-dart-test" href="my_test.dart">
<script src="packages/test/dart.js"></script>
<script>
window['dataLayer'] = [];
</script>
</head>
</html>
See this StackOverflow question.
and then you can run
dart test --platform chrome
However, this is only supported with dart test and not flutter test, see this issue. In it, they recommend writing an integration test instead.
I want to use modules in my javascript and html. When i use systemjs with version 5, i am getting error, in github i cant see the steps to configuration. If i removed System.config from below code, at that time i getting CORS issue.
What are the package i have to use to run modules in javascript and html
How to set the configurations for latest version
<!-- <script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/systemjs/dist//system.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/5.0.0/system.js"></script>
</head>
<body>
<script>
//Configuration
System.config({
'meta': {
'./js/*.js': {
format: 'esm'
}
}
});
System.import('./js/app.js');
</script>
I am getting Error : index.html:18 Uncaught TypeError: System.config is not a function. if I removed system.config i am getting Error : Unable to resolve bare specifier "js/app.js" from file:///C:/Train/ES6/systemjss/ at throwBare (system.js:184) at resolveImportMap (system.js:180) at system.js:734
I'm learning Ionic to build an app that requires some linear algebra. It seems that I have to somehow import mathjs into my project.
So far, I've done this in my project's folder:
npm install mathjs --save
But now what? Where do I actually import it? I've tried writing
import math from 'math'
in app.js, inside angular.module() { ... }. When I do this, I get:
SyntaxError: import declarations may only appear at top level of a module
I've also tried adding
<script src="js/math.js"></script>
in index.html, but that doesn't work either. I've spent all afternoon trying to find documentation or examples, but to no avail. What am I missing?
For ionic v1, You just need to include the mathjs library in index.html page, and mathjs exposes the global math object , so you don't need to inject anything, you can call it whenever you want in your app.
if you use bower, just install the lib by,
bower install mathjs --save
then
<script src="path/to/bower_components/mathjs/dist/math.min.js" type="text/javascript"></script>
or you can use a cdn
add this in index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.9.1/math.min.js"></script>
I've got a file named index.js which looks like this:
import Backbone from 'backbone'
import _ from 'underscore'
import $ from 'jquery'
console.log("blah")
export default {...}
In my index.html I've got:
<script>
System.import('index');
</script>
But what's baffling me is that I can see the file being loaded (in the dev tools network panel) but the console.log is never run. If this is the case, how am I to bootstrap my application?
Several online tutorials suggest bootstrapping it in the System.import file but how can that be done if the code isn't executed?
I ended up adding a .then() to the System.import with three anonymous functions, all with just a debugger and found that the import $ from 'jquery' was timing out because I didn't have the library installed. I removed the import declaration and the app was still trying to load jquery, so I installed it and it fixed the issue.
During the development process, I've been using elm-reactor to test my one-page Elm application. But for production deployment, I would like to just store the compiler's output as static files on a webserver.
How do I compile an Elm page into a standalone pair of HTML + Javascript files?
Use elm-make to compile your Elm application to elm.js (target the module that defines main).
Create your own HTML file that includes that script and a script in the body that executes Elm.<Module-that-defines-main>.fullscreen()
Example
App.elm
module App where
import Text
import Signal
import Graphics.Element (Element)
main : Signal Element
main = "Hello World!" |> Text.asText |> Signal.constant
elm-make App.elm (creates elm.js)
App.html
<!DOCTYPE html>
<html>
<head>
<script src="elm.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">Elm.App.fullscreen()</script>
</body>
</html>
The answer to this ticket on the github project page is also quite helpful:
Finally, use this command to compile the file into a single, stand-alone HTML file.
$ elm make start-test.elm --output index.html