I've been trying to import and use #amplify/ui-react componetns inside a svelte kit file.
However, when I import the components i get the error:
"Cannot use import statement outside a module"
My code is shown below, and the error only occurs while the import {authenticator} line is present. Meaning its unique to ui-react components.
I've tried messing around with files and extensions, aswell as differnet component versions but I can't seem to shake this error. Any help with this would be greatly appreciated.
Code
error
Related
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"
If I am correct DefinitelyTyped has TypeScript definitions for multiple libraries. In my case I wanted to use Google Charts definitions available here.
I have installed them using
npm install --save-dev #types/node
npm install --save-dev #types/google-apps-script
But I don't know how to import them to my project. I have tried using
import { Google } from '#types/google-apps-script';
But Visual Studio Code throws an error, that it is not a module and my declare const google is still of :any, which I want to avoid.
Any help or hint would be appreciated.
To get Google Charts to work in my Angular 5 project I used these DefinitelyTyped types instead which is only for the Google Charts JavaScript library.
#types/google.visualization
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/google.visualization
Here is how I imported the types into an #Injectable Service class. This statement did not raise an error about it not being a module like when I tried to import using *.
import { } from 'google.visualization';
In the constructor is where you can load the charts library just once and then create your chart functions to pass with data and config options to the callback (setOnLoadCallback).
google.charts.load('current', {'packages':['corechart']});
I added a script element to index.html to load the 'https://www.gstatic.com/charts/loader.js' but perhaps there is a better way to include external libraries such as this.
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
I'm following the instructions in the Coinbase API guide Coinbase Guide The first line of the code is to simply load the Coinbase library:
from coinbase.wallet.client import Client
I'm using IDLE as the IDE. If I work on a file with no extension (e.g. simply called 'coinbase') then the examples in the guide work fine.
If I work on a file with the standard Python extension (e.g. 'coinbase.py') it does not load the Coinbase library and errors out! The error message is:
ImportError: No module named wallet.client
I think this may not necessarily Coinbase related, and perhaps I'm doing something fundamentally wrong. Answers appreciated.
Remember that all python files are seen by python as modules.
So when you write a script called coinbase.py, python will see it as a module and let you import it with import coinbase. Doing so you are shadowing the real coinbase module that you meant to import, hence the error.
To fix the problem simply avoid calling your files with existing module names (unless of course you intend to shadow them).
So, I'm creating an app in QML, and have created a custom component. To be better organized, I am placing all of my custom components in a "com" subdirectory. I did some research, and found that I needed QML_IMPORT_PATH and a custom qmldir file to create a module so I could import my controls into my project.
My components path is E:/Qt Projects/MyApp/qml/MyApp/com
Inside, I created a qmldir.txt file containing the following:
Button 1.0 Button.qml
Where "Button.qml" is the name of my custom component (in the same directory).
//Button.qml
import QtQuick 1.1
Rectangle {
width: 100
height: 50
}
Next I went to "MyApp.Pro" and appended the following:
QML_IMPORT_PATH = E:/Qt Projects
Finally, I went to MyApp.qml and added:
import MyApp.qml.MyApp.com 1.0
Yet, I am still getting a "module not found" error on that line. When it shows the error during mouseover, it displays a list of the current import paths, and E:/Qt Projects wasn't one of them. I've cleaned, rebuilt my project, ran qmake and everything. Still not working. Is my syntax wrong? Why won't it find my module? I'm a Qt newbie so forgive me if this is a stupid question. Any help is appreciated. Thanks in advance.