I'm trying to import an SVG file as follows:
import ExampleIcon from './icons/example.svg';
But I'm getting a render error:
Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/example.edcd2c8d.svg') is not a valid name.
How can I use a simple import without needing to cast ExampleIcon as a React Component as follows?
import { ReactComponent as ExampleIcon } from './icons/example.svg';
I'm trying to keep my code standardized within the code base, so I would prefer to avoid using the ReactComponent method where possible.
I realised I needed to use react-svg-loader to achieve the result I want, as React disallows SVG imports otherwise.
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';
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...
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'm working to import CSS files in my React App. I have css being imported successfully like so:
Original source app: https://github.com/timscott/react-devise-sample
MainLayout.jsx
import css from '../styles/base.css'
base.css
body {
opacity: .1;
}
When I load my app in a browser I see the styles taking effect. The problem is, in the console I'm getting a JS warning:
webpackHotDevClient.js:198 ./src/layouts/MainLayout.jsx
.../client/src/layouts/MainLayout.jsx
12:8 warning 'css' is defined but never used no-unused-vars
✖ 1 problem (0 errors, 1 warning)
What am I doing wrong in React to cause the CSS to render but still get a warning in the console?
Name this "component" only if you need call them in some part of the code. e.g. Using CSS-Modules. This is only a regular css so load in this manner :
import '../styles/base.css'
But if you still want to keep this unused var you can edit your es-lint, and delete this rule. (Not Recommended)
You do not need "css from" since the css file is already connected to the jsx file. You only do that when using other jsx components, for example:
import SomeComponent from '../SomeComponent.jsx'
I am trying to setup Material UI for React, using JSPM and ES6 through Babel.
1) installed material-ui with jspm install material-ui=npm:material-ui
2) this gave me the ability to import material ui into my React Component files like this : import {TextField, LeftNav} from 'material-ui'
At this point I get the right references into my ES6 file, so if I do a
console.log(TextField);
I get the react component printed.
Sadly my current issue is that I'm getting errors when trying to use the component in jsx
return (
<div>
<TextField />
</div>
)
throws an error :
Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.
warning.js:17 Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
warning.js:26 Warning: TextField(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component.
warning.js:17 Warning: Don't set the props property of the component. Mutate the existing props object instead.
dashboard:1 Uncaught (in promise) Error: Can't add property context, object is not extensible
Error loading http://localhost:3000/app.js
at ReactCompositeComponentMixin.mountComponent
Based on the warnings, I'm thinking that the error may be caused by a specific situation created by the combination of tools, Babel+JSPM+Material-UI.
Check the version of react you're running. It should be v0.13.3.
More info can be found here: https://github.com/callemall/material-ui/issues/1303