Update 2023: I highly advise using Vite with their officialpreset, as it's much easier to configure and miles faster than Webpack.
In this article, I share my configuration forPreact usage withLaravel Mix.
Install these dependencies before you get started:
preact@babel/plugin-proposal-class-properties@babel/preset-react
You can do it with this command:
npminstallpreact @babel/plugin-proposal-class-properties @babel/preset-reactNext, add this content to yourwebpack.mix.js
// webpack.mix.jsconstmix=require('laravel-mix');mix.webpackConfig({"resolve":{"alias":{"react":"preact/compat","react-dom":"preact/compat"}}});mix.babelConfig({"plugins":["@babel/plugin-proposal-class-properties"],});mix.react('resources/js/app.js','public/js');And here is an example app component, you can store it inresources/js/app.js file:
// app.jsimport{h,render,Component}from'preact';window.React=require('preact');classAppextendsComponent{render(){return<h1>PreactfromLaravelMix</h1>;}}render(<App/>,document.body);Note: As we set out rendering node asdocument.body, you should place your script tag inside<body> tag. If you need to place<script> tag in the<head> section - you will need to adddefer attribute.
<body><script src="{{ mix('js/app.js') }}"></script></body>That's all, happy coding! :)
Top comments(1)
- LocationGermany
- Joined
Thanks for the post ... but What's benfit of using "babel/plugin-proposal-class-properties"?
For further actions, you may consider blocking this person and/orreporting abuse
