How to import JavaScript files (fabric.js) in a vaadin Application - javascript

I'm working on a Vaadin application which is using spring boot.
I want to use the fabric.js framework, but have not managed to import the files without running into Errors yet.
When trying to use the #JavaScript Annotation, I run into following Error:
[v-server-output] c.v.b.devserver.DevServerOutputTracker : ERROR in ./fabric.min.js
[v-server-output] c.v.b.devserver.DevServerOutputTracker : Module not found: Error: Can't resolve 'jsdom' in 'C:\entwicklung\grw2_new\app-and-run\applications\grw\grw-desktop\frontend'
After trying it with a npm installation(https://vaadin.com/directory/component/niiyeboahfabric-canvas), I ran into a similar Error:
[ERROR] ERROR in ../node_modules/tunnel-agent/index.js
[ERROR] Module not found: Error: Can't resolve 'net' in '/.../node_modules/tunnel-agent'
...
[ERROR] # ../node_modules/jsdom/lib/api.js
[ERROR] # ./fabric.min.js
To avoid the jsdom Error I tried to import the file in a onAttach Method using UI.getCurrent().getPage().addJavaScript("frontend/fabric.min.js");
But Vaadin does not manage to find the specified file, whether I put them in the frontend folder of my project or in META-INF/resources/frontend.

Related

Next.js doesn't load jsx

I have been searching about Next.js, the javascript framework of the moment, and I want to begin to practice. The problem is: it doesn't run in my computer by any means.
The natural form on creating a next project is with the command line:
npx create-next-app
or
yarn create next-app
The result is a template project with a file structure and a few scripts to run the server. The most basic script runs the server in development mode:
npm run dev
or
yarn dev
The result in terminal is the warning:
$ yarn dev
yarn run v1.22.5
$ next dev
(node:5348) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution
of the package at C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
> return <Component {...pageProps} />
| }
|
And when I enter the website in localhost:3000, the page on browser shows:
Internal Server Error
After making the http requisition from the browser, the terminal shows the following message:
event - build page: /next/dist/pages/_error
wait - compiling...
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
> return <Component {...pageProps} />
| }
|
Error: Cannot find module 'C:\Users\maths\Meus Documentos\codigos\node\my-app\.next\server\pages-manifest.json'
Require stack:
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\lib\start-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\cli\next-dev.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\bin\next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at getPagePath (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
657)
at requirePage (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
1062)
at loadComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-compo
nents.js:1:807)
at DevServer.findPageComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\ser
ver\next-server.js:74:296)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\serv
er\next-server.js:126:120)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next-dev-
server.js:34:974)
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async DevServer.render (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\ne
xt-server.js:72:236)
at async Object.fn (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-serv
er.js:56:618)
at async Router.execute (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\rout
er.js:23:67)
at async DevServer.run (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-
server.js:66:1042)
at async DevServer.handleRequest (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\se
rver\next-server.js:34:1081) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\require.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\load-components.
js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\next.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\lib\\start-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\cli\\next-dev.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\bin\\next'
]
}
I have tried several things to fix it, create the next project without the script from npx and yarn (by manually installing the dependencies), update versions of node and npm, etc. It seems that the program can't load the jsx, the first error points to the moment when the first jsx component appear in the code. The message says that webpack isn't configured with a valid loader to this code.
Environment:
Win 10
npm v7.3.0
node v15.5.0
next v10.0.4
react v17.0.1
react-dom v17.0.1
Downgrade your version of Nodejs to 14 or 12 Node version 15 will break your environment. If you want to still want to use 15 get node version switcher and switch the version based on the projects your working on.

Error loading model.json Tensorflow.js, IOHandler provided does not have the `load` method implemented

