So I'm trying to build a Vue component using the features found in the Javascript plugin Cropper JS. My app is built using Laravel 5.6. I first pulled in Cropper JS using NPM:
npm install cropperjs
Next, in my resources/assets/js/app.js file, I added the following lines:
import Cropper from 'cropperjs'
Vue.use(Cropper);
Note: You can assume that Vue has already been properly setup in this case.
This compiles fine when I run 'npm run watch', but when I try to visit my web app (which is just displaying Hello World at this point), I see an error in the console which states:
Uncaught TypeError: Cannot call a class as a function
Now, in the past I have imported & used libraries that were pulled in via npm with the exact same commands. However, in those cases, the folder structure was a bit different, perhaps it was optimized for Vue?
Under my node_modules/cropperjs directory, the folder structure is as follows:
/dist
/src
/types
CHANGELOG.md
LICENSE
package.json
README.md
I hope this information is sufficient in troubleshooting the error.
Thank you.
Cropperjs is not a plugin of Vue, you can use vue-cropper or other image cropper,
if you want use cropperjs,you
let image = document.querySelector('XX')
var cropper = new Cropper(image,{options})
Related
First of all I know Laravel is a PHP framework and has nothing to do with the frontend(JavaScript) of my application. BUT laravel provides the possibility of using webpack which if I got things right is for node modules and other javascript stuff..
What I've done so far:
Installed ThreeJS with command:
npm install three
than executed
npm run dev
After that I included the Libary in my app.js file in the resources folder of Laravel like this:
var THREE = require('three');
(I tried including it whitout assinging it to a variable but that seemed not to work so I just did what some google research told me)
Again I ran npm run dev and the Libary was included inside my packed app.js in the public/js/ path of my project. Everything seems to be fine. I included the app.js file inside of my view and also set the script attribute type to module. But now when I try to import threejs via
import * as THREE from 'three';
inside my view it says that the module cannot be found. I know I could just copy the contents of ThreeJS inside the node_modules folder to my public path JS folder but I wanted to keep it as a node module. Any Advise?
I'm feeling like super stupid right now but adding a window.THREE instead of var three fixed the issue somehow.. Thanks for your help and time anyway!
Before you can instantiate Three.Js you have to import the library:
In your resources\js\app.js
import * as THREE from 'three';
const scene = new THREE.Scene();
However, it's recommended to create a instance in the component that actually requires it unless you need it globally.
I am creating a body segmentation app using tensorflow bodypix model. It works fine in the browser. I am using webpack to use its modules(see below)
import * as wasm from "#tensorflow/tfjs-backend-wasm";
import * as tf from "#tensorflow/tfjs-core";
import * as bodyPix from "#tensorflow-models/body-pix";
wasm.setWasmPaths("./wasm/");
tf.setBackend("wasm").then(() => {
//some simple vanilla js code
});
//some more vanilla js code...
It works exactly fine in chrome and giving output as expected after running npx webpack .
However when irun it with electron simply by creating a main electron file it outputs nothing but a blank white screen with the following error in console-
Uncaught TypeError: this.util.TextEncoder is not a constructor
at new <anonymous> (main.js:2)
the line where it is pointing is from a minified codew which looks like this-
...SOME_CODE...&&Me().setPlatform("node",new class{
constructor(){this.util=n(758),this.textEncoder=new this.util.TextEncoder}...SOME_MORE_CODE...
i thought that electron is simply chrome without top bars, but this seems wrong. can someone help me here
i am using following versions-
"nodejs v12.16.3", "electron11.1.1", "tfjs2.8.2"
see the screen shot of chrome and electron-
IN CHROME(click to enlarge)
................................................
IN ELECTRON(click to enlarge)
THE SOLUTION
i previously had
wasm.setWasmPaths("./wasm/");
tf.setBackend("wasm").then(() => {
//some simple vanilla js code
});
in my main code, and i have copied the folder from wasm(dist/) to project's folder.
Deleting the same from my project's folder and changing the code to -
wasm.setWasmPaths("../node_modules/#tensorflow/tfjs-backend-wasm/dist/"); //or start from ./ if your main file is in same folder as node_modules
tf.setBackend("wasm").then(() => {
//...
});
How i recahed here?
at first thanks to #edkeveked for his effort and pointing me to
Error loading TensorflowJS in Electron App (Nodejs)
i got the solution by creating an electron hello world project and then adding tfjs, then tfjs-backend-wasm. the new project is working correctly but however even moving the node_modules from new project to older one is not working for the older. but as soon i changed the wasm path, it worked giving no error.
Update:
now I have encountered the problem several times and everytime it's solved by creating a new folder, first installing electron and creating a simple electron app first, and then installing other dependencies and copying old code in the new folder.(warning: don't copy the node modules folder)
It seems to be a bug in tfjs or electron
Newbie here...need help. I tried using the sample code for ag-grid on a ReactJS component on NextJS. I am getting a loading css error (please see further below).
(Before this, I was able to make the code run using 'create-react-app' "https://www.ag-grid.com/react-getting-started/")
Here's the error message:
appropriate loader needed
I have searched and tried out related (searched-out) answers like adding this on webpack.config.js:
webpack config
and also tried adding this on package.json:
package json
I may be missing out on how to correctly load css on the Next JS setup.
Here's the code..taken mostly from the sample code
In Next.js you configure webpack inside a next.config.js file. There should be no webpack.config.js (at least to my knowledge).
There's a plugin called next-css which you install with: npm install --save #zeit/next-css.
Then, in your next.config.js file, write:
const withCSS = require('#zeit/next-css')
module.exports = withCSS()
The ag-grid example worked for me after doing that.
I'm trying to follow the official Angular docs to set up testing for an Angular project - https://angular.io/guide/testing#service-tests
I've downloaded the sample Angular project from the page above, using the first (top) link. I've done an npm install and when I run ng serve it builds fine.
When I run ng test using the CLI, I get the message:
ERROR in Entry module not found: Error: Cant' resolve 'C:Code\testing\src\test.ts' in 'C:\Code\testing'
ERROR in error TS6053: File 'C:Code\testing\src\test.ts' not found.
I looked at this question - How to resolve test.ts when running ng test?, but in that case the file actually exists, but in the Angular example project it doesn't exist at all.
(When I first ran ng test I originally got a message about Jasmine Marbles being missing, which I resolved using:)
npm install jasmine-marbles --save
The documentation says:
You can fine-tune many options by editing the karma.conf.js and the
test.ts files in the src/ folder.
So I know the test.cs is some kind of configuration file, but how do I generate it? It doesn't exist in the Angular 'live example' project either. And how do I know that a test.cs I generate will work reliably with this project?
I used #joshbaeha's suggestion to ng new a new Angular 5 project and copied the test.ts file, which appears to be completely generic and not reliant on project structure or anything else. Everything is now working. Here it is:
test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '#angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '#angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
I don't know whether you can generate just the test.ts file or not, but as far as i know this file is automatically generated when you create a new angular project using angular-cli. So you can just create a new project using angular-cli then copy the src/test.ts file from that new project
I'm attempting to make use of this library: https://github.com/MagicTheGathering/mtg-sdk-javascript in an Angular2 application.
Unfortunately, I've been going in circles trying to load it into my application.
Firstly, on the TypeScript side if I import it using:
import { } from 'mtgsdk';
there are no types to load into the {}.
If I attempt to load it using something similar to:
import * as mtg from 'mtgsdk'
I'm unable to because it says that it's unable to find a module named mtgsdk.
I've installed the module using
npm install --save mtgsdk
Also, npm installs work fine for other modules.
The application compiles fine if I load it in using require via something similar to this:
var mtg = require('mtgsdk');
Taking that approach, I'm able to compile and launch but in the browser I get a number of errors about modules that it can't find. I figure they are prerequisites for the sdk that didn't get loaded so I start bringing them in via package.json.
For every one that I bring in, I then have to go to systemjs.config.js and add an entry pointing to the module's entry point and often have to specify a default extension using blocks like this:
pointer
'mtgsdk': 'npm:mtgsdk/lib/index.js',
'request-promise': 'npm:request-promise/lib/rp.js',
'ramda': 'npm:ramda/dist/ramda.js',
'emitter20': 'npm:emitter20/index.js',
'bluebird': 'npm:bluebird/js/browser/bluebird.js',
'request': 'npm:request/index.js'
default extension
'request-promise':
{
defaultExtension: 'js'
}
I'm not sure if that's the right approach though because the more dependencies I add, the more that I end up requiring. At one point I had literally gotten up to 50 extra dependencies added because every time I launched, the browser console would find more that were needed.
Is there any easier way to load all of these in?
Also, some of them (such as tough-cookie and request-promise-core) were very problematic to load and I couldn't get the browser console to stop complaining about them. Finally, some of them seemed very basic such as url, http, https. Those seem like they should already be present.
Using systemjs was utilized in the previous versions of Angular 2, However Angular 2 has evolved to Angular 4, with super new features like Angular CLI.
I recommend your use Angular CLI, with #angular/cli.
Importing Node modules
Since mtgsdk is a node-module, you can easily import it using
import * as mtg from 'mtgsdk'
However for your program to compile, you must install a type definition for it. or declare one for it in /typings.json or your app might not build.
Importing Client Scripts
For client scripts like firebase.js you won't need to add client scripts as entries in systemjs.config.js again.
Using #angular/cli, you would easily add them in the scripts[] array in your angular-cli.json for automatic compilation.
Then access them like this
declare const firebase: any;
Here is a quickstart tutorial to set up Angular with #angular/cli.