to sum up my circumstances:
I am running everything locally
I am using flask in the backend within a virtual environment
Goal: build a socket connection between Flask Backend and JS Frontend
PROBLEM: the problem is in the Frontend which is based on JS where I can't import the modules I got with npm
I am importing the modules as follows:
import { io } from "socket.io-client"
import { Hands } from "/#mediapipe/hands"
I also tried different import variants such as import * as io from "socket.io-client" and I also tried importing directly files as follows: import {io} from "socket.io-client/dist/socket.io", but all without success as these lead to "not found" errors.
I am sure that I installed them correctly with npm as I can see them in the folder structure, but the es6 imports are throwing an error as follows:
Failed to resolve module specifier "socket.io-client". Relative references must start with either "/", "./", or "../" - To solve this I tried adding slashes to different places like in the html tag where I include the script I tried transforming "type="module"" to "type="/module"" as recommended somewhere online, but without success. Also building direct references in the imports like "./node_modules/socket.io-client" do not work as it states that the file/folder is not found.
The problem must be the usage of the imports as everything works when I use Content Delivery Networks which also lets me assume that the version of the packages is not the problem as the version I get from the CDN is the same, but still the versions I use:
socket.io-client: 4.6.0
#mediapipe/hands: 0.4.1675469240
Flask: 2.2.3
Flask-SocketIO: 5.3.2
npm: 8.19.3
node: 16.19.1
My folder structure is as follows:
venv
main.py
templates
index.html
static
node_modules (includes socket.io-client and #mediapipe/hands)
js
main.js (the js file where the problem occurs)
package.json
I read a few times that the usage of "Webpack" is recommended, but I would like to skip that currently as I am not very familiar with that, so one question would also be: is it necessary to use it?
What can I possibly do wrong or how can I track my problem when it is about the import of es6 modules?
I would appreciate any help. Thanks in advance!
I could solve my problem for the socket.io-client package:
For the socket.io-client I imported a specific file directly although I do not really know why it worked as follows:
import { io } from './node_modules/socket.io-client/dist/socket.io.esm.min.js'
For the mediapipe package I still could not import the module in my js file directly and I am still relying on CDN. I tried the same thing in the same way by using:
import * as Hands from './node_modules/#mediapipe/hands/hands.js'
This, at least, does not result in an error, but the usage of "Hands" in this case is unclear to me as there is also no documentation for this use case in the mediapipe-js documentation. I could not directly import the {Hands} function as it resulted in an error saying "there is no function Hands in that path"
Related
I am testing Google Cloud and first I wanted to develop something on my PC before I use in on google cloud.
I am using APACHE and configured it in that way, that when I am going to the page localhost/wsgi_app I see my page which physically is stored in folder /svc/http/webapp2. File wsgi_app.py which contains my app is stored in subfolder webapp2. All works fine. I provide this information just in case it might play any role.
The issue I have is with import from library.
I did it on Django and now try to move it to webapp2.
The first lines of my program look like this:
import webapp2
import MySQLdb
import json
I have file called test.py which contains some classess and funtions.
it is in the same folder as wsgi_app.py.
I want to include it, however this seems not to work:
import webapp2
import MySQLdb
import json
from test import *
my test.py contains definition of the class 'Quote', but when I call the page I see error
NameError: global name 'Quote' is not defined
When I put the inside of the file test.py in the file wsgi_app.py all works fine.
My goal is to separate the code into several files.
Any idea why :
from test import *
does not work ?
It worked on any other program I wrote, so why not here?
issue solved.
issue is not related to weapp2 but to WSGI and the path where python search for files.
Most simple solution is to add something like this ;
execfile("/srv/http/test.py")
it will import the file.
other than this here is quite good article
http://blog.dscpl.com.au/2014/09/python-module-search-path-and-modwsgi.html
I'm using WebStorm 2017.1.3, although also tried with latest EAP, and i can't get import from statement to work. I just keep getting the following error:
import Utils from './utils'
^^^^^^
SyntaxError: Unexpected token import
In my packages.json i have babel-cli, babel-preset-env and babel-preset-es2015 defined. I have followed various blog posts and videos but still get same error.
ES6 is enabled in settings and i tried adding Babel file watch as per documentation but nothing seems to work. This feels like it should be a lot easier and just work, so i must be missing a important part of the jigsaw.
Does anyone have a working step by step, from fresh project, how to guide in configuring webstorm to work with import ?
Some places say use file watch, others say just to change project configuration interpreter to use babel-node. Other say must use Gulp... very confusing.
Thank you.
fLo
To make things clear: this is not about configuring WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel
The most simple way to make it work is the following:
install babel in your project using npm install --save-dev babel-cli babel-preset-env
create a .babelrc file in project root dir:
{ "presets": ["env"] }
in your Node.js Run configuration, pass -r babel-register to Node:
With this configuration, your code will be transpiled on-the-fly by Babel, no file watchers, etc. are needed
when I want to build my ember electron app with ember electron:package
I always get the error:
Build failed.
File: assets/vendor.js (91129:6)
The Broccoli Plugin: [UglifyWriter] failed with:
followed by several lines of "Error at...:" (always within node_modules)
I could figure out that it must have something to do with ember-browserify.
I am importing this node module in a service.js file:
import Usabilla from 'npm:usabilla-api';
The curious thing is, that with ember electron (like ember serve) everything is fine and I can use the node module without any errors. Issues only occur when I want to package the app to the .dmg and exe files for distribution.
What am I missing ?
Thanks for any help or hints!
Your build is failing on the minification step. Possibly because of the size of one of the packages you're pulling in or because it's already been minified. Minification only happens when you're building for production or packaging which is why you're not seeing the issue when you run locally.
From the EmberCLI docs on minification, where you'll find more on the minifaction step:
the js-files are minified with broccoli-uglify-js in the production-env by default. You can pass custom options to the minifier via the minifyJS:options object in your ember-cli-build
You can exclude specific files/resources that are causing problems:
To exclude assets from dist/assets from being minificated, one can pass options for broccoli-uglify-sourcemap
I just create the demo app in c drive and it's working perfectly.
I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.
If this file is under app/playGame/game.js and my Brocfile is like this:
app.import('app/playGame/game.js')
this gives the error, path or pattern app/playGame/game.js didn't match any files..
but if I put the file under bower_components/playGame/game.js and my Brocfile:
app.import('bower_components/playGame/game.js'), this compiles successfully.
What is the problem and solution here?
There are two parts to this:
Where should I put my file to import it as an asset?
Why isn't putting it in my app-folder working?
The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:
app.import('vendor/playGame/game.js');
This is documented on ember-cli.com, although somewhat hidden.
You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.
This should solve your issue.
Now, why doesn't it work to put it in /app?
app is a special folder. From the documentation:
Contains your Ember application’s code. Javascript files in this
folder are compiled through the ES6 module transpiler and concatenated
into a file called app.js.
This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.
Example:
import myWidget from 'my-app/widgets/my-widget';`
The referenced file is /app/widgets/my-widget.js.
The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.
To sum up:
You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.
So this is a really basic question. In all my blueprinted files, I see import statements such as:
import DS from 'ember-data';
Now I know that the build process is finding these in the vendor directory where bower installed them. Recently, I added moment.js, and I'd like to create a helper using it. However, there must be an additional naming convention that's being used because I can't simply
import moment from 'moment';
-- it claims it cannot find it in the tree merger. What is the right way to tell Broccoli where to find things when I want to import them?
Here is how I got things to work.
Install moment.js using bower install
Add the following line in Brocfile.js
app.import('vendor/moment/min/moment.min.js');
In your code, you do NOT have to import moment as it is NOT a ES6 module. You can call moment directly. For example,
var currDate = moment();
In the files where you use moment, don't forget to add the below comment as the first line of your file. You need to do this to avoid the jshint errors shown by ember-cli when you build the code
/* global moment:true */
Hope this helps!