Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

titleProp with existing title not working properly #314

Closed
sudkumar opened this issue May 29, 2019 · 2 comments · Fixed by #315
Closed

titleProp with existing title not working properly #314

sudkumar opened this issue May 29, 2019 · 2 comments · Fixed by #315

Comments

@sudkumar
Copy link
Contributor

🐛 Bug Report

In the last release 4.3.0, we introduced a feature for falling back to existing title when titleProp is set to true. But the feature is not working as expected in an application. It doesn't fallback to existing title.

To Reproduce

  1. Fork create-react-app and update the @svgr/webpack package in packages/react-scripts to 4.3.0 and update packages/react-scripts/config/webpack.config.js to include the +titleProp option in svgr loader.
  2. Run yarn to install all the dependencies
  3. Commit your changes if necessary
  4. Create an application with this create-react-app setup by running yarn create-react-app my-app
  5. Now go into the my-app folder and change the logo.svg to add a title
<svg...>
+ <title>React Logo</title>
  1. Import this svg as ReactComponent in App.js
- import logo  from "./logo.svg"
+ import { ReactComponent as Logo } from "./logo.svg"

function App () {
  return (
    <div className="App">
      <header className="App-header">
-         <img src={logo} className="App-logo" alt="logo" />
+         <Logo className="App-logo" />
  1. Now run the application with yarn start and inspect the title element in the developer tools. We see an empty title element (<title></title>).

Expected behavior

I expect the title element to be <title>React Logo</title>

Possible Issues

Looking at the source code of packages/babel-plugin-svg-dynamic-title/src/index.js, we see that the children of the title element are joined with the .value which works only for JSXText but not for JSXExpressionContainer. And it seems like in the application I tested, it was returning the title's children as JSXExpressionContainer.

Possible Solution

Instead returning the title expression from conditional check ({title === undefined ? 'Fallback_Title_Children' : title}), we can return the title element itself ({title === undefined ? <title>{Fallback_Title_Children}</title> : <title>{title}</title>}). That way, we do not need to handle any cases that may occur for the children of existing title.

@sudkumar
Copy link
Contributor Author

@neoziro What are your thoughts on this ?

@gregberge
Copy link
Owner

@sudkumar I commented on your PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants