React + TypeScript
пакет. 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"
}
}
Дерево каталогов
.
├── 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
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 ./ и в консоли браузера:
external "classNames":1
Uncaught ReferenceError: classNames is not defined
Обновлено: я все еще не выяснил, что сломано, проблема cdn исправлена classNames, но все еще есть ошибка nanoid, а также эта проблема опубликовано , может быть, что-то не так в webpack.config.json, так как я не понимаю, что такое веб-пакет и как он работает
спасибо @Hassaan Tauqir и @Klas Mellbourn
Обновлено : Я изменил external поле
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
те же ошибки с @types/nanoid и @types/lodash.escaperegexp