One library exports its function in such way:
export {
default,
sitemapBuilder,
routesParser,
pathsFilter,
paramsApplier,
} from './lib';
I would like to import them by single line:
import { Sitemap, routesParser } from 'react-router-sitemap';
But it doesn't work, Sitemap and routesParser are undefined.
From their guide:
import Sitemap from 'react-router-sitemap';
import { routesParser as parseRoutes } from 'react-router-sitemap';
Sitemap is class
routesParser is function
Actual result:
Sitemap loaded ok
parseRoutes is undefined
Try like this to import in single line
import Sitemap, { routesParser } from 'react-router-sitemap';
Import everything like below,
import * as parseRoutes from 'react-router-sitemap';
eg: console.log(parseRoutes.sitemapBuilder());
Or Import something like below,
import { sitemapBuilder, routesParser } from 'react-router-sitemap';
Related
I have been working on a shopping list application in React but have ran into a problem with exporting a regular JavaScript function from a file called webscrape.js into my react App.js I have tried multiple different ways of exporting but I keep getting this error.
Thanks to any help in advance.
Module not found: Can't resolve 'readline' in
'C:\Users\USERNAME\Desktop\Programming-Projects\Counter
App\counter-app\node_modules\puppeteer\lib\cjs\puppeteer\node'
This is the end of my webscrape file where I export a test function
function testExport(){
console.log("Test Export");
}
function testExport2(){
console.log("Test Export 2");
}
export {testExport, testExport2}
This is the start of my App.js where I import and try using the function
import NavBar from "./components/navbar";
import PriceBar from "./components/pricebar";
import "./App.css";
import Counters from "./components/counters";
import fs from 'fs';
import data from "./shoppingData.json";
import {testExport, testExport2} from "./webscrape.js";
//test export
testExport();
You should use export default {testExport, testExport2}.
But, looking throught your errors, seems like the error it's related to puppeter. Do you have puppteer added to your node_modules? Did you make a npm i?
Try:
export const testExport = () => {
console.log("Test Export");
}
export const testExport2 = () => {
console.log("Test Export 2");
}
I am currently importing alot of svg files using the normal import statement like the following.
index.vue
<script>
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
components: {
danalock,
smartlock,
light,
clicker,
battery100,
environmental,
batter25charge,
...
},
I already searching for some workarounds like making a folder in components like components/images/ and made an image.js and put all the import statement there like the following
components/images/images.js
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
danalock,
smartlock,
light,
clicker,
...
}
and tried accessing it in my vue file like the follow but can't find good results
index.vue
<script>
import { danalock, smartlock } from "~/components/images/images.js"
export default {
components: {
danalock,
smartlock,
...
}
the template of my index.vue
<template>
<smartlock />
</template>
throws the following error
Unknown custom element: <smartlock> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Please take a look at the following import statement:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
Is it possible to give an alias to the name of the package that is being imported -- i.e., in this case to #fortawesome/react-fontawesome.
That way I wouldn't have to write out the entire project name each time.
For clarity sake, I'm looking for a final result where I could do something like this:
import { FontAwesomeIcon } from 'fa'
or this
import { FontAwesomeIcon } from '#custom/fa'
With fa (or #custom/fa) is a name that I created that references the actual #fortawesome/react-fontawesome library.
Is this possible? If so, how?
Im assuming you're using webpack. If so you can use the Webpack.resolve functionality. You just need to edit your webpack.config.js and setup like the following:
// webpack.config.js
module.exports = {
//...
resolve: {
alias: {
fa: path.resolve(__dirname, '#fortawesome/react-fontawesome')
}
}
//...
}
Your import would become
import { FontAwesomeIcon } from 'fa'
You could create a file that stores your dependencies in an object. I will call this file dependencies.js.
export default const dependencies = {
FA: '#fortawesome/react-fontawesome',
...
...
}
Then you can import these at the very top of each of your javascript files and use it to import further dependencies.
import dependencies from './dependencies';
import { FontAwesomeIcon } from dependencies.FA
import Quasar, * as All from 'quasar'
import { AddressbarColor } from 'quasar'
eslint catch duplicates import,
how to call AddressbarColor from those import without duplicating?
Import * as All and assign AddressbarColor to a variable using destructuring:
import Quasar, * as All from 'quasar'
const { AddressbarColor } = All
When your function is exported correctly you can get rid of the second Line. For example:
in Quasar.js:
export { AdressbarColor };
in Index.js
import Quasar, * as All from 'quasar';
//to call AdressbarColor use this
All.AdressbarColor();
I am creating a helper class in react. The image below shows my setup:
In my App.js, I have:
import Helpers from './Helpers.js'
I have also tried:
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import {Helpers} from './components/Helpers.js'
import {Helpers} from 'src/components/Helpers.js'
and I have also tried, in my Helpers.js:
export default Helpers
export default Helpers();
However, I receive an error message:
'./Helpers.js' does not contain an export named 'Helpers'.
It seems as though App.js can not find and locate this class. How can I import it, so i can just call the functions, like:
Helpers.helperFunctionHere();
thanks.
Option 1: Export each function individually
In Helpers.js
export function helperFunctionHere() {
console.log("hello there");
}
In App.js
import {helperFunctionHere} from "./Helpers";
render() {
helperFunctionHere();
}
Option 2: Static properties on the class
In Helpers.js
class Helpers {
static helperFunctionHere() {
console.log("hi");
}
}
export default Helpers
In App.js
import Helpers from "./Helpers";
render() {
Helpers.helperFunctionHere();
}
Should be export default Helpers. Am also assuming that your bundler is setup correctly.