Laravel-mix编译错误：将JavaScript与Typescript组件库捆绑在一起：您可能需要适当的加载器来处理此文件类型

Question

我正在使用最新的Laravel（6.5）开始一个项目，并希望在前端的某些部分中使用react（16.9）。在最初的测试中效果很好，但是现在我想尝试一个组件库。我用npm安装了material-kit-react：

npm i material-kit-react

在我的.js文件中，导入组件：

import CustomInput from "material-kit-react/src/components/CustomInput/CustomInput";

我试图从“ material-kit-react”导入它，但是它抱怨路径，所以我习惯使用完整路径。可能我在这里错过了一步，因为我对npm / node_modules / webpack等还不是很熟悉...而且我知道我对整体情况缺少一些了解。

然后在组件中将其返回：

    return (
        <div>
            <CustomInput
                labelText="With floating label"
                id="float"
                formControlProps={{
                    fullWidth: true
                }}
            />
        </div>
    );

但是在编译过程中出现此错误（第57行是带有FormControl标记的行：]

ERROR in ./node_modules/material-kit-react/src/components/CustomInput/CustomInput.js 57:4
Module parse failed: Unexpected token (57:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|   return (
>     <FormControl {...formControlProps} className={formControlClasses}>
|       {labelText !== undefined ? (
|         <InputLabel
 @ ./resources/js/components/usuario/Registro.js 13:0-84 67:62-73
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

下面的声明，我已经看到它使用了打字稿，所以我发现可能我需要ts-loader将所有东西捆绑在一起，但是很多小时后我找不到解决方案。我通过npm安装了ts-loader（和打字稿），并将其添加到webpack.mix.js：

mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: "ts-loader"
        }
      ]
    },
    resolve: {
      extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
    }
  });

[创建了tsconfig.json文件，并尝试使用.babelrc文件，原因是我读到这可能是因为该原因（“ @ babel / preset-react”：“ ^ 7.0.0”被安装为dev-dependency），但是没什么...

所以，我希望在此提供一些帮助，因为我想很多图书馆都将使用打字稿！我搜索了laravel-mix的选项，在其中找到了这个.webpackConfig，但是什么也没有。也许我需要先编译该库才能使其与laravel一起使用？

我从一开始就做错了吗？

非常感谢您的宝贵时间！最好的祝福，Xavi

Answer 1

此代码对我有用

mix.webpackConfig({
resolve: {
    extensions: [".ts", ".tsx"]
},
module: {
    rules: [
        {
            test: /\.ts|\.tsx$/,
            loader: "babel-loader!awesome-typescript-loader"
        }
    ]
}
});