How to import a font installed with NPM? - javascript

I have a React project where I installed Roboto font doing 'npm install font-roboto'. I'd like to import that from my main.js file instead of referencing a CDN in index.html.
What would be the best way to achieve this?

Apparently you can import it doing the following in the main.js
import '../node_modules/font-roboto/dist/styles/roboto.min.css';
UPDATE: As noted in the comments, the following also works.
import 'font-roboto/dist/styles/roboto.min.css';

Related

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");
In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs

In nuxtJS, how to import native JS files in a single page

I tried to import my local JS file in the "head" part of the nuxt.config.js file but failed. It is ok to import the "CDN" file in the same location
Installing the package through NPM solved the issue.
On top of cleaning a bit the current codebase.

Javascript ES6 modules name resolution

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.
Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.

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

importing js file in Vue project throws error

I am trying to use this plugin https://www.npmjs.com/package/mobius1-selectr
I did a npm install mobius1-selectr
and imported it in my main.js
import 'mobius1-selectr/dist/selectr.min.css';
import 'mobius1-selectr/dist/selectr.min.js';
but as soon I import I get this exception:
You must supply either a HTMLSelectElement or a CSS3 selector string.
which comes from the source of selectr.
Is the import not to be done this way in webpack / main.js?
What am I doing wrong? Any help is appreciated.
Yes your imports are incorrect. This library uses UMD to export Selectr constructor. You are using Webpack so default import in your case should work:
import Selectr from 'mobius1-selectr'

Categories

Resources