I am running unit tests on a leaflet app with tape + babel-register using es6 modules and I'm getting
ReferenceError: L is not defined
in leaflet-providers.js when importing leaflet and leaflet-providers in the module I am testing.
testfile.js
import L from 'leaflet';
import { provider } from 'leaflet-providers';
I'm not entirely sure my syntax is correct for importing a leaflet plugin using es6 modules, but it's working for me in the browser, and only not working when I run unit tests through node.
Why is leaflet-providers unable to find L when run through node?
In the browser Leaflet attaches to the window object, Node doesn't have that. In addition, since everything is a module, scope is restricted to the file level. Node does have a global object though that is a pseudo equivalent to window, with some differences.
You'll probably also need something like jsdom to provide a window object for leaflet-providers to interact with.
I use Mocha, but the following gives me no errors and attaches the providers function to L.tileLayer.providers:
script
"mocha": "mocha ./test/index.js -r jsdom-global/register
index.js
global.L = require('leaflet');
require('leaflet-providers');
My jsdom packages are jsdom and jsdom-global
Related
We are developing a project that uses commonjs. When node-fetch is updated to v3.x, jest complains that:
import fetch, { RequestInfo, RequestInit, Response } from 'node-fetch';
SyntaxError: Cannot use import statement outside a module
npm run build succeeds.
If I use node --experimental-vm-modules node_modules/.bin/jest instead of jest, I get:
Must use import to load ES Module
I did some reading, it appears that we need to migrate our project to be an ESM as well. But it does not appear to be easy.
So the question is: when a dependency becomes pure ESM, how do we handle that in our code?
FYI, our project is: https://gitlab.com/tezgraph/tezgraph
es6 modules are supposed to work in coffeescript (see https://coffeescript.org/#modules), but even with an extremely simple project, it doesn't work for me. I:
Created a new directory
Ran 'npm init -y' in it
Added the key "type": "module" in my package.json
Created 2 files: index.coffee and utils.coffee
import {myprint} from 'utils.coffee'
myprint("Hello, World!")
export myprint = (str) ->
console.log(str)
when I try to execute index.coffee (via 'coffee index.coffee' - I've tried both git's bash shell - on Windows and PowerShell), I get the following error message:
(node:1856) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
and later:
SyntaxError: Cannot use import statement outside a module
This is all correct as far as I understand. Coffeescript transpiles the import/export statements correctly, but does not provide an environment to run them.
From the documentation:
Note that the CoffeeScript compiler does not resolve modules; writing an import or export statement in CoffeeScript will produce an import or export statement in the resulting output. It is your responsibility to transpile this ES2015 syntax into code that will work in your target runtimes.
You won't be able to run this code via either coffee or node --require coffeescript/register. I believe you will have to transpile your code and run the resulting JS via node
I have code which I like to use inside nodejs (14.4) and the browser. For this code to work inside nodejs I need named imports like
import {Vector3} from "three;
ES 6 modules in general are working fine with the following changes:
package.json:
"type": "module",
An launching nodejs with --experimental-specifier-resolution=node so I don't have to specify file extensions. But for named imports nodejs still prints out:
SyntaxError: The requested module 'three' is expected to be of type CommonJS, which does not support named exports.
There is a Stackoverflow post suggesting the usage of esm package loader. Unfortunately it has a bug making TypeScript "reflect-metadata" unusable (Issue: https://github.com/standard-things/esm/issues/809) So I can't use that.
TL;DR; How can I enable named ES 6 modules in nodeJs 14.4 without ESM package loader? type: module and launch arg are already set.
This may not be the perfect answer but I solved my problem by switching the code base to Type Script (TS):
For browser, I can configure ts to use es 6 modules
For node, I can configure ts to use node modules
--> Everybody is happy
I'm trying to use the 'gsap' node module, explicitly the tool 'Draggable' of that package together with Meteor (a plain Meteor React app).
The installation via meteor npm install gsap works as expected.
However if i want to use the module in my code as suggested in the docs, the client crashes with multiple consecutive errors; the first is:
Uncaught SyntaxError: Unexpected identifier modules.js:132661
The suggested way to import gsap tools is shown here. The error appears when i try to import a sub-module like so:
import Draggable from 'gsap/Draggable';
I don't quite understand the problem here. With other modules a simple npm install and import x from y just works. With gsap modules that does not seem to be the case.
I'd be grateful for any advice.
Update:
It seems the import of 'gsap' node module is now working!
Thanks for your answers!
I had some issues with Draggable import, as gsap wasn't defined inside of its constructor ("_toArray is not a function"). To make it work you have to register the plugin to gsap (added lines in main.jsx):
import { gsap } from "gsap";
import { Draggable } from 'gsap/Draggable';
gsap.registerPlugin(Draggable);.
The gsap package contains ES6 code. ES6 in the node_modules folder is not compiled by Meteor. Usually when publishing to npm, packages are transpiled into ES5. The editor of gsap should do it.
Two options for you to make this work inside Meteor:
• Option 1: clone the source from github directly somewhere in your Meteor app, like /imports/lib/gsap. Then import as following import Draggable from '/impots/lib/gsap/Draggable';
• Option 2: clone the source from github directly somewhere outside your Meteor app and use npm install /path/to/the/cloned/folder inside your meteor app (see here for reference). Option 2 seems less robust to me when working as a team in the same project or when you will need to deploy your app
I have a new project where I'm using browserify to convert node modules into an sdk that can run inside the browser.
I'm requiring a number of other npm packages like:
var log4js = require('log4js');
That run fine and give me no problems in the browser, however JsSip just will not cooperate. When I do
var JsSIP = require('jssip');
I get
plivowebsdk.js:2 Uncaught Error: Cannot find module '../../package.json'
Looking through the code, it's obvious when it makes this call
var pkg = require('../../package.json');
is where it bombs out. Clearly it cannot find the package.json file, which it uses to pull out version information. I know JsSip is actually built with browersify itself (or used to be) so that it can run in either node or a browser. Is this causing a conflict?
Still sort of new to browserify, is their a configuration option or transformation I can perform to get around this?
Turned out the be browserify errors, re did the build process using the gulp recipes for browersify and works as expected.