I am just testing the new import syntax. But I get a bit frustrated since the syntax I have to use does not seem to be what I have been reading. Why is the syntax below working (in Chrome, in an extension)?
import * as lib from "./lib-file.js";
What alternatives are there for this special syntax?
EDIT: I think I must clarify some things. I am trying to get this to work in a Chrome extension. The syntax above works in the "popup" script (in a script loaded from the html file there). I wrote this post because I was surprised that I needed the ".js" extension.
However then a new problem showed up. The above syntax does not work in a "content" script. The error I get is the same as the one I get from the popup when there is no type="module" in the script tag in the html file. (Uncaught SyntaxError: Unexpected token *) This looks like a bug when importing to a content script, but I am not at all sure. Am I missing something there?
EDIT 2: I just found this article which seems to tell how to fix these problems for now:
Using JavaScript ES6 import/export modules in Chrome Extensions https://medium.com/#martinnovk_22870/using-javascript-es6-import-export-modules-in-chrome-extensions-f63a3a0d2736
EDIT 3:
I just got a pointer to this utility. I notice that they do not use ES6 import in their suggested setup in the browser.
mozilla/webextension-polyfill: A lightweight polyfill library for Promise-based WebExtension APIs in Chrome https://github.com/mozilla/webextension-polyfill
You can use different import calls - maybe even require if your server is Node:
const lib = require("./lib-file");
import "./lib-file";
import libFile from "lib-file";
Note that in the third one, you need to export libFile from your lib-file.js.
Related
Actually I've two questions, because the common workaround for my initial problem does not work :)
I'm trying to build an Emscripten based library which calls JavaScript functions as described here: https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#implement-a-c-api-in-javascript
Simply put I just implement my C/C++ code against a C-Function, implement that function in a .js file and 'link' that file using --js-library.
Basically things are working for me except with version EMSDK version 1.38.12 I got a warning when linking the final library:
warning: undefined symbol: foo_
.. which I don't understand but I could just ignore it. In newer versions of EMSDK the behavior changed and the warnings become errors.
Searching for this error you find you can just add -s ERROR_ON_UNDEFINED_SYMBOLS=0 when linking, but this doesn't work (for me) - I still get this error despite I can see this option being added to the linker.
So my questions are:
how do I make -s ERROR_ON_UNDEFINED_SYMBOLS=0 work for me?
and why do I get this warning in the first place? how do I get rid of it?
In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?
While debugging application most of the time I feel like it would hve easier if I could include any library into browser console and try some of the function from that libraty.
Now in modern javascript/es6/es6/typescript world is there any thing short and quick available to to import a script instantly to the brower so that it can be used to directly
Example
While debugging, if I want Observable I should be able to do something like this
import {Observable} from 'rxjs/Observable'; //typescript way
const Observable= require('rxjs/Observable'); // require way
But these are not working.
already explored dynamic <script> tag
I already explore old way to dynamically using the <script> tag like below but its dificult for large number of libs and also not elegant
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();
Some browsers (including Chrome) can use snippets in console, either as built-in features or extensions.
One-liner script to do this is
document.head.appendChild(Object.assign(
document.createElement('script'),
{ src: '...' }
));
Considering that most websites already have jQuery loaded (even if they don't, this can be handled by browser extensions, such as Chrome jQuery Injector) it can be shortened to:
$.getScript('...');
Any piece of code that should be always available in console can also be exposed as global function with user scripts (Tampermonkey in Chrome, etc), with some limitations imposed by user script security.
This will probably will be possible with dynamic import(), which is currently stage 3 proposal and isn't implemented in browsers.
A suitable solution that works for most major libraries the one may be curious to quickly experiment with is to navigate to official library website and open the console. Due to the fact that the websites often provide live examples, relevant variables are exposed to global scope. Known examples are $ for jQuery, angular for AngularJS, ng for Angular, Rx for RxJS, moment for Moment.js...
I am using the latest version of Meteor js. I am a newbie and couldn't find the solution. I have surfed for this problem a lot.
Before going to the problem, please have look at the directory structure first.
My directory structure of the project is like this :
\client
\main.html
\main.css
\main.js
\imports
\lib
\todos
\todos.js
\server
\main.js
I have created a Mongo Object in todos.js.
export const Todos = new Mongo.Collections('todos');
This is working fine.
Now in client\main.js, I am importing this object,
import { Todos } from '\imports\lib\todos\todos.js';
Note: I tried relative and absolute both type of addressing.
I put a debugger after that and checked and the variable is there. I can access that variable on the console. But as soon as I pass the statement and all the code is rendered on the browser(google chrome), I am not able to use Todos. It is giving me a ReferenceError. The error is
Todos is not defined.
I know there is no problem till the browser is loading because I checked that. I have surfed a lot. Please help me.
Thank you in advance.
Edit 1: I am using windows 7 if that is necessary.
As the comments above said, variables declared or imported in a file/module don't end up on the developers console.
What you can do to get stuff on the console is import it to the console using require
> require('/imports/lib/todos/todos.js')
Any valid absolute path or package will work here
Note: the path separators are always *nix style /
I had a similar problem while trying to evaluate moment from Moment.js in Chrome console. It was imported by the script being debugged/under breakpoints but does not work in console. import or require Moment.js in console gave me errors and did not work for me.
I ended up switching to Firefox Developer Edition, where I can put breakpoints and then evaluate moment in its console out of the box without any problems.
This is a bit tricky, so I'll try to explain it well.
We use an erp solution where we can create ad hoc forms. On those forms, we can program some js and use an internal API provided by our solution developers.
Now we are facing the case that several different forms have to use common data structures and functionalities (for data validation, use interaction, etc...).
We can include all the code in each form and make it work, but it seems like a poor solution. It'd probable be a lot better if we generate a js library where we export those data structures and funcionalities, so we can import them in every form and just update it in one file.
The fact is that we are receiving a syntax error when we try to import a public library, probably because on execution time, the code we type is encased into a function into our developer's code.
ourProviderObject.ourProviderMethod('formName').clientLogic =
function(datpar, self, editable, store) {
import 'https://pathToOurTestLibrary.js'; //here starts our code!!!
So... I'm wondering why the syntax error. If some operation like this (importing a file from within a function) is not allowed I'd be expecting another type of error.
It's possible to make an import from within a function?
If it is... what could be the reason behind a syntax error?
Ok... I've switched from IE to FF and the error has turned much more clarifying:
SyntaxError: import declarations may only appear at top level of a module.
So I supose that answers my question, you cannot import a file from within a function or a callback