Issue with JSX?

[sethrubenstein]

I feel like I'm going crazy, I'm trying to use some components from https://github.com/10up/block-components and when I import them and build my project I'm getting this error...

 ERROR  please review

(blocks) ./node_modules/@10up/block-components/components/ContentPicker/index.js
SyntaxError: /Users/srubenstein/dev/pewresearch/app/public/wp-content/plugins/prc-block-library/node_modules/@10up/block-components/components/ContentPicker/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (119:3):

  117 |
  118 |         return (
> 119 |                 <div className={`${NAMESPACE}`}>
      |                 ^
  120 |                         {(!content.length || (content.length && content.length < maxContentItems)) && (
  121 |                                 <ContentSearch
  122 |                                         placeholder={placeholder}

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
 @ ./node_modules/@10up/block-components/index.js 1:0-54 1:0-54
 @ ./src/story-item/edit/controls/placeholder.jsx
 @ ./src/story-item/edit/controls/index.js
 @ ./src/story-item/edit/index.js
 @ ./src/story-item/index.js
 @ multi @wpackio/entrypoint/lib/index ./src/story-item/index.js

I've tried adding @babel/preset-react to the jsBabelPresetOptions config like so...

outputPath: 'dist',
    jsBabelPresetOptions: {
        presets: ['@babel/preset-react']
    },
    hasReact: true,

Which I assumed was duplicative as its already being included, this of course did not work.

I tried adding @babel/plugin-syntax-jsx to the jsBabelOverride config like so...

outputPath: 'dist',
    jsBabelOverride: defaults => ({
        ...defaults,
        plugins: ['@babel/plugin-syntax-jsx'],
    }),
    hasReact: true,

But that also did nothing.

What am I missing here, how do I get this import to work?

[swashata]

Hi,

The thing is, we don't convert node_modules jsx to createElement call. We do transpile node_modules, but they still have to be valid JavaScript syntax. If you really need this, you can send in a PR with an option to do that.

[sethrubenstein]

No worries, I just forked their project and I'm going to just include it in our own components package and thats working.

Thanks!