Vue3从Vue2 Uncaught迁移: isBuiltInDirective不是一个函数

Question

我正在尝试将一个Vue2应用程序迁移到Vue3，但是我遇到了一个我还没有在其他地方讨论过的问题。

在构建应用程序时，我不会收到任何错误，但我确实会收到以下警告：

WARNING in ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 4:0-130
export 'normalizeProps' (reexported as 'normalizeProps') was not found in '@vue/shared' (possible exports: EMPTY_ARR, EMPTY_OBJ, NO, NOOP, PatchFlagNames, babelParserDefaultPlugins, camelize, capitalize, def, escapeHtml, escapeHtmlComment, extend, generateCodeFrame, getGlobalThis, hasChanged, hasOwn, hyphenate, invokeArrayFns, isArray, isBooleanAttr, isDate, isFunction, isGloballyWhitelisted, isHTMLTag, isIntegerKey, isKnownAttr, isMap, isModelListener, isNoUnitNumericStyleProp, isObject, isOn, isPlainObject, isPromise, isReservedProp, isSSRSafeAttrName, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, isVoidTag, looseEqual, looseIndexOf, makeMap, normalizeClass, normalizeStyle, objectToString, 
parseStringStyle, propsToAttrMap, remove, slotFlagsText, stringifyStyle, toDisplayString, toHandlerKey, toNumber, toRawType, toTypeString)
 @ ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 1:0-381 2:0-34 2:0-34 195:13-21 299:6-10 403:6-32 509:15-30 547:8-12 566:4-12 705:18-29 775:21-39 778:47-51 785:47-51 792:47-51 806:19-37 810:45-49 816:2-17 817:2-11 822:4-15 849:28-36 851:28-34 881:6-7 881:8-22 902:77-97 1076:4-8 1078:4-8 1231:21-39 1232:18-36 1235:4-13 1276:23-28 1278:32-40 1280:33-57 1286:10-28 1286:36-58 1288:10-14 1295:10-28 1295:36-58 1300:13-24 1595:45-49 1879:33-47 1883:43-66 1971:6-19 1979:8-12 1987:8-12 1992:8-12 2004:6-10 2011:4-8
 @ ./src/app.js 3:0-32 98:10-19

WARNING in ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 3362:6-24
export 'isBuiltInDirective' (imported as 'isBuiltInDirective') was not found in '@vue/shared' (possible exports: EMPTY_ARR, EMPTY_OBJ, NO, NOOP, PatchFlagNames, babelParserDefaultPlugins, camelize, capitalize, def, escapeHtml, escapeHtmlComment, extend, generateCodeFrame, getGlobalThis, hasChanged, hasOwn, hyphenate, invokeArrayFns, isArray, isBooleanAttr, isDate, isFunction, isGloballyWhitelisted, isHTMLTag, isIntegerKey, isKnownAttr, isMap, isModelListener, isNoUnitNumericStyleProp, isObject, isOn, isPlainObject, isPromise, isReservedProp, isSSRSafeAttrName, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, isVoidTag, looseEqual, looseIndexOf, makeMap, normalizeClass, normalizeStyle, objectToString, parseStringStyle, propsToAttrMap, remove, slotFlagsText, stringifyStyle, toDisplayString, toHandlerKey, toNumber, toRawType, toTypeString)
 @ ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 1:0-381 2:0-34 2:0-34 195:13-21 299:6-10 403:6-32 509:15-30 547:8-12 566:4-12 705:18-29 775:21-39 778:47-51 785:47-51 792:47-51 806:19-37 810:45-49 816:2-17 817:2-11 822:4-15 849:28-36 851:28-34 881:6-7 881:8-22 902:77-97 1076:4-8 1078:4-8 1231:21-39 1232:18-36 1235:4-13 1276:23-28 1278:32-40 1280:33-57 1286:10-28 1286:36-58 1288:10-14 1295:10-28 1295:36-58 1300:13-24 1595:45-49 1879:33-47 1883:43-66 1971:6-19 1979:8-12 1987:8-12 1992:8-12 2004:6-10 2011:4-8
 @ ./src/app.js 3:0-32 98:10-19

WARNING in ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 228:39-57
export 'includeBooleanAttr' (imported as 'includeBooleanAttr') was not found in '@vue/shared' (possible exports: EMPTY_ARR, EMPTY_OBJ, NO, NOOP, PatchFlagNames, babelParserDefaultPlugins, camelize, capitalize, def, escapeHtml, escapeHtmlComment, extend, generateCodeFrame, getGlobalThis, hasChanged, hasOwn, hyphenate, invokeArrayFns, isArray, isBooleanAttr, isDate, isFunction, isGloballyWhitelisted, isHTMLTag, isIntegerKey, isKnownAttr, isMap, isModelListener, isNoUnitNumericStyleProp, isObject, isOn, isPlainObject, isPromise, isReservedProp, isSSRSafeAttrName, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, isVoidTag, looseEqual, looseIndexOf, makeMap, normalizeClass, normalizeStyle, objectToString, parseStringStyle, propsToAttrMap, remove, slotFlagsText, stringifyStyle, toDisplayString, toHandlerKey, toNumber, toRawType, toTypeString)
 @ ./src/app.js 3:0-32 98:10-19

