JSX parsing in React but not parsing in dependency (webpack, babel)

Question

I have a React app using JSX which works fine until I import a dependency which also uses JSX, at which point I receive the following error message:

ERROR in ./node_modules/simple-test-react-app/src/Component.js 9:9
Module parse failed: Unexpected token (9:9)
You may need an appropriate loader to handle this file type.
| 
|   render() {
>       return <div>I'm a super simple thing!</div>
|   }
| }
 @ ./src/App.js 4:0-46
 @ multi (webpack)-dev-server/client?http://localhost:3101 ./src/App.js

The interesting thing is that the JSX parses just fine everywhere EXCEPT for the dependency. I suspect this probably has something to do with how webpack and/or babel are configured, but after a lengthy search, I'm as lost as ever. It's also possible I need to fix something in the dependency (which is also mine).

Here's a link to a barebones app github repo that exhibits the problem. And here's a link to the dependency . For simplicity, I've also included some code snippets below (from the parent, NOT the dependency):

App.js (if I remove the 3rd import statement, is parses just fine)

import React from "react";
import ReactDOM from "react-dom";

//Problem is here. The problem goes away when this is commented out.
import Component from "simple-test-react-app";

ReactDOM.render(<div>Hello world</div>, document.getElementById("app"));

Webpack.config.js

const path = require("path");
const port = 3101;
const APP_DIR = path.resolve(__dirname, "src");

const config = {
    entry: [
        APP_DIR + "/App.js",
    ],
    output: {
        filename: "app.[contenthash].js",
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    resolve: {
        extensions: [
            "*",
            ".js",
        ],
    },
    devServer: {
        compress: true,
        port: port,
    },
};

module.exports = config;

Any help would be greatly appreciated.

Answer 1

Babel doesn't process your dependency because of exclude: /node_modules/ . Remove that and it should work.