Get syntax error when trying to import amCharts modules - javascript

i am trying to use amcharts through npm, i run the command npm install#amcharts/amcharts4 in the i can see that now in my node modules and in my package.json i have all the modules associated with the amcharts, also my package.json got updated and now inludes this line "#amcharts/amcharts4": "^4.10.22", i have created two files an index.html and a charts.js. At the top of my app.js i added the following lines
import * as am4core from "#amcharts/amcharts4/core";
import * as am4charts from "#amcharts/amcharts4/charts";
import am4themes_animated from "#amcharts/amcharts4/themes/animated";
when i try to include my charts.hs in my index.html with the following script
<script src="charts.js"></script>
i get the same syntax error all the time and i still cant find a way to resolve it
"Uncaught SyntaxError: Cannot use import statement outside a module
"
does anyone have any idea what i am doing wrong? thanks in advance

Related

How to integrate javascript libraries into react?

I have two javascript libraries that I need to integrate into my React app. First I tried this:
import d3 from "https://d3js.org/d3.v4.min.js"
import techan from "http://techanjs.org/techan.min.js"
That produced error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I went to http://teckanjs.org/techan.min.js, copied the code, ran it through a beautifier, and saved it to techan.js, located in the same folder as CandlestickChart.jsx. I changed import to
import techan from "./techan.js"
Then I got similar error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I did the same thing as with the other one and changed the import to:
import d3 from "./d3.v4.js"
Then I got error:
./src/components/CandlestickChart/d3.v4.js Module not found: Can't
resolve './requirejs' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I found requirejs online and did the same thing as the others and added an import to d3.v4.js like this:
import requirejs from "./requirejs";
But still getting the same error. What's the trick to this?
Install it as a local package. Run the following:
npm install d3
Then you'll be able to import it in your JavaScript:
import * as d3 from "d3";
Note the "d3", not the "./d3" - the lack of the ./ indicates that you want to install from a module package, not from a file in the same directory.

ESLint import module not recognized

I've added new module in my React-Native project.
When I use this module, import works nicely, but ESLint show below error :
2:26 error Unable to resolve path to module 'react-native-quick-actions' import/no-unresolved;
I don't understand why I am getting this error ... import works and my module is also present in my node_modules folder.
My import : import QuickActions from 'react-native-quick-actions';
Can anyone help me ?

import js module in js file in vuejs2

I've started a project with the new vue-cli 3.0 and I've added the qwery npm module in node package.json
npm i qwery
and in my-file.js which is at same level as main.js I import it the following way:
import {qwery as $q} from "qwery"
The build goes ok however in the browser $q is undefined and webpack has imported it as qwery__WEBPACK_IMPORTED_MODULE_8__.
Clearly I'm not doing it the right way can somebody give me a hint what I'm doing wrong?
You need to import it like this
import $q from 'qwery';

import js external file in angular 6

Im working in a project in angular and i have to integrate D3JS in it, i used
npm install d3
and its working fine.
i need to use a function inside js file.. i followed some steps to import it, but still get error, here what i did:
I put the js file in the node module.
then i i added the path in angular.json file like this:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/materialize-css/dist/js/materialize.min.js",
"node_modules/d3/labeler.js"
]
and in the import i used this script:
import * as labeler from 'labeler.js';
then i add this declaration:
declare var labeler: any;
and in the end i want to use the function labeler that i developed inside the labeler.js in this way:
d3.labeler()
and i got this error:
[WDS] Warnings while compiling. client:147
./node_modules/labeler.js
4:16-26 "export 'labeler' (imported as 'd3') was not found in 'd3' client:153
./src/app/components/init-map-markers/init-map-markers.component.ts
916:8-18 "export 'labeler' (imported as 'd3') was not found in 'd3'
is there any one have an idea how to do it in the right way? thks
Instead of making the types by hand, you can use the typings built and maintained by the community
https://www.npmjs.com/package/#types/d3 for the latest version
https://www.npmjs.com/package/d3-v4-typings for v4

How can I use babel to transpile web source code and be able to deploy code on a server like the one provided by github?

Hello and thank you for reading me.
I would like to deploy the aplication to GitHub Pages web server.
However, when I try to use the JavaScript it reports:
SyntaxError: import declarations may only appear at top level of a module
So then the Developer Tools reports that the errors are the imports:
import CoreUtils from 'base/core/core.utils';
import LoadersVolume from 'base/loaders/loaders.volume';
import HelpersStack from 'base/helpers/helpers.stack';
import HelpersLut from 'base/helpers/helpers.lut';
import CamerasOrthographic from 'base/cameras/cameras.orthographic';
import ControlsOrthographic from 'base/controls/controls.trackballortho';
I have read that by defult Babel does not delete the imports and transpile the code.
I tried to fix it by myself reading:
ES2015 import doesn't work (even at top-level) in Firefox
SyntaxError: import declarations may only appear at top level of a module
ES2015 module import and export syntax error
Even:
https://github.com/framework7io/Framework7-Vue-Webpack-Template/issues/10
The fact is I have red the answers and some talk about editing the babelrc config file.
Somebody could help me please?
You can not just copy paste uncompiled code to be deployed:
1- Compile the example code:
yarn dist:clean && yarn build:clean && yarn dist:ami && yarn dist:examples
2- In the dist directory, find the example you are interested in
3- Deploy the example
Hope that helps...

Categories