JSX syntax inside custom node_module cannot be parsed

Question

I have a PARENT project (UI written using React) that imports its Redux store from an IMPORTED npm package.

index.js PARENT project:

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')
)

When custom-store package is executed as a standalone project. The file DevTools.js parses correctly.

But when custom-store package is merely a package imported inside node_modules of the PARENT project that is being executed, I am seeing this error:

./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 IMPORTED project:

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 IMPORTED project:

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>
)

NOTES:

The custom package contains some JSX code used by redux-devtools and thus the error You may need an appropriate loader to handle this file type..

Possible cause may be some missing preset (e.g. es2015, react) in .babelrc that prevents parsing JSX files.

I would like to use the redux-devtools in the PARENT project for debugging purpose rather than just deleting the import completely.

At the moment I don't have Babel configured for the project, but I suspect that configuring it might help me to get rid of this error — Peter G., Jan 05 '18 at 08:44

Peter G. · Accepted Answer · 2018-01-06T06:46:07.743

0

My solution was to manually turn the JSX to JS code and avoiding automatic translation completely, this worked inside DevTools.js:

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

edited Jan 06 '18 at 06:46

answered Jan 05 '18 at 10:43

Peter G.

7,816
20
80
154

JSX syntax inside custom node_module cannot be parsed

1 Answers1