See Sanity in action 👀 Join us for a live product demo + Q&A →

Troubleshooting migration from v2 to v3 with Tailwind reference causing invalid JS syntax error

3 replies
Last updated: Mar 1, 2023
Hi! Trying to migrate a project from v2 to v3 for the first time. My schemas/blockContent.js has this line in it with a tailwind reference:

const smallH2Style = props => (

<span className="py-4">{props.children}</span>


Which gives me this error:

[plugin:vite:import-analysis] 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.

I suspect this is because of the missing access to the definition of the py-4 class? Is this assumtion correct? Or is it something else happening here? The Sanity Studio folder is located inside a next.js project folder that has tailwind installed as a dependency - How would I go about linking that Tailwind instance to blockContent.js?
Feb 28, 2023, 8:32 PM
You should be able to fix it by changing the extension of the file to
Feb 28, 2023, 9:10 PM
Thank you! For some reason I just assumed that that was a misenterpretation of the error - because that's exactly what the error said. But you are right!
Mar 1, 2023, 7:20 PM
I had the same experience the first time I saw it!
Mar 1, 2023, 8:26 PM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in