Question

我在将vue-formio导入我的vue组件时遇到问题。无法正确导入FormBuilder :(

之后：

import { FormBuilder } from 'vue-formio';

我在控制台中看到：

TypeError: Object prototype may only be an Object or null: undefined

整个错误，您可以在这里看到：see print screen TypeError: Object prototype may only be an Object or null: undefined

主要导入：

 if (document.body.classList.contains("hr:controller-requisition:action-edit")) {
  require.ensure([], () => {
    require("./views/requisition/edit.es6.js").default;
  });
}

我的formio.es6.js文件：

import Vue from "vue";
import formio from "./show.vue";
import { store } from "HRComponets/store/store.es6";

export default new Vue({
  el: "#formio-show",
  data: {},
  store,
  render(h) {
    return h(formio);
  }
});

我的vue组件文件：

嗨，大家好，需要有关vue-formio的帮助

<script>
    import { FormBuilder } from 'vue-formio';

    export default {
        name: "formioShow",
        data() {
            return  {
                schema: {},
            }
        },
        components: {
            FormBuilder
        },
    };
</script>

我的package.json文件：

{ 
  "name": "core", 
  "version": "1.0.0",
  "description": "ortal",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "start": "npm run dev",
    "prod": "webpack --config webpack.prod.js",
    "dev": "webpack --watch --progress --config webpack.dev.js",
  },
  "nyc": {
  "include": [
  "src/**/*.(js|vue)"
  ],
  "instrument": false,
  "sourceMap": false
},
"keywords": [
  "HR",
  "Syrveys"
],
"browserslist": [
  "> 2%",
  "last 3 versions",
  "not ie <= 8"
],
"devDependencies": {
  "@vue/test-utils": "^1.0.0-beta.18",
  "axios": "^0.18.0",
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.7.0",
  "babel-preset-es2015": "^6.24.1",
  "clean-webpack-plugin": "^0.1.19",
  "css-loader": "^0.28.11",
  "eslint": "^4.19.1",
  "expect": "^23.1.0",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "husky": "^1.0.0-rc.8",
  "istanbul-instrumenter-loader": "^3.0.1",
  "jsdom": "^11.11.0",
  "jsdom-global": "^3.0.2",
  "less": "^3.0.4",
  "less-loader": "^4.1.0",
  "mini-css-extract-plugin": "^0.4.0",
  "mocha": "^5.2.0",
  "mocha-webpack": "^2.0.0-beta.0",
  "node-sass": "^4.9.0",
  "nyc": "^11.8.0",
  "prettier-eslint": "^8.8.1",
  "sass-loader": "^7.0.1",
  "style-loader": "^0.21.0",
  "ts-loader": "^5.1.0",
  "typescript": "^3.0.3",
  "vue": "^2.5.16",
  "vue-loader": "^15.0.10",
  "vue-template-compiler": "^2.5.16",
  "watchfile-webpack-plugin": "0.0.4",
  "webpack": "^4.8.1",
  "webpack-cli": "^2.1.3",
  "webpack-dev-server": "^3.1.4",
  "webpack-merge": "^4.1.2",
  "webpack-notifier": "^1.6.0"
},
"dependencies": {
  "amcharts3": "github:amcharts/amcharts3",
  "eslint-plugin-vue": "^4.7.1",
  "formiojs": "^3.5.1",
  "jquery": "^3.3.1",
  "lodash": "^4.17.10",
  "moment-timezone": "^0.5.17",
  "npm": "^6.4.1",
  "numeral": "^2.0.6",
  "vee-validate": "^2.1.0-beta.8",
  "vue-formio": "^3.0.0",
  "vue-moment": "^4.0.0-0",
  "vue-multiselect": "^2.1.0",
  "vue-numerals": "0.0.2",
  "vue-pdf": "^3.3.1",
  "vue-upload-component": "^2.8.9",
  "vue-wysiwyg": "^1.7.2",
  "vue2-dropzone": "^3.2.2",
  "vuelidate": "^0.7.4",
  "vuenut": "^0.2.2",
  "vuex": "^3.0.1",
  "webpack-node-externals": "^1.7.2"
  }
}

我的webpack配置文件：

const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");

const config = {
  entry: {
    core: "./src/AppBundle/VueComponents/main.es6.js",
    hr: "./src/HRBundle/VueComponents/main.es6.js",
    pm: "./src/PerformanceManagementBundle/VueComponents/main.es6.js"
  },
  output: {
    filename: "[name]-app.js",
    path: __dirname + "/web/assets/core/js/",
    hotUpdateChunkFilename: "../webpack-hot-reload/hot-update.js",
    hotUpdateMainFilename: "../webpack-hot-reload/Updatehot-update.json",
    publicPath: "/assets/core/js/"
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000,
    ignored: /node_modules/
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.es6.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HTMLWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  externals: {
     jquery: "jQuery"
  },
  resolve: {
     alias: {
      vue: "vue/dist/vue.js",
      HRComponets: path.resolve(__dirname, "./src/HRBundle/VueComponents")
    },
    extensions: ["*", ".js", ".vue", ".json", ".ts"]
  }
};

module.exports = config;

将Vue-Formio导入我的Vue模板时输入错误

0 个答案: