I am trying to use moment-precise-range-plugin to find the difference between the two dates. So, I tried importing packages likes this in React
import moment from "moment";
import "moment-precise-range";
And then, I tried to use this in my code
console.log(moment.preciseDiff(endDate, startDate, true));
I am getting this error
Uncaught TypeError: moment__WEBPACK_IMPORTED_MODULE_0___default(...).preciseDiff is not a function
I definitely understand the problem is with the import only. How do I import it correctly?
References :
moment-precise-range-plugin npm
Moment.js precise-range plugin
From the DOCS:
To use the plugin within a node.js application, add the following require statement into your code:
require('moment-precise-range-plugin');
Or:
import 'moment-precise-range-plugin';
The problem here is that you are missing the string '-plugin' in the import statemnt...
Related
Trying to use the sample given here: Link
The easeOutQuad documentation, in Reactjs
When I try to load the page I get error:
Uncaught ReferenceError: helpers is not defined
I assume this is because helpers has not been imported in the file. I am trying to figure out how to import it, but can't seem to find a way to do it.
Here is the code:
# I made this import
import Chart from 'chart.js/auto';
let easing = helpers.easingEffects.easeOutQuad;
# this line is causing the error
# Tried converting this to:
let easing = Chart.helpers.easingEffects.easeOutQuad;
# Errors, because this is not the right import.
Then I tried:
import helpers from chart.js/helpers;
Uncaught TypeError: chart_js_helpers__WEBPACK_IMPORTED_MODULE_1__.helpers is undefined
Can someone point me to where I can find how to import this?
As described in the docs here you need to import these funcitons using treeshaking from the helpers package when using ESM:
import { easingEffects} from 'chart.js/helpers';
When we write code in index.js file in src folder of an React app first of all we write this line:
import React from 'react';
I know react is a package
But I want to know what is React basically
an object, a method or something else.
The React variable that you import is an object, and it contains most of the methods that are used by React when generating a web-page.
The reason this import has been historically required is because the JSX that you write (e.g. return <p>text</p>) gets converted into a function call, calling the React.createElement function.
Note that in newer versions of React you no longer need to import react when using JSX. See https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more information.
Credit to Olivier Boissé for an answer in the comments.
In order to find out what React is, you just need to write:
console.log(react);
Then you will see that it is an object with many properties and methods.
String:
import React from "react";
We are writing in order to import this object into a file where we will use some of its method. If you don't use anything from React in the file, then you don't need to import it.
For example, in react 18, it is no longer necessary to import the react object into a file index.js
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
In any case, at this stage of your study of react, it may not be entirely clear to you what is used in it and for what, but in the future you will become more aware of all the possibilities of react. There is a time for everything
I'm working on a React project, and creating a component called SVGLogo that simply imports an svg and exports as a component. I noticed that when I use require() to import my svg file, it works fine:
const SVGLogo = require('../../../../../vft-site/src/images/logo.svg');
But my linter suggests I use the import statement. I changed it but now I get the error 'cannot find module... or its corresponding type declarations':
import SVGLogo from '../../../../../vft-site/src/images/logo.svg';
Why are these different?
import comes in es6 like a new feature and require can be called from anywhere but import can be called on top of script
I am trying to plot a highmap in react using typescript. I have additionally loaded the highcharts types which include highmaps.
class InvestmentChart extends React.Component {
componentDidMount() {
Highcharts.mapChart("investment", {
chart: {
...
Cheers
See live here.
Based on the readme, it looks like you need to do:
import * as Highcharts from 'highcharts/highmaps';
instead of:
import * as Highcharts from 'highcharts';
I tried this in CodeSandbox and it seemed to get past the point where you were stuck.
Update
DefinitelyTyped appears to have some typings for Highmaps, though they are out of date. The following method of importing Highmaps seems to get as far as the previous method at runtime in CodeSandbox and will use the typings:
import * as Highcharts from "highcharts";
import MapFactory = require("highcharts/modules/map");
(MapFactory as any)(Highcharts);
New CodeSandbox. Locally, I am still getting a type error because of the out-of-date declarations (subtitle is not recognized), but you can //#ts-ignore it. I don't know why this error isn't appearing on CodeSandbox.
I have been trying to run react starter kit with formsy-react, I see babel converts it to formsyrect2.addvalidationRule to formsyrect2.default.addvalidationRule.
I see Formsy.addValidationRule is searching for _formsyReact2.default.addValidationRule
It converts it into default import cause you are used that syntax, it should be import * as Formsy from 'formsy-react';