Webpack + React: Webpack builds from my node_modules folder in correct order in one place, and incorrect order anywhere else

Question

I'm very new to Webpack and React. I'm just trying to get a simple Webpack/Babel/React template running properly so I can just grab it and start working on the app instead of worrying about setting it up every time. I'm running into a strange problem, though.

I made a Hello World with React using Webpack, Node, and Babel that works. The thing is, it ONLY works in that specific directory that I made it in. If I copy/paste everything and try running my NPM script ANYWHERE else, I get an 'unknown template' error in my JSX file. After some investigating, I'm pretty sure the problem is that for some reason Webpack builds things in a different order when I run everything outside of my original directory.

This is the output I get from Webpack that works:

   [8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built]
  [16] ./node_modules/react/lib/React.js 5.08 kB {0} [built]
  [49] ./node_modules/react/react.js 56 bytes {0} [built]
  [82] multi ./main.js 28 bytes {0} [built]
  [83] ./src/main.js 581 bytes {0} [built]
  [99] ./node_modules/react-dom/index.js 59 bytes {0} [built]

And this is the output I get when it DOESN'T work.

   [8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built]
  [16] ./node_modules/react/lib/React.js 5.08 kB {0} [built]
  [81] multi ./main.js 28 bytes {0} [built]
  [82] ./src/main.js 272 bytes {0} [built]
  [83] ./node_modules/react/react.js 56 bytes {0} [built]

As you can see, in the build that doesn't work, the line [83] ./node_modules/react/react.js 56 bytes {0} [built]

comes AFTER webpack builds my main.js, while in the one that works, it comes before.

Is there a reason this is happening, and a good way to fix this? I'm pretty lost. Here is my webpack.config.js file:

const path = require('path');

module.exports = {
    context: path.join(__dirname + '/src'),
    entry: [
        './main.js'
    ],
    output: {
        path: path.join(__dirname + '/www'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ],
            },
        ],
    },
    resolve: {
        modules: [
            path.join(__dirname + '/node_modules')
        ],
    },
};

EDIT: Someone asked for my package.json file so here it is:

{
  "name": "simple_react_setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "express": "^4.15.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.5",
    "webpack-dev-middleware": "^1.12.0"
  }
}

When I copy/paste everything to a new directory I am literally just copying the entire directory, so there is no change in code at all. I made sure that npm install is run. The error I get is that there's an unknown template in my JSX file:

ERROR in ./src/Counter.js
Module build failed: SyntaxError: Unexpected token (16:12)

  14 |     render() {
  15 |         return (
> 16 |             <button

Thank you!

Answer 1

SOLVED! Turns out I was just not transferring my .babelrc file over to the other directories when copy/pasting everything. I think because the filename starts with a . in front of it my Macbook was treating it as a hidden file, and I just didn't notice it until now. Fun aside, here's what I have in my .babelrc file:

{
  "presets": [
    ["latest", { "modules": false }],
    "react"
  ]
}