Module parse failed: Unexpected token (7:4) You may need an appropriate loader to handle this file type

Question

Module parse failed: Unexpected token (7:4) You may need an appropriate loader to handle this file type

Error in ./REST_R/frontend/src/components/App.js 7:4 Module parse failed: Unexpected token (7:4) You may need an appropriate loader to handle this file type.

Here is such a mistake, I'm racking my head how to fix it.

Webpack.config.js

module.exports = {
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        }

    ]
}
};

File . babelrc

{
"presets": [
    "env", "react"
],
"plugins": [
    "transform-class-properties"
]
}

The file itself App.js

import React from "react";
import ReactDom from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table"

const App = () => (
    <DataProvider endpoint="api/lead/"
                  render={data => <Table data={data} /> }/>
 );

const wrapper = document.getElementById("app");

wrapper ? ReactDom.render(<App/>, wrapper) : null;

And the package file.json

{
  "name": "superlist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./REST_R/frontend/src/index.js --output ./REST_R/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./REST_R/frontend/src/index.js --output ./REST_R/frontend/static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "weak-key": "^1.0.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

0

reactjs babel webpack4

Author: 0xdb, 2018-07-25

Source

1 answers

score 1 · Answer 1

Error in the file App.js, here in this place:

const App = () => (
    <DataProvider endpoint="api/lead/"
                  render={data => <Table data={data} /> }/>
 );

A component with render propsa support accepts a function that returns a React element and calls this method instead of implementing its own visualization logic, that is, the render method. The libraries that use the rendering functions, or render propsa, are React Router and Downshift. You can read it on the official website of the React documentation: Render Props. Therefore, the question to your DataProvider component, whether it has such a prop render, and whether it accepts a function, and whether there is the necessary processing inside this component.

And a little not on your question, as a recommendation, I would like to show you how to make more readable hyphenations:

const App = () => (
  <DataProvider
    endpoint="api/lead/"
    render={data => <Table data={data} /> }
  />
);