Laravel 5.4 laravel-elixir-webpack-react

Posted 2023-02-21

【中文标题】Laravel 5.4 laravel-elixir-webpack-react

【英文标题】：

【发布时间】：2017-08-15 18:58:10

【问题描述】：

我在 laravel 5.4 项目中使用 npm install 成功安装了软件包。这是我的 package.json：

“私人”：真的， “脚本”： “dev”：“节点 node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix /setup/webpack.config.js",

"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

,

“开发依赖”： "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.1", “laravel-elixir-webpack-react”：“^1.0.1”， “laravel 混合”：“^0.8.1”， "lodash": "^4.17.4", “反应”：“^15.4.2”， “反应域”：“^15.4.2”， “vue”：“^2.1.10”

//这是我的 webpack.mix.js

mix.sass('resources/assets/sass/app.scss', 'public/css') .js('resources/assets/js/app.js', 'public/js/components');

我有一个简单的反应组件用于测试。

import React,  Component  from 'react';
import ReactDOM from 'react-dom';

class Example extends Component 
    render() 
        return (
            <h1>Works!</h1>
    );
    


export default Example;

if (document.getElementById('example')) 
    ReactDOM.render(<Example />, document.getElementById('example'));

当我运行命令 npm run dev 时，我在编译反应代码时收到以下错误：

Syntax Error: Unexpected token (7:12)

   5 |     render() 
   6 |         return (
>  7 |             <h1>Works!</h1>
     |             ^
   8 |     );
   9 |     
  10 | 

知道如何解决这个问题吗？

【参考方案1】：

改变

mix.sass('resources/assets/sass/app.scss', 'public/css') 
   .js('resources/assets/js/app.js', 'public/js/components');

到

mix.sass('resources/assets/sass/app.scss', 'public/css') 
   .react('resources/assets/js/app.js', 'public/js/components');