Hi all I am doing quasar project and I need to access JSON file that is on server.
I'm trying this:
Import MyVar from "http://myserver/files/MyVarfile.json"
But whenever I try it it gives me error:
The target environment doesn't support dynamic import() syntax so it's
not possible to use external type 'module' within a script. Did you
mean to build a EcmaScript Module ('output.module: true')?
Related
Mux is a video API service that has its own player: MUX Player
I am wanting to use this npm package in Angular 14/15 by importing it into a specific component only. The js should only be loaded when this component is loaded.
Import
The two methods of using the service are:
via a direct <script src="https://unpkg.com/#mux/mux-player"></script> import in the HTML (which I can do in angular's index.html file. This does however mean that the script is loaded for everyone, which is not what I want.
npm Package #mux/mux-player
Usage
Add the code to a component's HTML where the script or npm package has been imported.
<mux-player
stream-type="on-demand"
playback-id="FuJSYrK0014ec2LPnm11bzC2MAySAQPqA"
metadata-video-title="Tea and Cookies"
metadata-user-id="user-24601"
/>
Making sure to also include schemas: [CUSTOM_ELEMENTS_SCHEMA] in the module (or standalone component).
Problem
Angular can be a bit weird about untyped packages. I think that this package uses typescript, but in any case, importing the npm package gives me plenty of errors. Essentially, it's not being loaded because Angular is tree-shaking it out when I am not using the imported class in the components' ts. This means that on load, I am seeing:
Cannot find module '../../../types/mux' or its corresponding type declarations and Property 'error' in type 'MuxVideoElement' is not assignable to the same property in base type 'CustomVideoElement<HTMLVideoElement>'. Type 'MediaError' is missing the following properties from type 'MediaError': MEDIA_ERR_ABORTED, MEDIA_ERR_DECODE, MEDIA_ERR_NETWORK, MEDIA_ERR_SRC_NOT_SUPPORTED
What I've tried
To confirm that the <script> import and HTML code work together, I imported the script into the index.html, and this removed all errors and the player loaded fine.
I have tried importing the npm package import MuxPlayerElement from "#mux/mux-player";, and added declare module "#mux/mux-player"; to the typings.d.ts.
Import the package into the component, and tried to declare the #ViewChild template ref as a MuxPlayerElement, to get around any tree-shaking.
There is an Angular demo where it says "This player? It's an open book." at https://www.mux.com/player, however, this results in the error Only void and foreign elements can be self closed "mux-player". Easy solution to this is to close the tag with </mux-player> rather than .../>
With the dart interop js package I am struggling to find a way of using multiple js files (either with CommonJS or ES6 syntax). It appears that as soon as an import statement is used within an external js lib file, an error:
NoSuchMethodError: tried to call a non-function, such as null:
'dart.global.someJsMethod'
is thrown when calling any methods with the #JS() syntax. I have tried using webpack to generate a single js file, but the error remains.
Do I just accept this and manually merge into one js file to get rid of all import statements? Or am I missing some secret sauce in my dart references?
I'm using a library vtk.js. VTK has a special design of classes (https://kitware.github.io/vtk-js/docs/develop_class.html). When I write a class I need to import macro.js module which exposes several base methods such as getters/setters/newInstance etc (https://github.com/Kitware/vtk-js/blob/master/Sources/macro.js).
Looks like CRA uses some special loader for macro.js files. I get an error when trying to import such a file (SyntaxError: Cannot use import statement outside a module). If I copy an original file macro.js from #kitware/vtk.js to my local source folder I still get an error. Even if I remove all the contents of macro.js file I get an error (The macro imported from "../macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros". Please refer to the documentation to see how to do this properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#writing-a-macro). However, when I rename macro.js to macro2.js the error is gone.
Is there some way how can I disable this macro loader?
I am trying to write a JavaScript module that will be imported in the browser. This module should import and patch another which uses UMD (Universal Module Definition).
In this new module I do import 'old.js'; I get the following TypeError: root is undefined. What is the correct way to do it?
I need to implement 3rd party rest API in php project for integrating another project which is in angular.
Using rest API, I need to store cookie in the browser and cookie value will be in a specific format as instructed for which I need to import a specific npm package called angular2-cookie inside my root directory from
https://github.com/salemdar/angular2-cookie/blob/master/src/services/cookies.service.ts
I successfully installed it using npm command inside root directory.
In /js/sample-script.js
I imported the specific cookies.service.js file from that angular2-cookie module using browserify lib like
var CookieService = require('../node_modules/angular2-cookie/services/cookies.service');
var cs = new CookieService();
cs.putObject('somecookie',{user: 'john'});
but in the console, I am getting an error like:
Uncaught TypeError: CookieService is not a constructor
How can I implement putObject method from CookieService prototype?
Note: There is no error coming till 1st line where I used require method