WARNING in ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 279:14-32
export 'includeBooleanAttr' (imported as 'includeBooleanAttr') was not found in '@vue/shared' (possible exports: EMPTY_ARR, EMPTY_OBJ, NO, NOOP, PatchFlagNames, babelParserDefaultPlugins, camelize, capitalize, def, escapeHtml, escapeHtmlComment, extend, generateCodeFrame, getGlobalThis, hasChanged, hasOwn, hyphenate, invokeArrayFns, isArray, isBooleanAttr, isDate, isFunction, isGloballyWhitelisted, isHTMLTag, isIntegerKey, isKnownAttr, isMap, isModelListener, isNoUnitNumericStyleProp, isObject, isOn, isPlainObject, isPromise, isReservedProp, isSSRSafeAttrName, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, isVoidTag, looseEqual, looseIndexOf, makeMap, normalizeClass, normalizeStyle, objectToString, parseStringStyle, propsToAttrMap, remove, slotFlagsText, stringifyStyle, toDisplayString, toHandlerKey, toNumber, toRawType, toTypeString)
 @ ./src/app.js 3:0-32 98:10-19

然后，当我运行该应用程序时，我会在控制台中得到以下错误：

runtime-core.esm-bundler.js:2740 Uncaught TypeError: (0 , _vue_shared__WEBPACK_IMPORTED_MODULE_1__.isBuiltInDirective) is not a function
    at validateDirectiveName (runtime-core.esm-bundler.js:2740:27)
    at Object.directive (runtime-core.esm-bundler.js:4369:21)
    at InstallOGComponents (index.js:155:13)
    at app.js:125:20
    at app.js:287175:3
    at app.scss?3823:1:1

在InstallOGComponents文件中，当试图向应用程序添加PrimeVue指令时会发生错误。

import PTooltip from 'primevue/tooltip';

app.directive('tooltip', PTooltip);

我很困惑，因为警告来自Vue文件，无法引用其他Vue文件中的函数，如果Vue框架无法正常工作，我希望在我的google搜索中看到这一点，而我没有。警告是正确的，函数不存在。所以我怀疑我的Webpack配置可能有问题

var path = require('path');
var webpack = require("webpack");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var WebpackShellPluginNext = require("webpack-shell-plugin-next");
var WriteFileWebpackPlugin = require("write-file-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader')
//var VueLoaderPlugin = require('vue-loader/lib/plugin');

/********************
 * ALL ENVIRONMENTS *
 ********************/
module.exports = {
    entry: ['./src/app.js', './src/css/app.scss'],
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        filename: 'app.js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    'scss': 'vue-style-loader!css-loader!sass-loader',
                    'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                    'js': 'babel-loader?presets[]=@babel/preset-env'
                }
                // other vue-loader options go here
            }
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: '/node_modules/',
        }, {
            test: /\.css$/,
            use: [{ loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader' }],
        }, {
            test: /\.scss$/,
            use: [{ loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
        }, {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                    }
                },
            ],
            type: 'javascript/auto'
        }, {
            test: /\.(eot|ttf|woff|svg)$/i,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'fonts/[name].[ext]',
                    },
                },
            ],
        }]
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin(),
    ],
    resolve: {
        extensions: ['.js', '.ts', '.vue'],
        alias: {
            'vue$': '@vue/runtime-dom'
        },
        modules: [
            path.resolve('./src'),
            path.resolve('./node_modules'),
            path.resolve('./src/css')
        ]
    },
    performance: {
        hints: false
    },
}

下面是我的package.json片段

  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/node": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/plugin-proposal-function-bind": "^7.12.13",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-stage-0": "^7.8.3",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/compiler-sfc": "^3.0.5",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "6.23.0",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "3.1.4",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "glob": "7.1.1",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "4.12.0",
    "optimize-css-assets-webpack-plugin": "1.3.1",
    "recursive-readdir-sync": "1.0.6",
    "sass-loader": "^10.1.1",
    "shelljs": "0.7.6",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "url-parse": "^1.1.8",
    "vue-codemirror-lite": "^1.0.4",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.3.0",
    "vue-template-loader": "^1.1.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-shell-plugin-next": "^2.1.1",
    "write-file-webpack-plugin": "^4.5.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.12.13",
    "axios": "0.15.3",
    "change-case": "3.0.1",
    "chart.js": "^3.7.1",
    "debounce": "1.0.0",
    "debounce-promise": "3.0.1",
    "elasticlunr": "0.9.5",
    "font-awesome": "^4.7.0",
    "fs-extra": "^10.0.0",
    "inline-worker": "1.1.0",
    "moment": "2.17.1",
    "moment-timezone": "0.5.11",
    "mxgraph": "^4.2.2",
    "primeflex": "^2.0.0",
    "primeicons": "^5.0.0",
    "primevue": "^3.15.0",
    "qs": "6.4.0",
    "vee-validate": "2.0.0-rc.14",
    "vue": "^3.2.37",
    "vue-async-computed": "3.0.1",
    "vue-material": "^0.7.4",
    "vue-router": "^4.0.16",
    "vuetify": "^2.4.11",
    "x2js": "^3.1.1"
  }

任何帮助都是非常感谢的。

Answer 1

我能够通过以下方式解决上述错误："^3.0.5“-> @vue/编译程序-sfc”："^3.2.37“