macaron icon indicating copy to clipboard operation
macaron copied to clipboard

Support for the experimental syntax 'jsx' isn't currently enabled

Open hyperknot opened this issue 1 year ago • 2 comments

I get this when trying to use it with Vite + Solid starter.

Support for the experimental syntax 'jsx' isn't currently enabled (8:14):

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) 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://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
	npx cross-env BABEL_SHOW_CONFIG_FOR=index.jsx <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.I 

hyperknot avatar Nov 25 '24 23:11 hyperknot

How to fix:

add @babel/plugin-syntax-jsx -D

import { macaronVitePlugin } from '@macaron-css/vite';
import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  vite: {
    plugins: [
      macaronVitePlugin({
        babel: {
          plugins: ['@babel/plugin-syntax-jsx']
        },
      }),
    ],
  },
});


RainArroDev avatar Nov 29 '24 12:11 RainArroDev

I see, thanks. I've settled on stylex in the meanwhile, but good to know if there is a fix.

hyperknot avatar Nov 29 '24 13:11 hyperknot