I m quite beginning with svelte and more a backend end developer than javascript. I see few people using Auth0 with svelte/sapper, when I try to import an npm auth0-lock package I have got events not defined error but no error if I link the javascript in html header, what is the way to import auth0-lock correctly ?
the error is thrown in main.js and I just wanted to add :
import Auth0Lock from "auth0-lock";
// // Initializing our Auth0Lock
let lock = new Auth0Lock(
"xxxxxxxxxxxxx",
"xxxxxxxxxx.auth0.com"
);
login = () => {
lock.show();
};
Uncaught ReferenceError: events is not defined at main.js:8 error
Related
I am using #googlemaps/js-api-loader in my Nuxt 3 website. Everything works fine in local development, but when I try to build the project with nuxt generate (no matter if locally or on Vercel) I'm getting following error:
[nuxt] [request error] Named export 'Loader' not found. The requested module 'file:///path/to/website/node_modules/#googlemaps/js-api-loader/dist/index.umd.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:
The important part of loading script looks like this:
import { Loader } from '#googlemaps/js-api-loader';
const loader = new Loader({
apiKey: config.googleMapsApiKey,
version: 'weekly',
});
onMounted(async() => {
await loader
.load()
...
so I tried to import this package differently, e.g.:
import * as gmaps from '#googlemaps/js-api-loader';
const { Loader } = gmaps;
and the previous error disappeared, but now I'm getting
[Vue warn]: Unhandled error during execution of setup function
at <DynamicLocations class="contact__map" locations= [
{
id: 1,
...
[nuxt] [request error] gmaps.Loader is not a constructor
at setup (./.nuxt/prerender/chunks/app/server.mjs:5536:20)
at _sfc_main$t.setup (./.nuxt/prerender/chunks/app/server.mjs:5582:25)
at callWithErrorHandling (./.nuxt/prerender/chunks/renderer.mjs:2654:23)
at setupStatefulComponent (./.nuxt/prerender/chunks/renderer.mjs:9548:30)
at setupComponent (./.nuxt/prerender/chunks/renderer.mjs:9503:12)
at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12068:17)
at Object.ssrRenderComponent (./.nuxt/prerender/chunks/renderer.mjs:12504:12)
at ./.nuxt/prerender/chunks/app/server.mjs:5628:36
at renderComponentSubTree (./.nuxt/prerender/chunks/renderer.mjs:12149:13)
at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12084:16)
I also can't import package by default export. Do you have any ideas what's going on and how can I fix this?
I found a documentation page related to this problem and there is the following information:
If you encounter these errors, the issue is almost certainly with the upstream library. They need to fix their library to support being imported by Node.
Although they provide a solution to get rid of errors by adding the package to build.transpile:
build: {
transpile: ['#googlemaps/js-api-loader'],
},
It worked for me
Hello I am trying to use yoastseo plugin in NextJS, but when i import it i`m getting some strange errors.
Bellow is my code
import { Researcher, Paper } from 'yoastseo';
const paper = new Paper('Text to analyze', {
keyword: 'analyze',
});
const researcher = new Researcher(paper);
below is what i get in the terminal.
import { AnalysisWebWorker, AnalysisWorkerWrapper, createWorker } from "./src/worker";
^^^^^^
SyntaxError: Cannot use import statement outside a module
And that's what I get in the browser window.
Server Error
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22yoastseo%22 (1:0) # Object.yoastseo
> 1 | module.exports = require("yoastseo");
I used the plugin it with create-react-app without any issues. I guess its related to how NextJS is loading the web worker.
Using a JS sdk of Icon a blockchain. Trying to using the SDK API calls and I'm having issues import or require
When I use Import an error is thrown SyntaxError: Cannot use import statement outside a module
When I use require an error is thrown ReferenceError: HttpProvider is not defined
Below is the link to Icon Icx Github
Icon GitHub
const IconService = require('icon-sdk-js');
//import IconService from 'icon-sdk-js';
const provider = new HttpProvider('https://bicon.net.solidwallet.io/api/v3');
const iconService = new IconService(provider);
const totalSupply = iconService.getTotalSupply().execute();
console.log(totalSupply);
In NodeJS you use require to "import" node modules and dependencies to your project
const IconService = require('icon-sdk-js');
Regarding this line const provider = new HttpProvider('https://bicon.net.solidwallet.io/api/v3');
Where are you importing HttpProvider from? HttpProvider is not built in Javascript library.
If it is a node module, you have to do something similar
const HttpProvider = require('HttpProvider'); (in your question you don't specify what HttpProvider is)
I think you might use IconService.HttpProvider('the url'); to use the constructor
When i execute the code belove, this error shows up: Uncaught TypeError: PouchDB.plugin is not a function. If i install the pouchdb package from npm and change the first line accordingly, then the plugin part works but if i want to use a function from pouchdb-authentication i getting a function not found error.
const PouchDB = require('pouchdb-browser');
let auth = require('pouchdb-authentication');
PouchDB.plugin(auth);
The code should execute without errors and the functions from the authentication plugin should work.
use default
for browser or use cdn link
const PouchDB = require('pouchdb-browser').default;
for node
const PouchDB = require('pouchdb').default;
I fixed it with replacing the code this way:
import PouchDB from 'pouchdb';
import auth from 'pouchdb-authentication';
PouchDB.plugin(auth);
Now it works without problems
Polymer 3 uses import to load external Javascript. For example
import {GoogleCharts} from 'google-charts';
However, it seems for this to work, the external library should use exports.
I am trying to use mapbox-gl.js library. This library, installed with:
npm install mapbox-gl
does not seem to export anything.
In HTML5, you can use mapbox-gl as follows:
<script src="node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
<link href="node_modules/mapbox-gl/dist/mapbox-gl.css" rel="stylesheet" />
<script>
const options = {...}
const map = new mapboxgl.Map(options);
</script>
I tried to use 'import' to load mapbox-gl:
import {mapboxgl} from './node_modules/mapbox-gl/dist/mapbox-gl.js';
import mapboxgl from './node_modules/mapbox-gl/dist/mapbox-gl.js';
This doesn't work:
Uncaught SyntaxError: The requested module './node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'mapboxgl'
Uncaught SyntaxError: The requested module './node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'default'
So, then I tried to add the script and css to document.head from inside the module javascript (<script type="module">..</script>):
// load external mapbox-gl.js script
const mapboxgljs = document.createElement('script');
mapboxgljs.setAttribute('src', 'node_modules/mapbox-gl/dist/mapbox-gl.js');
document.head.appendChild(mapboxgljs);
// load external mapbox-gl.css
const mapboxcss = document.createElement('link');
mapboxcss.setAttribute('href', 'node_modules/mapbox-gl/dist/mapbox-gl.css');
mapboxcss.setAttribute('rel', 'stylesheet');
document.head.appendChild(mapboxcss);
This does not seem to work either. If I try to use mapbox as follows:
const map = new mapboxgl.Map(options)
I am getting:
Uncaught ReferenceError: mapboxgl is not defined
Edit:
Commenters #Salketer and #barbsan showed correct import syntax for this kind of library:
import 'node_modules/mapbox-gl/dist/mapbox-gl.js';
or
import * as mapboxgl from 'node_modules/mapbox-gl/dist/mapbox-gl.js';
Both now result in the following error message:
Uncaught TypeError: Cannot set property 'mapboxgl' of undefined
This means the mapbox-gl library now gets loaded and interpreted. However, the mapbox-gl code contains the line:
window.mapboxgl = something;
ES6-module scope does not have access to the browser 'window' object, so the code fails. See also Is there an es6 module-scope equivalent to `window`?.
For now, I am adding the HTML5 <script></script> and <link /> tags (see above) to the index.html of my project. This works, but the idea of components and modules is to load dependencies from inside those components and modules?
You are close.
With your original code to load script:
// load external mapbox-gl.js script
const mapboxgljs = document.createElement('script');
mapboxgljs.setAttribute('src', 'node_modules/mapbox-gl/dist/mapbox-gl.js');
document.head.appendChild(mapboxgljs);
At this moment, if you use the instance provided by the script: const map = new mapboxgl.Map(options)
You will get error: Uncaught ReferenceError: mapboxgl is not defined
Reason: the script isn't loaded yet, so the instance window.mapboxgl is undefined.
Solution: You have to wait until the script finished loading, using event listener. Add this code into your loading script code:
mapboxgljs.addEventListener('load', function() {
// mapboxgl is available here, do whatever you want
const map = new mapboxgl.Map(options)
})
For me the solution was to define the import without mustasch {}:
import mapboxgl from 'mapboxgl'
Just do:
import("node_modules/mapbox-gl/dist/mapbox-gl");
// do my stuff with global dependency
or if import is slower than the code to be execute
import("node_modules/mapbox-gl/dist/mapbox-gl").then(() => {
// do my stuff with global dependency
})