I'm getting the following error when I try to load my trainned model on my web app, the json is reached from the path properly (I've tryed to print with console.log and it's OK), seems that the problem is when tf.loadLayers try to load it...
Vue App Code
import * as tf from '#tensorflow/tfjs';
export default {
data(){
return {
modelJSON: require('../model/jsmodel/model.json'),
}
},
mounted(){
this.loadModel();
},
methods: {
async loadModel(){
this.model = await tf.loadLayersModel(this.modelJSON)
},
...
Error
models.js?411e:207 Uncaught (in promise) Error: Cannot proceed with model loading because the IOHandler provided does not have the `load` method implemented.
at loadLayersModelFromIOHandler (models.js?411e:207)
at loadLayersModelInternal (models.js?411e:190)
at Module.loadLayersModel (exports.js?79b0:220)
at _callee$ (SingleTweet.vue?b47c:40)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:293)
at Generator.eval [as next] (runtime.js?96cf:118)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
I checked the source code and it looks that the proper handler from static files manifesto json of the model imported with ES6 or CommonJS isn't implemented, so as a workaround it worked for me over http, you can place your model to a storage or start local server and disable CORS in a browser for the page where you open your app. I think the issue can be opened on github project.
Install http server, e.g.
npm install http-server -g
Launch your dev server
npm run dev
Launch server to serve files from the models folder
http-server
Change this.modelJSON to path to JSON file, in my case
const modelJSON = 'http://127.0.0.1:8087/model.json'
Disable CORS to allow cross-domain requests, there is a plugin to do it.
The model can be placed e.g. to CloudStorage or to any other server with statics.

Angular Meteor app works in localhost but fails when deployed to server

An Angular Meteor app using angular-with-blaze package works well on localhost but when deployed to a server using mup and mupx, the site loads partially and throw the following error in the browser JS console:
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: e
Thinking this is due to minification of the JS files, I tried the following setting for mupx but it did not help.
"buildOptions": {
// build with the debug mode on
"debug": true
}
Any suggestions on troubleshooting this issue?
Try to use gulp task 'gulp-ng-annotate' if you are using gulp or grunt-ng-annotate respectively. It will add required annotations to dependencies in your modules according to angular Dependency Annotation.

Ember 2.0 upgrade errors: Unexpected strict mode reserved word & handlebars precompile error

I'm trying to upgrade an ember-rails app from ember v1.13 to v2.0. The app loads and templates render in ember 1.13 and there are no deprecations coming through to the console. When I bump the version to 2.0.0 (through the ember-source gem), the app doesn't seem to load and no templates are rendered. Instead, this error is in the JS console:
Uncaught Error: ExecJS::RuntimeError: SyntaxError: Unexpected strict mode reserved word
If I refresh the page, suddenly I'm hit with a handlebars precompile error:
Uncaught Error: Barber::PrecompilerError: Pre compilation failed for:
(prints out file contents)
Compiler said: ReferenceError: Handlebars is not defined
Any thoughts on what could be the cause of this? Any input would be greatly appreciated, as I've been stuck on this for hours!!!

"Error: cannot find symbols" when compiling titanium module application

I've created a titanium module and embed it on titanium module application, but every time I compile that application it will give me an error:
[INFO] Compiling Javascript Resources ...
[ERROR] Application Installer abnormal process termination. Process exit value was 1
[ERROR] Error(s) compiling generated Java code
[ERROR] C:\DeveloperFolder\TitaniumStudioWorkspace\TestingModuleApp\build\android\gen\testing\module\app\TestingmoduleappApplication.java:42: cannot find symbol
symbol : class TestingmoduleBootstrap
location: package testing.module
runtime.addExternalModule("testing.module", testing.module.TestingmoduleBootstrap.class);
^
1 error
Does anyone know how to solve that?
Try to delete TestingmoduleBootstrap.class and then recompile again:
http://www.coderanch.com/t/402221/java/java/Compiler-Error-find-symbol
And make sure you don't have a typo in your class name:
http://java.about.com/od/cerrmsg/g/Definition-Cannot-Find-Symbol.htm

Categories