CODEWITHSUNDEEP
reactjstypescriptwebpack
zhyd1997
zhyd1997

Reputation: 175

webpack Module not found: Error: Can't resolve classNames

  1. React + TypeScript

  2. 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"
    }
}

  3. Directories tree

    .
├── 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
  1. webpack.config.js 
    // 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"
        }
    };

http-server ./ and in Brower console:

external "classNames":1

Uncaught ReferenceError: classNames is not defined

Updated: I still didn't figure out what broken, the cdn ways fixed classNames problem but there is still nanoid error, and also this issue posted, maybe there is something wrong in webpack.config.json, since I don't understand what is webpack and how it works

thanks @Hassaan Tauqir and @Klas Mellbourn

Updated: I modified externalfield

webpack --display-error-details

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

same errors with @types/nanoid and @types/lodash.escaperegexp

Upvotes: 0

Views: 3700

Answers (1)

Klas Mellbourn
Klas Mellbourn

Reputation: 44437

Unless you are really interested in low level optimizations, you shouldn't have to fiddle with stuff like webpack these days. To quickly create a react app, use create-react-app. Like this (specifying that you want TypeScript):

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

then

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

Then start adding code that uses classnames

Using that method, I've set up a project with a working usage of classnames

Upvotes: 2

Related Questions