Ошибка компиляции Laravel-mix: объединение javascript с библиотекой компонентов typescript: вам может потребоваться соответствующий загрузчик для обработки этого типа файла

Я начинаю проект с последней версией Laravel (6.5) и хочу использовать response (16.9) в некоторых частях интерфейса. Он отлично работал с первыми тестами, но теперь я хочу попробовать библиотеку компонентов. Я установил материал-комплект-реакция с помощью npm:

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, чтобы связать все вместе, но через много часов я не смог найти решения. Я установил ts-loader (и машинописный текст) через npm, добавил это в 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-response": "^ 7.0.0" установлен как dev-dependency), но ничего. ..

Так что я был бы признателен за некоторый свет здесь, потому что я предполагаю, что многие библиотеки будут использовать машинописный текст! Я искал варианты для laravel-mix, где нашел этот .webpackConfig, но ничего. Может быть, мне сначала нужно скомпилировать библиотеку, чтобы она работала с laravel?

Я все делаю неправильно с самого начала?

Заранее большое спасибо за ваше время! С уважением, Хави


typescript laravel-mix react-component webpack-4
person Xavi Baz    schedule 15.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Этот код работает для меня

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