Develop Reference

How_To_Solve_ReactJS_Problem

Sorry for my bad english and a new learner programming.
I have a single problem with React.JS in App.js,
I have written an exterrnal JS file, called Fundamental.js, the code is the following:
const testing = () => {
console.log('test log 12456');
}
export default testing;
When I import Fundamental.js file into App.js, my VS Code shows a popup message:
'testing' is defined but never used.
how to solve it?
the import list in my React App.js is:
import logo from './Linux_Logo.png';
import './App.css';
import testing from './FundaMental';
Thank you so much to whoever solves my problem!

Welcome to SOF. In your component testing should be Testing [capitalized] and In testing nothing is returned that's why showing this in the terminal. Try this plz:
import React from 'react';
function Testing() {
return (
console.log('test log 12456');
)
}
export default Testing
when importing:
import Testing from './FundaMental';
It is better to keep the same name of the function name and the js file name.

VS Code is saying that you imported a function but you're not using it.
Your testing module defines the function testing. It doesn't execute it.
There are two ways to get rid of the warning:
Call the testing function in App.js, or
Don't import it into App.js.
If testing is the beginning of a React component then follow #Pabel Mahbub's answer, including the suggestion to rename the function Testing and rename the file Testing.js. As your app grows that will make it easier to manage.

This is only a warning/reminder that you import something but you never used it. React has this kind of checking that will warn us of the unusual code that we have. To fix this warning either trigger the function or remove it. Hope this helps!

Import of JavaScript module by assigning to a variable

Maybe this question is trivial, but researching in several import/export docs did not give me an answer. I am trying to understand a code snippet that starts with the following imports on a CodePen example:
const Point = ol.geom.Point;
const RMap = rlayers.RMap;
I would rather expect module imports like this:
import { Point } from "ol/geom";
import { RMap } from "rlayers";
I thought it might be related to some hidden CodePen functionality, but also could not find an explanation. The CodePen is here https://mmomtchev.github.io/rlayers/#/add_delete when you click on the CodePen button. You can see in the JS settings that the CDN https://cdn.jsdelivr.net/npm/rlayers#1.4.1 was added. But I don't see how this would allow
the syntax given above. It did also not work, when I tried on a new CodePen.

In your Pen's settings, go to the JS panel and scroll down to add packages there. You can load in packages from Skypack that way, and they'll appear something like:
import * as React from "https://cdn.skypack.dev/react#17.0.1";
import { useState } from "https://cdn.skypack.dev/react#17.0.1"
(or whatever you want to install)

ES6-Importing method from one file to another gives error

I have an API utils file React JS where i have list of endpoints declared like below-
File1.js-
export const api_endpoints = {
api1: ()=> '../data/user'
}
I want api1() from File1.js in my another file (File2.js) hence i am importing this like below-
import {api_endpoints} from '../File1';
const myObj = {
[api_endpoints.api1()]: '../data/user2'
}
This gives me error in File2 saying-
"cannot read property api1 of undefined"
I am not sure why api_endpoints comes as undefined in File2.js. The paths are correct. Can someone help me understand that.

Looks like you are importing from wrong path. Tried the above example and it is working fine for me..
https://codesandbox.io/s/objective-meninsky-7gbch?file=/src/File2.js

You might have just copied it wrong, but you imported {api1_endpoints}, but are asking for api_endpoints

How can I use all import, modules.export, and export in the same ts file?

I have a typescript file in which there are some functions for validating objects of different classes. So, I have to import those classes into the ts file. For instance,
import { UserDetail } from "../../entity/user/userDetail";
The following block of code depicts a function which is used for validating the objects of the mentioned class.
export function validateSignUpData(userDetail:UserDetail):Array<String>{
let errorMessages = new Array<String>();
/* Some Code */
As you can see the imported class has been used as the function's input type. Now the problem is that it seems we are not allowed to use both import and module.exports simultaneously! Therefore, I am not able to use require in order to get the mentioned function in the Node server file.
When I add the following block of code to my ts file, the following exception is thrown!
module.exports = validateSignUpData;
TypeError: Cannot assign to read only property 'exports' of object '# object'
Question: How can I use all import, modules.export, and export in the same ts file?
I will be glad if someone can help me with the situation.
Thank You

Of course you're able to import that function with require. Just do it like this:
const {validateSignUpData} = require('./my-module.js')
And pay attention to require the compiled javascript file, not the typescript file. They may be in different folders, depending on your build setup.

angular-cli build gives error: leaflet.browser.print "is not a module"

I have an Angular 4.1.1 app that is successfully pulling in leaflet.js to provide maps and map layers etc. I am trying to add a leaflet plugin called browserPrint
I import Leaflet into a Component like this:
import * as L from "leaflet";
import * as browserPrint from "../../../../assets/scripts/leaflet.browser.print.min";
The import statement for Leaflet works great and I can create and display a map.
The error occurs when I try and add the second line for browserPrint.
The angular-cli build throws an error:
ERROR in
/src/app/services/driverLists/driver-lists-map/driverLists.map.component.ts
(8,31): File '/src/assets/scripts/leaflet.browser.print.min.js' is not
a module.
What I have tried:
I added declare var browserPrint: any; to the typings.d.ts
I tried switching the import to:
import "../../../../assets/scripts/leaflet.browser.print.min";
but that just threw tons of errors and broke the maps all together
I tried switching the import to:
import * as BrowserPrint from "../../../../assets/scripts/leaflet.browser.print";
but the error changes to Cannot find module leaflet.browser.print
I have also tried changing the file paths to use the files from the leaflet.browser.print node modules folder. But the same errors are generated.
QUESTION
Can someone help me figure out how to add the leaflet browser print plugin to a leaflet map inside an Angular4+ app?
Thanks in advance.

I saw in the documentation for ngx-leaflet that we should create a ./src/typings.d.ts file and add the below code.
import * as L from 'leaflet';
declare module 'leaflet' {
namespace control {
function browserPrint(options?: any): Control.BrowserPrint;
}
namespace Control {
interface BrowserPrint {
addTo(map: L.Map): any;
}
}
}
It worked for me this way.

I think you want to include the file in the "scripts" array in your angular-cli.json. That should wrap it up in your webpack output, and you won't need to actually import it (as you've said above, that particular file doesn't export anything, so you can't import it anyway).
Documentation here:
https://github.com/angular/angular-cli/wiki/stories-global-scripts