我一直在尝试使用 Formik 和 React-Form-Hooks，但是当编译时这两个库都会抛出相同的错误。我的语言是 TypeScript，转译器是 Babel。
Uncaught TypeError: Object(...) is not a function
发生在以下位置：
const FormGlobalContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["createContext"])(null);
利用 Formik 的 FormikContext。我只是分别导入了它们，除此之外没有做任何事情，因此我没有要展示的代码。
package.json:
{
"name": "x",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "babel --watch src --out-dir dist --extensions .ts,.tsx",
"build": "webpack --mode development",
"tsc": "tsc"
},
"devDependencies": {
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/plugin-syntax-dynamic-import": "^7.7.4",
"@babel/preset-env": "^7.7.6",
"@babel/preset-typescript": "^7.7.4",
"@babel/plugin-proposal-async-generator-functions": "^7.7.4",
"@babel/plugin-transform-async-to-generator": "^7.7.4",
"@babel/plugin-transform-regenerator": "^7.7.5",
"@babel/polyfill": "^7.7.0",
"@babel/preset-react": "^7.7.4",
"@types/jquery": "^3.3.31",
"@types/lodash": "^4.14.149",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/underscore": "^1.9.4",
"@types/yup": "^0.26.27",
"@types/delaunator": "^3.0.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.6",
"babel-minify-webpack-plugin": "^0.3.1",
"react-hot-loader": "^4.12.18",
"typescript": "^3.7.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"babel-polyfill": "^6.26.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"underscore": "^1.9.1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"react": "^15.1.1",
"react-dom": "^15.1.1",
"react-hook-form": "^3.29.4",
"yup": "^0.28.0"
}
}
.babelrc
{
"presets": [
["@babel/env", { "modules": false }],
"@babel/preset-react",
"@babel/typescript"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-transform-regenerator",
"@babel/plugin-proposal-async-generator-functions",
"@babel/plugin-transform-async-to-generator"
]
}
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
watch: true,
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
sideEffects: true,
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
output: {
filename: 'tplanner.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [
new MinifyPlugin({}, {}),
new webpack.HotModuleReplacementPlugin()
]
};