jsx parse error

[rambabusaravanan]

Hi @fwouts,

When using our components, I'm facing issue in parsing jsx file.

% yarn test:visual:new shoot
yarn run v1.22.5
$ viteshot shoot
10:58:20 [vite] new dependencies found: styled-components, mylib, gatsby, react-hook-form, query-string, recoil, updating...
10:58:20 [vite] error while updating dependencies:
Error: Parse error @:28:55
    at parse$e (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:28902:353)
    at optimizeDeps (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:73082:29)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async rerun (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:73388:61)
10:58:21 [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: /Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/gatsby/cache-dir/gatsby-browser-entry.js
  26 |      <React.Fragment>
  27 |        {finalData && render(finalData)}
  28 |        {!finalData && <div>Loading (StaticQuery)</div>}
     |                                                        ^
  29 |      </React.Fragment>
  30 |    )
      at formatError (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:50684:46)
      at TransformContext.error (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:50680:19)
      at TransformContext.transform (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:74063:22)
      at async Object.transform (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:50885:30)
      at async transformRequest (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:66636:29)
      at async viteTransformMiddleware (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:66774:32)
10:58:21 [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: /Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/gatsby/cache-dir/gatsby-browser-entry.js
  26 |      <React.Fragment>
  27 |        {finalData && render(finalData)}
  28 |        {!finalData && <div>Loading (StaticQuery)</div>}
     |                                                        ^
  29 |      </React.Fragment>
  30 |    )
      at formatError (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:50684:46)
      at TransformContext.error (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:50680:19)
      at TransformContext.transform (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:74063:22)
      at async Object.transform (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:50885:30)
      at async transformRequest (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:66636:29)
      at async viteTransformMiddleware (/Users/rambabusaravanan/workspace/xxx/xxxxxx/node_modules/vite/dist/node/chunks/dep-11db14da.js:66774:32) (x2)

Earlier I used to declare in jest.screenshot.config.js file

transformIgnorePatterns: [`node_modules/(?!(gatsby|mylib)/)`]

[fwouts]

Hey @rambabusaravanan, great bug report.

Viteshot currently can't support any JSX in js files, but I just managed to get that to work in reactpreview.com, which works in a very similar way, so I should be able to fix it.

Give me a day or two 🙂

[fwouts]

Hey @rambabusaravanan, v0.1.4 is out with support for JSX in .js files.

However, this cannot apply to JSX inside node_modules/, which appears to be the case with Gatsby. In case you're curious, the problematic code inside Vite is https://github.com/vitejs/vite/blob/887c247984abc0f80d8b19a1d681855944f6d01a/packages/vite/src/node/optimizer/index.ts#L245

It looks like you won't be able to take screenshots of components that depend on Gatsby 😞 Other, more isolated components should however be fine.

[fwouts]

Hey @rambabusaravanan, it took a while to get that PR merged into Vite, but it's now done :)

You should be able to use Viteshot with Gatsby, at least from v0.1.8. Let me know how you go!

[rambabusaravanan]

Sure will give it a try. Thanks for the update.