How to install react-table into Electron (with React) project? - javascript

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.

Related

cannot import files from #shopify/polaris installed from github by tag

Installed source of shopify/polaris package from github using command
yarn add git+https://github.com/Shopify/polaris#6.4.0
and when I import files from package i get errors
import "#shopify/polaris/src/styles/_common.scss";
import { Button } from "#shopify/polaris/src/components/Button/Button";
error message: can't resolve "#shopify/polaris/src/components/Button/Button"
anyone has errors like this or how to install source of library and compile it ?

This dependency was not found: *swiper/vue how to fix?

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

How to use i18next as a peer dependency for my component library?

I am building a React component library which contains some translations, but I want these translations to be provided by the user of my package.
The reason for this is that these translations should be customizable, and I don't want to include every possible language in this package.
So what I'd like to achieve is to use useTranslations inside my component library like this:
import React from 'react';
import { useTranslation } from 'react-i18next';
const MyComponent = () => {
const { t } = useTranslation();
return <div>{t('helloWorld')}</div>;
};
And somehow the 'helloWorld' translations should be configurable by the user of the library.
Is there any way to achieve this?

Apparently this was caused by yarn link using two versions of react-i18next.
To solve this I've configured my app to use the react-i18next version of my package:
cd my-package/node_modules/react-i18next
yarn link
cd my-app
yarn link react-i18next
Now my package uses the i18next instance configured in my app.

How can I import Material UI icons?i met some problems using Material ui icons

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" />

pondjs not recognised after installing

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";

Categories

Resources