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?
Related
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 have a single .js file that has a lot of export const functions in there. Unfortunately, that file needs to be loaded by the back-end and added directly via an <src> tag. This means I need to transpile it and make it work before importing it. So, there's no yarn add to put it through the transpilation process of my project and, of course, these functions will have to be global.
How can I make this work? I've tried to just simply run it through the Babel REPL but I'm getting Uncaught ReferenceError: exports is not defined no matter the configuration.
How to solve this?
I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)
You either have to use native ES modules or use a bundler like webpack or Rollup
Newbie Node question here.
I'm trying to use the Google Cloud Node client with an existing application (not written by me) that bundles its code with rollup.
I've tried importing the library with require, as per its documentation, as follows:
import REGL from "regl/dist/regl";
import Camera from "./lib/camera";
...
var gcloud = require('google-cloud');
But my application complains (CLARIFICATION: it only starts producing this error when I add the require statement, otherwise the imports work fine):
'import' and 'export' may only appear at the top level
So maybe I need to use import gcloud instead of require, but how? I tried looking at the code in node_modules and doing this instead:
import gcloud from "google-cloud/src/index";
But now I get a bunch of other errors
🚨 Unexpected token
node_modules/google-cloud/node_modules/ent/reversed.json (2:7)
1: {
2: "9": "Tab;",
^
How can I use import instead of require, or alternatively, how can I make require play nicely with import?
import is ES6 syntax. You either must use an experimental flag with nodejs or use babel to compile your js to be ES6 compatible.
EDIT:
Since the problem is with require and not import, i'm updating my answer.
I'm not sure what you're setup is but it's because, i'm guessing, google-cloud isn't written in es6. So you'll have to see if there's an es6 version in the src. If there is you could try (I doubt this will work)
Try:
import * as gcloud from 'google-cloud'
if that doesn't work - try a shimming module like riveted. You'll need webpack to compile this. Since you're using rollup.js, which i'm unfamiliar with you'll need a es5 to es6 compiler for this.
If TypeScript is supposed to be a strict superset of JavaScript (as advertised), then why can't I simply import an external library without having to reference a corresponding d.ts file for it to work? Why can't I just use the plain JavaScript library as is (without type checking)?
It doesn't "require" you to do so. You can use external libs without declarations.
The whole idea behind typescript is to avoid typos and incorrect type handling. If you were to use external modules without any type information then what's the point of typescript?
Lastly, you can avoid the need for declarations by using the following syntax:
const module = require('module');