Cannot use JSX in custom template

[liorgreenb]

🐛 Bug Report

When using custom template, JSX syntax usage results in "Unexpected token"

To Reproduce

1. Create custom template using JSX syntax for exmaple:

function template(
    { template },
    opts,
    { imports, componentName, props, jsx, exports },
) {
    return template.ast`
${imports}
function ${componentName}(${props}) {
return <div>${jsx}</div>
}
${exports}
`
}

2. Use the template in the config

Expected behavior

Expected babel to transpile the JSX and continue successfully.

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS Mojave 10.14.5
 - CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
 - Memory: 505.64 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 8.10.0 - /usr/local/bin/node
 - Yarn: 1.17.3 - /usr/local/bin/yarn
 - npm: 6.13.2 - /usr/local/bin/npm
## npmPackages:
 - @svgr/webpack: 5.0.0 => 5.0.0 

Thanks (:

[ghostd]

I had a similar issue with the TypeScript sample. To fix it, i changed the import line to:
import React from 'react';

Hope this helps.

[liorgreenb]

@gregberge
Why was this closed? this is still an issue

[michielmetcake]

This is closed because it's not an issue. You could use a custom template like this:

please mind the jsx plugin

function template({ template }, opts, { jsx }) {
  const jsxTemplate = template.smart({ plugins: ['jsx'] });
  return jsxTemplate.ast`import * as React from 'react';
  const MyComponent = () => <div>{${jsx}}</div>
  export default MyComponent
`;
}

module.exports = template;

[liorgreenb]

@michielmetcake

Confirmed this works, thanks!

I suggest next time replying with a fix before closing.

[gregberge]

It was probably a mistake, anyway good if it is fixed.