Reactjs 未找到网页包模块：错误：Can'；无法解析类名

React+TypeScript

package.json

{

"license": "MIT",
"keywords": [
    "react",
    "typescript"
],
"peerDependencies": {
    "react": "16.13.1"
},
"devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.9.0",
    "@testing-library/react": "^10.0.1",
    "@types/jest": "^25.1.4",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "babel-jest": "^25.2.3",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-react": "^7.19.0",
    "jest": "^25.2.3",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-test-renderer": "^16.13.1",
    "source-map-loader": "^0.2.4",
    "ts-jest": "^25.2.1",
    "ts-loader": "^6.2.2",
    "typescript": "^3.8.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^3.3.11",
    "webpack-stream": "^5.1.1"
},
"dependencies": {
    "@types/classnames": "^2.2.10",
    "@types/lodash.escaperegexp": "^4.1.6",
    "@types/nanoid": "^2.1.0",
    "@types/prop-types": "^15.7.3",
    "@types/react": "^16.9.26",
    "@types/react-dom": "^16.9.5"
    }
}

目录树

webpack.config.js

http服务器。/

在浏览器控制台中：

外部“类名”：1

未捕获引用错误：未定义类名

更新： 我仍然没有弄清楚是什么坏了，cdn方法修复了

类名

问题，但是仍然存在

nanoid

错误，并且还发布了一篇文章，可能是

webpack.config.json

中出现了一些错误，因为我不理解什么是webpack以及它是如何工作的

谢谢@Hassaan Taukir和@Klas Mellbourn

更新：我修改了

外部

字段

webpack--显示错误详细信息

---

与

@types/nanoid

和

@types/lodash.escaperegexp

相同的错误，除非你真的对低级优化感兴趣，否则这些天你不应该摆弄像webpack这样的东西。要快速创建react应用程序，请使用。如下所示（指定要使用TypeScript）：

然后

然后开始添加使用

类名的代码

使用这种方法，我已经设置了
，除非你真的对低级优化感兴趣，否则这些天你不应该摆弄像webpack这样的东西。要快速创建react应用程序，请使用。如下所示（指定要使用TypeScript）：

然后

然后开始添加使用
类名的代码

使用该方法，我设置了
为什么要在外部添加类名？您是否使用CDN导入它？此外，包的名称是classnames而不是classnames，因此它应该是externals:{“classnames”：“classnames”}。请看这份文件@HassaanTauqir我尝试了
externals:{'classnames'：'classnames'}
并打开chrome控制台，然后没有找到类名。我必须再次问，为什么要使用externals？我认为错误是存在的，因为类名不再是包的一部分。另外，如果可能，请提供堆栈跟踪的完整错误。它位于我的
节点_模块中，我喜欢在本地安装模块，非常感谢，也许这是我的配置问题@hassantauqirusing externals将从你的网页包包中删除一个包，因此在运行时它将不可用，除非您使用CDN或外部源使其在运行时环境中可用，请参阅第一条注释中提供的链接，否则如果您在节点\ U模块内使用包，则需要删除外部。为什么要在外部添加类名？您是否使用CDN导入它？此外，包的名称是classnames而不是classnames，因此它应该是externals:{“classnames”：“classnames”}。请看这份文件@HassaanTauqir我尝试了
externals:{'classnames'：'classnames'}
并打开chrome控制台，然后没有找到类名。我必须再次问，为什么要使用externals？我认为错误是存在的，因为类名不再是包的一部分。另外，如果可能，请提供堆栈跟踪的完整错误。它位于我的
节点_模块中，我喜欢在本地安装模块，非常感谢，也许这是我的配置问题@hassantauqirusing externals将从你的网页包包中删除一个包，因此在运行时它将不可用，除非您使用CDN或外部源使其在运行时环境中可用，请参阅第一条注释中提供的链接，否则如果您在节点模块内使用包，则需要删除外部。除了
@types/classnames
之外，还需要
类名
？让我试试看，我用
npm I classnames——save
和
tsc
，
npx webpack
，然后classames没有定义，不，我相信如果你想要一个react和typseccript项目，它可以顺利运行，我强烈推荐创建react应用程序。您可以像这样安装它
npx create react app--template typescript project name
。使用该方法，我已经设置了一个项目，其工作用法为
classnames
，除了
@types/classnames
？让我试试看，我用
npm I classnames——save
和
tsc
，
npx webpack
，然后classames没有定义，不，我相信如果你想要一个react和typseccript项目，它可以顺利运行，我强烈推荐创建react应用程序。您可以这样安装它
npx create react app--template typescript project name
。使用该方法，我在这里设置了一个工作用法为
classnames
的项目
    .
