Webpack packaging ReactDOM causing loader error

Question

When I run webpack --mode development, I get the following error:

Edit A comment requested to see my .babelrc, added below - I've tried all combinations of index and app files as both, or each, as .jsx files, but to no avail. - I've also tried removing and readding all the node modules as latest version for node (v10.x.x)

ERROR in ./src/index.js 4:16
  Module parse failed: Unexpected token (4:16)
  You may need an appropriate loader to handle this file type.
  | import ReactDOM from "react-dom";
  | import app from "./app.js";
 ReactDOM.render(<app />, document.getElementById("root"));

app.js

import React, {Component} from "react";
import {hot} from "react-hot-loader";
import "./app.css";

class app extends Component{
  render(){
    return(
      <div className="app">
        <h1> Hello, World! </h1>
      </div>
    );
  }
}

export default app;

index.js

import React from "react";
import ReactDOM from "react-dom";
import app from "./app.js";
ReactDOM.render(<app />, document.getElementById("root"));

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.jsx",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /css\*\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://testsite.test/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-decorators",
    "transform-react-constant-elements",
    "transform-react-inline-elements"
  ]
}

I'm going to try and get this loaded on GH soon, but I'm having some real trouble with my GH account and connection on my device right now (ssh key issues). Bear with me on that, hopefully the above is enough to help.

Edit #2: Here is my github repo https://github.com/johnfwebdev/testsite.test

Most likely does not resolve your problem, but you `import {hot} from "react-hot-loader";` in your `app.js` and don't use it. — Peter Lehnhardt, May 02 '19 at 14:53
Also name your react components with capital first letters (https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters). Maybe this resolves your issue. — Peter Lehnhardt, May 02 '19 at 14:56
What does your babelrc look like? Have you tried renaming `index.js` -> `index.jsx`? — sliptype, May 02 '19 at 15:03
@PeterLehnhardt I updated all the locations of 'app' and changed to 'App' and removed the hot loader, unfortunately no go. — jFasaJr, May 02 '19 at 15:06
@sliptype I did try this, and app.js as app.jsx, however it produces a different error for Webpack: > ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/john.fasano/Desktop/Projects/testsite.test' — jFasaJr, May 02 '19 at 15:07
You should rename you class to `App` always capitalizing the first letter and on your index.js type `import { App } from "./app.js";` — Andre F, May 02 '19 at 15:29
@JohnFasano [check this](https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b) — Andre F, May 02 '19 at 15:32
@AndreF Tried all the things in that thread, and it was really close to my situation, but still getting the error. — jFasaJr, May 02 '19 at 15:56
So at this point I'm completely stumped. I'm going to run a quick 'create-react-app' in a throw away project to see if it works, and if not, maybe it's an environment problem? /Shrug — jFasaJr, May 03 '19 at 15:56

score 1 · Answer 1 · answered May 02 '19 at 16:00

1

transform react jsx with babel like this, give it a try

.babelrc

{
  "presets": [["@babel/preset-env"]],
  "plugins": [
    "@babel/plugin-transform-react-jsx"
  ]
}

answered May 02 '19 at 16:00

SIMDD

615
5
15

Tried adding this to my babelrc file, and still showing the same error. – jFasaJr May 02 '19 at 19:26

score 0 · Accepted Answer · answered May 03 '19 at 16:45

0

I figured it out everyone.... :facepalm:

webpack-config.js should have been named webpack.config.js

answered May 03 '19 at 16:45

jFasaJr

497
4
17

Webpack packaging ReactDOM causing loader error

2 Answers2