I'm using Webstorm IDE and have created a create-react-app. I installed pondjs using:
npm install pondjs --save
it got installed and that's why I can see it in node-modules.
But in my App.js when I'm trying to import it using :
import { TimeSeries, TimeRange } from "pondjs";
this package is not recognised. Please help. I'm trying to solve this since long.
Use require instead of import.
const { TimeSeries, TimeRange } = require('pondjs');
Not sure why but installing the alpha version of pond.js fixed the issue in my case.
yarn install pondjs#1.0.0-alpha.0
Importing pond.js in the project:
import { timeSeries } from "pondjs";
Related
I'm scratching my head because I ran npm i swiper and read through the Swiper Vue docs and it says to import { Swiper, SwiperSlide } from 'swiper/vue which I've done and I even get the bundle size showing 95.4K (gzipped: 28.9K).
When I run npm run serve I then get this error
This dependency was not found:
* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js
To install it, you can run: npm install --save swiper/vue
I for the life of me cannot figure out how to import that dependency.
This worked for me, using Vue ^3.0.0 and Swiper ^8.0.6
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper-bundle.css";
If you're using the swiper version 7* then you could face this type of issue.
Github issue 4871
Try downgrading to the v6.7.5 , see if that helps.
Related issue
I created Electron simple project using create-react-app. I'd like to use react-table component but I have a problem importing its css. Before that I added react-bootstrap to the project.
There's really not much code beside:
npx create-react-app my-app - Created project
npm install react-bootstrap - Added bootstrap
npm install react-table - Installed react-table
I added this to the App component:
import { useTable, useSortBy } from "react-table";
import "react-table/react-table.css";
... and I'm getting this error in the browser:
./src/components/App/App.jsx Module not found: Can't resolve
'react-table/react-table.css' in
'/Users/foo/Projects/test-project/src/components/App'
It's just a css file, that I'm having problem with. import { useTable, useSortBy } from "react-table"; works good alone.
Am I missing something? This is the way I usually install npm libraries.
I installed ng-select2 package. And I'm getting this error and code is not able to complie after 'ng serve'.
node version is 8.10.0
npm version 6.0.0
List item
OS Windows 7
ERROR in d:/PATH-TO-PROJECT-FOLDER/node_modules/#types/select2/index.d.ts (233,49): 'JQuery' only refers to a type, but is being used as a namespace here.
ERROR in D:/PATH-TO-PROJECT-FOLDER/node_modules/ng-select2/ng-select2/ng-select2.component.ts (188,18): Cannot find name 'Select2Options'.
ERROR in /src/app/pages/dashboard/dashboard.component.ts (91,19): Cannot find name 'Select2Options'.
// Dashboard component ts(91, 19) error + I've also added import to it:
public options: Select2Options;
Solutions I tried are:
As per documentation, added import and also imported in #NgModule to app.module.ts
I've jquery#3.2.1 and #types/jquery#2.0.41 installed as well.
npm cache verify, then npm cache clean --force and updated npm
deleted package-lock.json and then ran npm install
But this doesn't seem to work.
As stated in the github issue:
The interface Select2Options is removed/renamed to Options in the latest version 4.0.45
To resolve this issue, I simply downgrade the package to 4.0.44 by running
npm install # types/select2#4.0.44 --save and this worked for me.
https://github.com/NejcZdovc/ng2-select2/issues/124
I had a similar problem. I installed according to the selected2 documentation. Unfortunately, an error appeared
Error: src/app/app.module.ts:6:33 - error TS2307: Cannot find module './select2' or its corresponding type declarations.
6 import { NgSelect2Module } from './select2';
Although it was in the Initial Chunk Files
Initial Chunk Files | Names
select2.js | select2
I tried your solution but the compiler said it is not a module.
Error: src/app/app.module.ts:6:33 - error TS2306: File 'C:/Users/admin/Documents/WorkspaceAngular/medical-v0.9/node_modules/#types/select2/index.d.ts' is not a module.
6 import { NgSelect2Module } from '#types/select2',
So I installed componenet
npm i ng-select2-component --save
https://www.npmjs.com/package/ng-select2-component
It worked ;-)
I was using Material UI with React in my project, and I had some troubles when it came to import the material icons. My code is copied from the Material UI (version:"material-ui": "^1.0.0-beta.41",
"material-ui-icons": "^1.0.0-beta.36",)
docs ,just like this:
import SkipPreviousIcon from '#material-ui/icons/SkipPrevious';
import PlayArrowIcon from '#material-ui/icons/PlayArrow';
import SkipNextIcon from '#material-ui/icons/SkipNext';
And I have also run npm install material-icons.
The error in my Chrome console is:
./src/index/musicCard.js Module not found: Can't resolve
'#material-ui/icons/PlayArrow' in
'C:\Users\wenji\Desktop\myblog\src\index'
And I tried this one:
import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';
And this one:
import SkipPreviousIcon from '#material-ui-icons/SkipPrevious';
But it does not make any difference. How can I fix it?
Icons are not part of material-ui/core, so it must be installed using two commands.
If you are using npm:
npm install #material-ui/core
npm install #material-ui/icons
If you are using Yarn:
yarn add #material-ui/core
yarn add #material-ui/icons
The icons module should be added to dependencies.
Use npm
npm install #material-ui/icons
Or use Yarn
yarn add #material-ui/icons
For the latest versions you need
npm install #mui/icons-material
Since Material-UI is now MUI.
And if we need a specific icon, we can get like,
import SkipPreviousIcon from '#mui/icons-material/SkipPrevious';
And here are all available icons.
I just solved a strange (but not so strange after I found out why) issue.
On Mac, it worked, but when I deployed to Linux, it failed and could not find the icon.
This was because on Mac it was not case sensitive and on Linux was.
So
import DeleteForEver from '#material-ui/icons/DeleteForEver'
works on Mac, but it fails on Linux.
The file is actually named like "DeleteForever".
So the correct way to import is:
import DeleteForever from '#material-ui/icons/DeleteForever'
Change the import path from #mui/icons-material/ to #material-ui/icons/
This is not a 100% working solution, as there have been icons I have yet to be able to import (e.g. ConnectWithoutContact)
Regardless, this change has saved me several times so here is an example:
// Initial
import PermContactCalendarIcon from '#mui/icons-material/PermContactCalendar';
// Fixed
import PermContactCalendarIcon from '#material-ui/icons/PermContactCalendar';
Material UI doesn't provide icons from "#material-ui/icons" any more. Instead, you need to import icons from "#mui/icons-material". So, if you are using the latest version and running your project with npm, you need to execute the following command:
npm install #mui/icons-material
If you use Yarn, then run the following:
yarn add #material-ui/icons
Now you are all set to use your Material icon ExampleMaterialIcon like this:
import ExampleMaterialIcon from '#mui/icons-material/ExampleMaterialIcon';
Dependencies:
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.3",
Example:
import FavoriteIcon from "#material-ui/icons/Favorite";
import ShareIcon from "#material-ui/icons/Share";
<FavoriteIcon
fontSize="large"
style={{ fill: "red", stroke: "red" }}
/>
<ShareIcon fontSize="large" />
I am building a React Native application.
I have tried using the following as an npm package in my application: https://github.com/MagicTheGathering/mtg-sdk-javascript/
I try to import the package into one of my files using: import { card } from 'mtgsdk'; and many other variations of import statements but none have worked.
I get the error:
TransformError: /myproject/node_modules/mtgsdk/lib/index.js: Couldn't find preset "es2015" relative to directory /myproject/node_modules_mtgsdk
What is the right way to import this package into my project? What knowledge is it that I lack about imports in javascript?
Your babel doesn't know what exactly plugins you're going to use.
So you should add .babelrc file to the root of your project with next configuration:
{
presets: ["es2015"]
}
Oh, and dont forget about
npm install babel-preset-es2015 --save-dev
I hope it'll help