mobx-jsx + vite = ?

[valjusha]

Hello Ryan!
Thanks for the interesting tool. But I can not start on vita
With a clean config in runtime, the error is ReferenceError: React is not defined

My problem is parsing jsx markup.

i tried to replace esBuild:

1. vite.config -> esbuild: false
2. vite.config -> add "vite-babel-plugin"
3. .babelrc write:

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "babel-plugin-jsx-dom-expressions",
      {
        "moduleName": "mobx-jsx",
        "alwaysCreateComponents": true
      }
    ]
  ]
}

but i am getting error: "Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension."

1:43:05 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /project/src/client/index.tsx
  10 |    cleanup(() => clearInterval(timer));
  11 |  
  12 |    return <div>{state.counter}</div>;
     |                                      ^
  13 |  }
  14 |  

up. If add start-dom-jsx, then SyntaxError: The requested module '/node_modules/mobx-jsx/dist/h.js' does not provide an export named 'default' (client)

[ryansolid]

I'm a bit surprised the babel plugin didn't work. The files definitely need to have .jsx/.tsx extension. But I'd expect that to work.

We wrote a custom plugin for Solid to work with Vite. https://github.com/solidjs/vite-plugin-solid/blob/master/src/index.ts. The transform hook is the key part but admittedly I did not write this. I wouldn't expect start-dom-jsx or a different transformation to work.

[valjusha]

@ryansolid Tell me where to start to solve the launch problem mobx-jsx or find another "vite"?