找到在 Laravel Mix webpack.mix 中同时包含 React + TypeScript 的正确解决方案？

Question

When i try to connect:

mix.ts('resources/assets/js/app.ts', 'public/js/app.js') .react('resources/js/app.ts', 'public/js/app.js');

There is mistake appears :

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.entry should be one of these: function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] -> The entry point(s) of the compilation.

So, i resolve this like this:

`mix.react('resources/js/index.js', 'public/js/app.js')
.webpackConfig({
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.tsx'],
    }, 
})`

But i'm not sure is it right, any suggestions ??? i'll be glad, thanks)

Answer 1

It's too late to answer but it might help for who has same problem.

webpack.mix.js:

mix.ts('resources/js/index.tsx', 'public/js/app.js').react();

Put the following script tag before closing body tag in your Laravel blade template:

<script src="{{ asset('js/app.js') }}"></script>