React Webpack 错误“找不到模块：错误：无法解析 'public/bundle.js' in..”/“字段 'browser' 不包含有效的别名配置”

Posted 2023-03-07

【中文标题】React Webpack 错误“找不到模块：错误：无法解析 \'public/bundle.js\' in..”/“字段 \'browser\' 不包含有效的别名配置”

【英文标题】：React Webpack error "Module not found: Error: Can't resolve 'public/bundle.js' in.." / "Field 'browser' doesn't contain a valid alias configuration"React Webpack 错误“找不到模块：错误：无法解析 'public/bundle.js' in..”/“字段 'browser' 不包含有效的别名配置”

【发布时间】：2018-12-22 17:55:10

【问题描述】：

尝试在测试文件上运行 Webpack 时， 我遇到了错误。

我正在运行命令：

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

这是错误：

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]

这是文件： 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"));

有谁知道发生了什么，如何摆脱“字段'浏览器'不包含有效的别名配置”的事情？

谢谢

【问题讨论】：

你必须写webpack <entry> -o <output>，即webpack ./js/ClientApp2.jsx -o ./public/bundle.js。

【参考方案1】：

命令行的工作方式类似于webpack <entry> [<entry>] -o <output>，因此命令中的第二个文件将被视为输入文件，而不是输出文件。

在您的第二个文件之前添加-o 标志，它将起作用：

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