[1.x] Improve Vite compatibility (#154)

* Use jsx extension for files containing JSX

* Switch to ESM imports

This improves the transition for Vite users.

src/Console/InstallsInertiaStacks.php

@@ -173,19 +173,21 @@ protected function installInertiaReactStack()
         copy(__DIR__.'/../../stubs/inertia-common/routes/auth.php', base_path('routes/auth.php'));
 
         // "Dashboard" Route...
-        $this->replaceInFile('/home', '/dashboard', resource_path('js/Pages/Welcome.js'));
-        $this->replaceInFile('Home', 'Dashboard', resource_path('js/Pages/Welcome.js'));
+        $this->replaceInFile('/home', '/dashboard', resource_path('js/Pages/Welcome.jsx'));
+        $this->replaceInFile('Home', 'Dashboard', resource_path('js/Pages/Welcome.jsx'));
         $this->replaceInFile('/home', '/dashboard', app_path('Providers/RouteServiceProvider.php'));
 
         // Tailwind / Webpack...
         copy(__DIR__.'/../../stubs/default/resources/css/app.css', resource_path('css/app.css'));
         copy(__DIR__.'/../../stubs/inertia-common/tailwind.config.js', base_path('tailwind.config.js'));
         copy(__DIR__.'/../../stubs/inertia-common/webpack.mix.js', base_path('webpack.mix.js'));
         copy(__DIR__.'/../../stubs/inertia-common/jsconfig.json', base_path('jsconfig.json'));
-        copy(__DIR__.'/../../stubs/inertia-react/resources/js/app.js', resource_path('js/app.js'));
+        copy(__DIR__.'/../../stubs/inertia-react/resources/js/app.jsx', resource_path('js/app.jsx'));
+        unlink(resource_path('js/app.js'));
 
         $this->replaceInFile('.vue()', '.react()', base_path('webpack.mix.js'));
-        $this->replaceInFile('.vue', '.js', base_path('tailwind.config.js'));
+        $this->replaceInFile('app.js', 'app.jsx', base_path('webpack.mix.js'));
+        $this->replaceInFile('.vue', '.jsx', base_path('tailwind.config.js'));
 
         if ($this->option('ssr')) {
             $this->installInertiaReactSsrStack();
@@ -210,7 +212,7 @@ protected function installInertiaReactSsrStack()
         });
 
         copy(__DIR__.'/../../stubs/inertia-react/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js'));
-        copy(__DIR__.'/../../stubs/inertia-react/resources/js/ssr.js', resource_path('js/ssr.js'));
+        copy(__DIR__.'/../../stubs/inertia-react/resources/js/ssr.jsx', resource_path('js/ssr.jsx'));
 
         (new Process([$this->phpBinary(), 'artisan', 'vendor:publish', '--provider=Inertia\ServiceProvider', '--force'], base_path()))
             ->setTimeout(null)

stubs/default/resources/js/app.js

@@ -1,4 +1,4 @@
-require('./bootstrap');
+import './bootstrap';
 
 import Alpine from 'alpinejs';
 

stubs/inertia-react/resources/js/app.js → stubs/inertia-react/resources/js/app.jsx

@@ -1,4 +1,4 @@
-require('./bootstrap');
+import './bootstrap';
 
 import React from 'react';
 import { render } from 'react-dom';

stubs/inertia-react/resources/js/bootstrap.js

@@ -1,12 +1,14 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -18,7 +20,8 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',

stubs/inertia-react/webpack.ssr.mix.js

@@ -2,7 +2,7 @@ const mix = require('laravel-mix');
 const webpackNodeExternals = require('webpack-node-externals');
 
 mix.options({ manifest: false })
-    .js('resources/js/ssr.js', 'public/js')
+    .js('resources/js/ssr.jsx', 'public/js')
     .react()
     .alias({
         '@': 'resources/js',

stubs/inertia-vue/resources/js/app.js

@@ -1,4 +1,4 @@
-require('./bootstrap');
+import './bootstrap';
 
 import { createApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/inertia-vue3';

stubs/inertia-vue/resources/js/bootstrap.js

@@ -1,12 +1,14 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -18,7 +20,8 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',