Laravel Mix - Integrate web3 react app into laravel-CodePudding

The

I created the following files to compile the app with mix:

webpack.mix.js:

const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ /* mix.js('resources/js/app.js', 'public/js') .react() .sass('resources/sass/app.scss', 'public/css'); */ mix.js('react-app/src/App.js', 'public/js') .webpackConfig(require('./webpack.config')) .react() .css('react-app/src/styles/reset.css', 'public/css') .css('react-app/src/styles/styles.css', 'public/css') .css('react-app/src/App.css', 'public/css')

webpack.config.js:

module.exports = { resolve: { fallback: { "stream": require.resolve("stream-browserify"), "crypto": require.resolve("crypto-browserify"), "http": require.resolve("stream-http"), "https": require.resolve("https-browserify"), "os": require.resolve("os-browserify/browser"), }, }, };

My view welcome.blade.php in laravel looks like the following:

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title>  <link href="{{ asset('css/App.css') }}" rel="stylesheet"> <link href="{{ asset('css/styles.css') }}" rel="stylesheet"> <link href="{{ asset('css/reset.css') }}" rel="stylesheet"> </head> <body>  <div id="App"> </div>  <script src="{{ asset('js/App.js') }}" defer></script> </body> </html>

The compilation works fine, but when I run the route to welcome.blade.php I get a blank page back.

Any suggestions what I am doing wrong?

I appreciate your replies!

CodePudding user response：

This does not seem like a problem with mix.

What I do suspect, is that your App.js does not actually render the components.

You need to call ReactDOM.createRoot() somewhere after the DOM is available and attach your <App/> to it.

import * as ReactDOM from 'react-dom/client'; import App from 'App'; const elem = document.getElementById('App'); const root = ReactDOM.createRoot(elem); root.render(<App/>); // whatever initialization you may need goes here

This should be your top-level JS file.

Optionally, and for a bit more flexibility, you could read and follow the excellent tutorial from Joe at https://joeczubiak.com/laravel-plus-react/ .

CodePudding user response：

Why not use Laravel breeze? It's the starter kit for laravel api backend. Here is the document:

https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

And you can use the nextjs version here:

https://github.com/laravel/breeze-next