Question

我一直试图同时使用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()
    ]
};

Answer 1

我的React和React-Dom已过时，我使用npm upgrade react react-dom对其进行了修复。

未被捕获的TypeError：Object（...）不是React，Formik和Webpack的函数

1 个答案: