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.
Related
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
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 ?
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';
I installed D3, and d3-force-attract
npm install #types/d3 -S
npm install -S d3-force-attract
Trying to figure out how import d3 force attract in as it is not a typescript module, but d3 is.
This is wrong
import * as d3 from 'd3';
import * as d3 from 'd3-force-attract';
Gives the following errors
src/Program.ts(4,13): error TS2300: Duplicate identifier 'd3'.
src/Program.ts(4,22): error TS7016: Could not find a declaration file for module 'd3-force-attract'. '/.../node_modules/d3-force-attract/dist/d3-force-attract.js' implicitly has an 'any' type.
The problem here is:
import * as d3 from 'd3';//all modules will be in d3
the above line is fine,but line below you store all the modules from d3-force-attract into d3 which is wrong(you have assigned it above)
import * as d3 from 'd3-force-attract';
Instead do:
import * as d3 from 'd3';
import * as d3force from 'd3-force-attract';//give it someother name like d3force.
On another note
I would suggest you not to import the full module, but selectively import the module you wish.
example:
import { forceAttract } from 'd3-force-attract'
This only imports forceAttract from 'd3-force-attract' so if you building via webpack, it shall import only forceAttract into the minified build.
Have you tried the types d3-force?
npm install --save #types/d3-force
I looked at this and that link. I bower installed file-saver and Blob. I am having a similar problem with both components so I will just talk about one.
When I do import FileSaver from 'file-saver';
I get the following error.
Error while processing route: some.route Could not find module `file-saver` imported from `client/pods/some/folder/controller` Error: Could not find module `file-saver` imported from `client/pods/some/folder/controller`
I know the I have file-save because it is in my bower_components folder.
And right about the line that is giving me trouble is the following line.
import Ember from 'ember';
that package is about the file-saver package in my bower_components folder. And the app seems to find that package.
Bower assets have to be imported in Brocfile.js, see http://www.ember-cli.com/#managing-dependencies
In my project, filesaver is located at bower_components/FileSaver.js/FileSaver.js, so I have the following line in my Brocfile.js:
app.import('bower_components/FileSaver.js/FileSaver.js');
This makes it available as a global on window.saveAs, no need to use an import statement in the file you use it in.