How to properly import THREE js library? - javascript

I installed the three library via npm. In the node_modules directory there is the three folder. But when I wanted to import it using:
import * as THREE from 'three';
it gives the following error:
ReferenceError: regeneratorRuntime is not defined
But when I use;
import * as THREE from 'three/build/three.cjs';
it properly works. Also, the same problem occurs while importing external plugins:
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
How can I fix this?

Three.js uses ES6 async/await, you need to upgrade or configure your babel presets to support async/await.
This may help
Babel 6 regeneratorRuntime is not defined

Make sure that you reference the correct path where your three.module is.
I'd try the following for a script being in the rootForlder/src/theScriptWhereYourImportIs.js:
import * as THREE from '../node_modules/three/build/three.module.js';
If the script is at the same hierarchy level as your node_modules folder then the following should work:
import * as THREE from './node_modules/three/build/three.module.js';
As far as I remember I had to make some trials and figure this out as it was not very clear in the documentation. Any insight will be welcomed.

Related

Cannot Import OrbitControls using Node 12 ES6 Import

I'm Using Node 12 (experimental-modules) and three (npm) and i cant get Imports to work for OrbitControls.js. I have index.js as "script: module".
Neither of these ES6 imports work
I tried copying the OrbitControls.js file out of the js folder (from the root folder of three) and placing it adjacent to index.js then adding
import {OrbitControls} from "./OrbitControls.js"
It did not work i receive the error
Uncaught SyntaxError: The requested module './OrbitControls.js' does
not provide an export named 'OrbitControls'
So I also tried to use the three library
import {OrbitControls} from "/three/examples/jsm/controls/OrbitControls";
returns 404 error, so i tried relative imports
import {OrbitControls} from "../../node_modules/three/examples/jsm/controls/OrbitControls.js";
got the 404 error again.
Ive also tried (something another user reccommended) const OrbitControls = new THREE.OrbitControls but the error seems happen from the ES6 import alone.
I haven't used experimental-modules, but your second example should read
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
without the / before three;
If that doesn't work, you could try copy-pasting the OrbitControls.js source code from here to your own folder.
import { OrbitControls } from "./myFolder/OrbitControls";
If this works, then it might be a problem with your node_modules installation.

How to add a Javascript library to Angular 4 component?

I am trying to figure out how to import JavaScript files ONLY to a specific component.
I put the following code directly into my component:
import "../../vendor/datatables/js/jquery.dataTables.min.js";
import "../../vendor/datatables-plugins/dataTables.bootstrap.min.js";
import "../../vendor/datatables-responsive/dataTables.responsive.js";
But it fires an error saying:
Module not found: Error: Can't resolve 'jquery' in...
Which makes me suspect that the files that depend on jQuery cannot find the jQuery library in this scope.
jQuery itself is put in the angular-cli.json file:
"scripts": [
"./vendor/jquery/jquery.min.js"
],
An alternative is to put all of those 3 external JS files into the angular-cli.json file as well, and it will work, showing the expected result from the user perspective.
But I would like to figure out how to avoid setting the JS globally for those that are used only in a few specific components.
Thanks, please advise.
For example, to import jQuery to your component, you should write:
import * as $ from 'jquery';
Which means "Import all and use as "$" from "jQuery"".
If you downloaded the library by yourself, without npm install, you can try the following (but I'm not sure that it will work):
import * as $ from 'path/to/jquery';

Use "import" with Node library, rather than "require"?

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.

TypeScript import class from another project / module?

I am trying to alter the following build task written in Typescript in the following project:
https://github.com/Microsoft/app-store-vsts-extension/blob/master/Tasks/app-store-promote/app-store-promote.ts
I need an import like the one shown below (or something else that lets me uses the methods in the ios-signing-common module):
import sign = require('ios-signing-common/ios-signing-common');
That import is used in another file in another project:
https://github.com/Microsoft/vsts-tasks/blob/master/Tasks/XamariniOS/xamarinios.ts, however that project is also the same as the ios-signing-common exists in.
https://github.com/Microsoft/vsts-tasks/blob/master/Tasks/Common/ios-signing-common/ios-signing-common.ts
So is it possible to import the ios-signing-common module into the app-store-promote file?
I have tried adding the github path "Microsoft/vsts-tasks" as dependency in package.json, and it downloads it to node_modules, but I still can't resolve the ios-signing-common module.
I hope that any of you can lead me to a solution. :)
I guess I just needed to read up on how module resolving works.
I solved it by adding vsts-tasks as dependency in package.json:
"dependencies": {
"vsts-task-lib": "^0.9.7",
"vsts-tasks": "Microsoft/vsts-tasks"
},
Then I changed the require path to the following:
import sign = require('Agent.Tasks/Tasks/Common/ios-signing-common/ios-signing-common');
And it works!
EDIT - It could compile, but doesn't seem to work when I run it. It fails in the script because it can't find Agent.Tasks/Tasks/Common/ios-signing-common/ios-signing-common.

Why can't I import sprintf-js in TypeScript

I have a TypeScript file into which I'm importing third-party libraries.
import * as _ from 'lodash'; // Works great!
import * as moment from 'moment'; // Works great!
import {vsprintf} from 'sprintf-js'; // Compiler error
As my comments explain, the first two imports work great, but the sprintf-js import does not. I get the following compiler error:
Error TS2307: Cannot find module 'sprintf-js'.
Without a doubt, I have sprintf-js inside of my node_modules folder. I'm not very knowledgeable about node modules. I'm guessing that the sprintf-js libarary does something different than lodash or moment and that TypeScript doesn't like it. How can I make this work?
You will need to add a typing definition for sprintf-js. Depending on your setup - if you have TSD installed and setup with your project, it would be a case of running:
tsd query sprintf-js --action save
otherwise, you can have a read here:
http://definitelytyped.org/
or simply download the typing definition and include it in the project root folder:
https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/sprintf-js/sprintf-js.d.ts

Categories

Resources