├── README.org
├── babel.config.js
├── dist
│   ├── bundle.js
│   └── bundle.js.map
├── index.html
├── jest.config.js
├── node_modules [627 entries exceeds filelimit, not opening dir]
├── package-lock.json
├── package.json
├── src
│   ├── component
│   │   ├── Action.tsx
│   │   ├── DualListBox.tsx
│   │   ├── Filter.tsx
│   │   ├── ListBox.tsx
│   │   ├── lang
│   │   ├── shapes
│   │   └── util
│   ├── index.tsx
│   ├── less
│   │   └── react-dual-listbox.less
│   └── scss
│       └── react-dual-listbox.scss
├── tree.txt
├── tsconfig.json
└── webpack.config.js

9 directories, 18 files

    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const path = require('path');

    module.exports = {
        mode: "development",

        devtool: "source-map",

        entry: './src/index.tsx',
        module: {
            rules: [
                {
                    test: /\.(t|j)sx?$/,
                    use: ['ts-loader', 'eslint-loader'],
                    exclude: /node_modules/,
                },
                {
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "source-map-loader",
                },
                {
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                }
            ]
        },
        resolve: {
            extensions: ['.tsx', '.ts', '.js', 'jsx'],
        },
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        externals: {
            "react": "React",
            "react-dom": "ReactDOM",
            // "nanoid": "nanoid",
            // "classnames": "classNames",
            // "lodash.escaperegexp": "escapeRegExp"
        }
    };

ERROR in ./src/component/DualListBox.tsx
Module not found: Error: Can't resolve 'nanoid' in '/Users/bunny/SakurajimaMai/ts/src/component'
resolve 'nanoid' in '/Users/bunny/SakurajimaMai/ts/src/component'
  Parsed request is a module
  using description file: /Users/bunny/SakurajimaMai/ts/package.json (relative path: ./src/component)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/bunny/SakurajimaMai/ts/src/component/node_modules doesn't exist or is not a directory
      /Users/bunny/SakurajimaMai/ts/src/node_modules doesn't exist or is not a directory
      /Users/bunny/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/bunny/SakurajimaMai/ts/node_modules
        using description file: /Users/bunny/SakurajimaMai/ts/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/bunny/SakurajimaMai/ts/package.json (relative path: ./node_modules/nanoid)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
      looking for modules in /Users/bunny/SakurajimaMai/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
              /Users/bunny/SakurajimaMai/ts/node_modules/nanoid doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/bunny/SakurajimaMai/ts/node_modules/nanoid.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/bunny/SakurajimaMai/ts/node_modules/nanoid.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
              /Users/bunny/SakurajimaMai/ts/node_modules/nanoid.js doesn't exist
            jsx
              Field 'browser' doesn't contain a valid alias configuration
          /Users/bunny/SakurajimaMai/node_modules/nanoid doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
              /Users/bunny/SakurajimaMai/ts/node_modules/nanoidjsx doesn't exist
          /Users/bunny/SakurajimaMai/node_modules/nanoid.tsx doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
            as directory
              /Users/bunny/SakurajimaMai/ts/node_modules/nanoid doesn't exist
          /Users/bunny/SakurajimaMai/node_modules/nanoid.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/bunny/SakurajimaMai/node_modules/nanoid.js doesn't exist
        jsx
          Field 'browser' doesn't contain a valid alias configuration
          /Users/bunny/SakurajimaMai/node_modules/nanoidjsx doesn't exist
        as directory
          /Users/bunny/SakurajimaMai/node_modules/nanoid doesn't exist
[/Users/bunny/SakurajimaMai/ts/src/component/node_modules]
[/Users/bunny/SakurajimaMai/ts/src/node_modules]
[/Users/bunny/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/bunny/SakurajimaMai/node_modules/package.json]
[/Users/bunny/SakurajimaMai/ts/node_modules/nanoid]
[/Users/bunny/SakurajimaMai/ts/node_modules/nanoid.tsx]
[/Users/bunny/SakurajimaMai/ts/node_modules/nanoid.ts]
[/Users/bunny/SakurajimaMai/node_modules/nanoid/package.json]
[/Users/bunny/SakurajimaMai/ts/node_modules/nanoid.js]
[/Users/bunny/SakurajimaMai/node_modules/nanoid]
[/Users/bunny/SakurajimaMai/ts/node_modules/nanoidjsx]
[/Users/bunny/SakurajimaMai/node_modules/nanoid.tsx]
[/Users/bunny/SakurajimaMai/node_modules/nanoid.ts]
[/Users/bunny/SakurajimaMai/node_modules/nanoid.js]
[/Users/bunny/SakurajimaMai/node_modules/nanoidjsx]
 @ ./src/component/DualListBox.tsx 7:0-28 52:35-41
 @ ./src/index.tsx

npx create-react-app --template typescript project-name

cd project-name
yarn add classnames
yarn add -D @types/classnames
yarn start