Блог

Главная - Вопросы по программированию - Webpack не может загрузить компонент более высокого порядка?

Webpack не может загрузить компонент более высокого порядка?

#javascript #reactjs #higher-order-components

#javascript #reactjs #компоненты более высокого порядка

Вопрос:

Я создал компонент более высокого порядка, который выглядит следующим образом:

 import * as React from 'react'

export const ForceMobileHOC = WrappedComponent => {
  return class extends React.Component {
    constructor(props) {
      super(props)
    }

    render() {
      return (
        <WrappedComponent {...this.props} />
      )
    }
  }
}

Но webpack выдает ошибку:

 Module parse failed: Unexpected token (45:13)
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
| 
|     render() {
>       return <WrappedComponent {...this.props} />
|     }
|   }

И вот соответствующая конфигурация Webpack:

 module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /core-js/,
        query: {
          cacheDirectory: './webpack_cache/'
        }
      }
    ]
  }

Я делал HOC раньше, но никогда не сталкивался с чем-то подобным. Что может происходить?

Комментарии:

1. Похоже, JSX сбивает с толку. Как выглядит ваша конфигурация webpack? В частности, какой загрузчик вы используете для .jsx файлов (или какое расширение файла имеет этот файл)?

2. @NicholasTower Хороший момент. Обновленный вопрос с конфигурацией Webpack…

Ответ №1:

Это был импорт. Я пытался импортировать ForceMobileHOC.JS вместо ForceMobileHOC.js . Не уверен, почему ошибка выглядела так, но это было решение.