React with Inertia JS

[tvaughan73]

Will Preview.JS work when using React with Inertia JS? Unless I am doing something wrong I don't think it will. In PHPStorm when I click Open Show in Preview.js it gives errors saying it failed to fetch dynamically imported module.

TypeError: Failed to fetch dynamically imported module: http://localhost:3140/preview/resources/js/Pages/Profile/Show.tsx

[fwouts]

Hey @tvaughan73, would you be able to provide a sample repo that I could test on? Thanks!

[tvaughan73]

Sure, here is repo: https://github.com/tvaughan73/laravel-jetsream-teams
JS is in the resources/js folder.

[fwouts]

Perfect, thank you.

I just tried it out and couldn't quite get it to work, but I think I should be able to fix Preview.js for that.

Basically:

• You need to alias @ to the correct directory. This can already be done with:

// preview.config.js

module.exports = {
  alias: {
    '@': 'resources/js',
  },
};

• You also need to somehow provide the required InertiaContext to wrap the components, as AppLayout relies on it. Normally, you could do this with a Wrapper component but in this case, it doesn't appear to be easily mockable. So you'd want to somehow mock out AppLayout, which isn't possible today with Preview.js (as far as I know!). You can see what it would look like by temporarily replacing AppLayout.tsx with just:

import { PropsWithChildren } from 'react';

export default function PreviewLayout({ children }: PropsWithChildren<{}>) {
  return children;
}

I've filed #951 to track development of this feature :)