I am trying to learn Qt QML with Qt Creator. I want to put my javascript functions into a seperate file and 'import' it into the qml world. Have got the code as below for testing how this works.
Trouble is I get the following error when I run the project in Creator...
> Starting
> /home/dev/docs/projects/Qt/build-XmlModelView-Desktop-Debug/XmlModelView...
> QML debugging is enabled. Only use this in a safe environment.
> QQmlApplicationEngine failed to load component qrc:/main.qml:5 Script
> qrc:/MyFuncs.js unavailable qrc:/MyFuncs.js:-1 File not found
I have watched videos and followed the Qt online docs and looked at others code, but I can't see what is wrong.
I can only guess that some sort of path is not set correctly, but in the docs it says the default path includes the directory that the QML file is in. My .js and .qml files are in the same directory. Also I tried editing the resource file, but that crashed it completely.
I tried moving the .js file to different locations, absolute path in the import statement. My eyeballs are starting to fall out now.
Oddly IT DOES WORK if I use qmlscene to run main.qml
Can anybody help? Here is my code...
main.qml file:
import QtQuick 2.3
import QtQuick.Window 2.2
import "MyFuncs.js" as MyFuncs
Window {
id: window1
visible: true
Rectangle {
id: contentArea
MouseArea {
id: mouseArea1
anchors.fill: parent
onClicked: {
MyFuncs.myfunc();
}
}
}
main.cpp file:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
MyFuncs.js File:
function myfunc() {
console.log("function was called")
}
Thanks for any help. Lost a whole day, just don't know where to go on.
NOTE:
You can probably just add the JavaScript file to the resources--and then when your project hits complexity where you don't want to recompile for each little change you can do what I did here below:
You're loading the file via qrc:/MyFuncs.js which is the file path to the resource. The problem is that the JavaScript file (likely) was not copied or isn't on your path. (It means you need to bundle it) depending on the path of your scene you might have it show up. As an example here I need to copy my JavaScript and QML to the build directory which is just annoying:
Here's an example of my config file for a moderately sized project:
CONFIG += c++11
# Add more folders to ship with the application, here
folder_qml.source = qml
folder_qml.target = /
folder_js.source = js
folder_js.target = /
folder_img.source = img
folder_img.target = /
folder_icon.source = icon
folder_icon.target = /
DEPLOYMENTFOLDERS += folder_qml folder_js folder_img folder_icon
Notice the REALLY weird syntax here: this copies the js, qml, icon, and img folders,to / in the build which you would think dumps those files on the root. Think again! The build directory looks like this:
+ debug
+ icon //I added this explicitly
+ img //I added this explicitly
+ js //I added this explicitly
+ qml //I added this explicitly
+ release
Makefile
Makefile.Debug
Makefile.Release
Now my application can correctly reference the files as they exist on the path. When running inside the IDE (depending on the setup) you might have the files available to you, you might not.
Here's a snippit from my main.qml:
import QtQuick 2.2
import QtQuick.LocalStorage 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.1
import com.lightassistant 1.0
import "qrc:/js/lightassistant.js" as LA;
import "qrc:/js/statics.js" as Statics
To prove a point here:
If I change the qrc:/js/statics.js to qrc:/nope/js/statics.js here's the error:
` qrc:/nope/js/statics.js: File not found`
or
` qrc:/statics.js: File not found`
Now from inside the IDE things should be fine as it runs the executable inside the source code. The problems listed above here are in regards to deployment and there are MANY ways around that. I prefer this so I can run batch commands, you could also use [OS]qtdeploy tools and specify some paths to get around it.
This technique prevents the resource files from being recompiled every time you make a chance which can add HOURS to your workday if you're testing the QML. Copying files is fast and doesn't require bundling the resource file.
I hope this helps, I too, lost a few days to figuring this out a year and half ago.
I'm still not sure why my import needed the file to be in 'Resouces', others I've seen on youtube appeared to work without that. However, the code works now that I have added the .js file to resources by right clicking, not on resources but on the / folder within resources. Why didn't I try that before.
Thanks to both for help.
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'm using Laravel 8 with Laravel-mix so that my JS assets are compiled with webpack.
I have imported gojs successfully by doing this:
npm i gojs
Then adding this to my bootstrap.js:
import * as go from 'gojs';
Then compiling using:
npm run dev
So far so good my app.js now includes the gojs code and I can run basic gojs samples on my pages.
However I cannot figure out how to include any gojs extensions.
I've tried adding an extension to my boostrap.js in all these different ways (separately not all at once):
import DataInspector from 'gojs/extensions/DataInspector.js';
import * as Inspector from 'gojs/extensions/DataInspector.js';
import { DataInspector } from 'gojs/extensionsTS/DataInspector';
require('gojs/extensions/DataInspector.js');
require('../../node_modules/gojs/extensions/DataInspector.js');
Most compile without error and when I check my app.js compiled javascript the DataInspector code appears to be included.
However when I add a sample script to my page that uses the Inspect I get error:
Uncaught ReferenceError: Inspector is not defined
So it appears the DataInspector extension has not been included. The only way I can get it to work is to directly add a script tag to the DataInspector.js file in my HTML. However I'd like to figure out how to properly import it with all my other assets.
It's best to copy extension files into your own directory to use them. They are provided as examples of how to extend the library, and should not be imported directly.
If you look at extension code, you'll see it carries this warning:
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
In a react application .i have the following file : (I am using VSCode)
#example .js
export default helloWorld =()=>{
return "Hello World" ;
Is there a way , i can look for all the .js files which imports this file ?.
I understand different files can have this function by the same name .
So is there a way we can look which files have used something like :
import helloWorld from "somevariablePath/example.js"
try show all references or find all ref
I had the same problem recently, and realized theres not a perfect solution for this. The CommonJS modules aren't well-suited for static analysis.
Anyway, I found useful following tools:
JetBrains Webstorm IDE (Premium)
The feature Find Usages from this IDE is the most accurate tool I found. But its a paid IDE. (You have a 30 days trial period)
VSCode
The feature Find all references is not as accurate as previous one, but still useful.
Well i figured out an easy way to do that in the VSCode.
If i just use the absolute path (the absolute path can of course be shortened by using NODE_PATH environment variable in the .env file) of the file which i want to track(see whereever it is imported) .
I can just copy the path , do a Ctrl+Shift+F ,paste the path in the search bar and press Enter(Pressing Enter is important).
This will give all the files where that particular line of code ,in this case , import helloWorld from "absolutePath/example.js,is used
checkout dynamic import feature of webpack if fits yours requirement .
Dynamic import
or iterate using the file system(fs module) and load the file based on your condition
In the context of a Node.js / Express / Angular2 / typescript (IDE=Visual Studio) app, I am trying to load a third party .js utility (packery) onto the client side (for use in a directive). Someone made typescript definitions for it. The d.ts file looks like:
declare module "packery" {
interface PackeryOptions { stuff... }
class Packery { stuff .... }
export = Packery;
}
I refer to this d.ts file, tell the browser where the .js packery script lives, and then import the module as such:
import Packery = require('packery');
This compiles without complaint. However, upon running, the browser attempts (and fails) to find "packery" at http://localhost/packery as opposed to knowing packery is an imported library. This is in contrast to the other import statements I have made on the client such as:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
which work - as far as I can tell the only two pieces of information I gave it for those were also a d.ts file and the location of the .js file, just like packery. But, I must be missing something. Have tried many combinations of file locations and linking and can't get it to work. How can I get the proper linking to "packery"?
Thanks!
I found a workaround for this and thought I'd post in case it helps anyone, although I am still having difficulty with the setup posed in the original question, that is, getting statements of the type:
import foo = require('foo')
to run on the CLIENT side. These work for me in node.js on the server, but on the client, for third party libraries that have been loaded via a script tag, I cannot get it to work, even if I add mapping entries to the system.js config file, irrespective of if I point to a .js file or a d.ts file.
Anyway, what does work is if you load the library using the script tag, then in your IDE put a reference path as such at the top of the CLIENT side code
/// <reference path="foo.d.ts" />
and ensure that your d.ts file does not declare a module/namespace but rather exports methods etc. directly. This lets the IDE compile without complaint, and the client side code is able to access the third party library.
However, I'm not sure if it is preferable / best practices to do what I did or if one should be configuring System.js somehow.
Typings are empty definitions of js libraries that aren't written in a typed language. They are only useful in development for IDEs hints and stuff, in your app, you'll still use the library as you normally would, adding the js file in your index.html or w/e you load your js files from.
I have the following project structure:
root
src
scripts
main.js
foo.js
Inside of my main.js file, I'm importing foo.js like so:
import 'src/scripts/foo.js'
When I click on the import statement above and go to Navigate -> Declaration I get a super helpful message that says Cannot find declaration to go.
This makes it super frustrating to work with because the editor basically has no idea which files import other files. This means I can't use the helpful features of the IDE like search for references when moving a file, find usages, etc
If I change the import statement to be relative, it works altogether:
import './foo.js'
However, we are striving for absolute imports, a habit we picked up from writing python apps.
I came across Webstorm: "Cannot Resolve Directory" and that gave me the idea to mark my src directory as a Sources Root. After doing that, I could change my import statement in main.js to
import '/scripts/foo.js' //notice the leading forward slash
Well, that's a little better because now I can at least Navigate -> Declaration but it's not ideal because now I can't mark any of the directories underneath src as a test, resource, etc.
So why is IntelliJ/webstorm making this so difficult to do?
Because now I can't mark any of the directories underneath src as a test, resource, etc.
Yes, you can. It is not possible to mark subfolders of already marked folders in the Project View. But you can do this in Project Structure (Ctrl + Shift + Alt + S). Go to Modules, select your module and switch to the Sources tab. Now you can mark your src folder as Sources (which you already did) and mark src/test as Tests etc.
According to the Web Help, in WebStorm this setting is hidden in Settings > Directories instead of the Project Structure.
Here's another solution using only the Project View: unmark your source folder, mark your test/resource subfolders and then mark the (parent) source folder again. I'm not sure, why it doesn't work the other way around.
I would very much suggest against using this style of import in JavaScript code. While potentially workable, relative paths are the defacto standard in all NodeJS code, and that has spread to essentially all JS code that uses module systems.
In current systems, any path starting with . is relative, any path starting with / is absolute, and any other path is resolved to a module. By that logic, import 'src/scripts/foo.js' would be parsed as ./scripts/foo.js relative to a dependency module called src.
Note also that the file extension is optional and commonly left off.
If you want to use this style and your module loader supports it, you are of course free to do so, but I want to stress that you are likely bringing pain upon yourself by using a non-standard approach.