React Webpack error "Module not found: Error: Can't resolve 'public/bundle.js' in.." / "Field 'browser' doesn't contain a valid alias configuration"

Question

While trying to run Webpack on a test file, I encountered an error.

I'm running the command:

webpack js/ClientApp2.jsx public/bundle.js --display-error-details

Here's the error:

C:\wamp64\www\tries\react\c>webpack js/ClientApp2.jsx public/bundle.js --display-error-details
Hash: dd5d9b808613387dadb9
Version: webpack 4.16.0
Time: 2310ms
Built at: 2018-07-14 08:42:21
 1 asset
[./js/ClientApp2.jsx] 1.12 KiB {0} [built]
    single entry C:\wamp64\www\tries\react\c\js\ClientApp2.jsx [0] multi ./js/ClientApp2.jsx public/bundle.js main[0]
[0] multi ./js/ClientApp2.jsx public/bundle.js 40 bytes {0} [built]
    multi entry
    + 8 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./js/ClientApp2.jsx public/bundle.js
Module not found: Error: Can't resolve 'public/bundle.js' in 'C:\wamp64\www\tries\react\c'
resolve 'public/bundle.js' in 'C:\wamp64\www\tries\react\c'
  Parsed request is a module
  using description file: C:\wamp64\www\tries\react\c\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\wamp64\www\tries\node_modules doesn't exist or is not a directory
      C:\wamp64\www\node_modules doesn't exist or is not a directory
      C:\wamp64\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\wamp64\www\tries\react\c\node_modules
        using description file: C:\wamp64\www\tries\react\c\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\wamp64\www\tries\react\c\package.json (relative path: ./node_modules/public/bundle.js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\wamp64\www\tries\react\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
              C:\wamp64\www\tries\react\c\node_modules\public\bundle.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\wamp64\www\tries\react\c\node_modules\public\bundle.js.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\wamp64\www\tries\react\c\node_modules\public\bundle.js.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\wamp64\www\tries\react\c\node_modules\public\bundle.js.json doesn't exist
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
            as directory
              C:\wamp64\www\tries\react\c\node_modules\public\bundle.js doesn't exist
          C:\wamp64\www\tries\react\node_modules\public\bundle.js doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          C:\wamp64\www\tries\react\node_modules\public\bundle.js.js doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          C:\wamp64\www\tries\react\node_modules\public\bundle.js.jsx doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          C:\wamp64\www\tries\react\node_modules\public\bundle.js.json doesn't exist
        as directory
          C:\wamp64\www\tries\react\node_modules\public\bundle.js doesn't exist
[C:\wamp64\www\tries\node_modules]
[C:\wamp64\www\node_modules]
[C:\wamp64\node_modules]
[C:\node_modules]
[C:\wamp64\www\tries\react\node_modules\package.json]
[C:\wamp64\www\tries\react\c\node_modules\public\bundle.js]
[C:\wamp64\www\tries\react\c\node_modules\public\bundle.js.js]
[C:\wamp64\www\tries\react\c\node_modules\public\bundle.js.jsx]
[C:\wamp64\www\tries\react\c\node_modules\public\bundle.js.json]
[C:\wamp64\www\tries\react\node_modules\public\bundle.js\package.json]
[C:\wamp64\www\tries\react\node_modules\public\bundle.js]
[C:\wamp64\www\tries\react\node_modules\public\bundle.js.js]
[C:\wamp64\www\tries\react\node_modules\public\bundle.js.jsx]
[C:\wamp64\www\tries\react\node_modules\public\bundle.js.json]
 @ multi ./js/ClientApp2.jsx public/bundle.js main[1]

Here's the file: ClientApp2.jsx

import React from 'react';
import { render } from 'react-dom';

const ce = React.createElement;
const MyTitle = function yy(props) {
  return ce(
    "div",
    null,
    ce("h1", { style: { color: props.color }, z: props.z }, props.title)
  );
};

const MyFirstComponent = function zz() {
  return ce(
    "div",
    { id: "iiiddd" },
    ce(MyTitle, { title: "mash!", color: "red", z: 55 }),
    ce(MyTitle, { title: "mash!", color: "red", z: 55 }),
    ce(MyTitle, { title: "mash!", color: "red", z: 55 })
  );
};

render(ce(MyFirstComponent), document.getElementById("app"));

Does anyone have any idea what's going on, how to get rid of the "Field 'browser' doesn't contain a valid alias configuration" thing?

Thank you

Answer 1

The command line work like webpack <entry> [<entry>] -o <output>, so the second file in your command will be treated as an input file, not an output file.

Add the -o flag before your second file and it will work:

webpack ./js/ClientApp2.jsx -o ./public/bundle.js