Uncaught TypeError: Failed to resolve module specifier '__laravel_vite_placeholder__/node_modules/.vite/deps/react.js?v=2df0e32e'

[badasukerubin]

Vite Plugin Version

1.0.0

Laravel Version

10.10

Node Version

16.15.1

NPM Version

9.8.0

Operating System

macOS

OS Version

14.6.1 (23G93)

Web browser and version

Version 128.0.6613.86 (Official Build) (x86_64)

Running in Sail?

No

Description

I get the error: Uncaught TypeError: Failed to resolve module specifier 'laravel_vite_placeholder/node_modules/.vite/deps/react.js?v=2df0e32e' when I try to connect 2 micro frontends; a remote Laravel package (using react) with a host application.

Steps To Reproduce

1. Create a remote package, configure vite, react etc.
2. Create a full laravel app, configure vite, react etc.
3. remote package (vite.config.js)

   export default defineConfig({
   build: {
       target: "esnext",
   },
   plugins: [
       laravel({
           input: ["resources/js/app.tsx"],
           ssr: "resources/js/ssr.tsx",
           refresh: true,
       }),
       react(),
       federation({
           name: "remote-package",
           filename: "remoteEntry.js",
           exposes: {
               "./TestComponent": "./resources/js/TestComponent",
           },
           shared: ["react", "react-dom"],
       }),
   ],
   ...
   });

4. main app (vite.config.js)

export default defineConfig({
  build: {
    target: 'esnext',
  },
  plugins: [
    laravel({
      input: ['resources/js/app.tsx'],
      ssr: 'resources/js/ssr.tsx',
      refresh: true,
    }),
    react(),
    federation({
      name: 'host-app',
      remotes: {
        remote_app: 'http://localhost:5002/public/build/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
 ...
});

[badasukerubin]

I fixed this issue by adding the following to the main app's vite.config.js:

     server: {
       origin: '.',
     },