Синтаксис JSX внутри пользовательского node_module не может быть проанализирован

Question

У меня есть проект PARENT (пользовательский интерфейс, написанный с использованием React), который импортирует свое хранилище Redux из пакета IMPORTED npm.

index.js РОДИТЕЛЬСКИЙ проект:

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './containers/Root';

import configureStore from 'custom-store';// Importing the custom package

ReactDOM.render(
  <Root store={configureStore()} />,
  document.getElementById('root')
)

когда custom-store Пакет выполнен как самостоятельный проект. Файл DevTools.js разбирает правильно.

Но когда custom-store посылка - это просто посылка, импортированная внутри node_modules проекта PARENT, который выполняется, я вижу эту ошибку:

./node_modules/custom-store/src/containers/DevTools.js
Module parse failed: /path/to/project/node_modules/custom-store/src/containers/DevTools.js Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
| 
| export default createDevTools(
|   <DockMonitor toggleVisibilityKey="ctrl-h"
|                changePositionKey="ctrl-w">
|     <LogMonitor />

configureStore.js Импортированный проект:

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import customApi from '../middleware/custom/api'
import rootReducer from '../reducers'
import DevTools from '../containers/DevTools' // I would like to use DevTools in the parent project too for debugging purpose

const configureStore = preloadedState => {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(thunk, customApi, createLogger()),
      DevTools.instrument()
    )
  )

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      store.replaceReducer(rootReducer)
    })
  }

  return store
}

export default configureStore

DevTools.js Импортированный проект:

import React from 'react'
import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

export default createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" // Problem parsing this line
               changePositionKey="ctrl-w">
    <LogMonitor />
  </DockMonitor>
)

ЗАМЕТКИ:

Пользовательский пакет содержит некоторый код JSX, используемый redux-devtools и, следовательно, ошибка. Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.,

Возможной причиной может быть отсутствие предустановки (например, es2015, react) в .babelrc что предотвращает анализ файлов JSX.

Я хотел бы использовать redux-devtools в проекте PARENT для отладки, а не для полного удаления импорта.

Answer 1

Мое решение состояло в том, чтобы вручную превратить JSX в код JS и полностью избежать автоматического перевода, это работало внутри DevTools.js:

const logMonitor = React.createElement(LogMonitor, null)
const dockMonitor = React.createElement(DockMonitor, { toggleVisibilityKey: "ctrl-h", changePositionKey: "ctrl-w" }, logMonitor)
export default createDevTools(dockMonitor)