question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to convert to react component

See original GitHub issue

React Component

import React from 'react'
import CupImage from './cup.svg'
class DashBoard extends React.Component{
render(){
return <div><CupImage/></div>
}
}
export default DashBoard

WebpackConfig.js { test: /.svg$/, loaders: [ { loader: ‘babel-loader’, query: { presets: [‘es2015’] } }, { loader: ‘react-svg’, query: { jsx: true } } ] }

Please let me know if i am missing some thing here in above example .

Unable to load this image having this below issue TypeError: Cannot call a class as a function

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
boopathicommented, Jun 10, 2017

@kubens With webpack2, you can pass options like this - https://github.com/boopathi/react-svg-loader#webpack-2x . You don’t need JSON.stringify.

0reactions
boopathicommented, Sep 28, 2017

webpack<2 support is dropped in master.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to convert any svg to react component #43 - GitHub
The problem is with your webpack config. I suppose this is a bug upstream that it doesn't accept plain functions. But you need...
Read more >
Unable to convert ReactJS project to React-Redux
I am new to React-Redux, I've created a ReactJS project and I am trying to convert my project to React-Redux. I won't understand...
Read more >
[Solved]-Unable to convert class component to function ...
Coding example for the question Unable to convert class component to function ... Segment } from "semantic-ui-react"; function App() { const [activeItem, ...
Read more >
Refs Must Have Owner Warning - React
This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created...
Read more >
JSX In Depth - React
If you want to test out how some specific JSX is converted into JavaScript, you can try out ... JSX type can't be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found