An error occurs after vue-Loader is upgraded. Procedure

Upgrade “vue-loader”: “^16.1.2” after upgrade error

 Error: Cannot find module 'vue-loader/lib/plugin'
Copy the code

Solution: Modify the VueLoaderPlugin in the WebPack configuration file

Modify before:

const VueLoaderPlugin = require('vue-loader/lib/plugin')
Copy the code

Revised:

const { VueLoaderPlugin } = require('vue-loader')
Copy the code

Instantiate the Vue mode

Modify before:

import Vue from 'vue'
new Vue({
    el: '#J_app',
    router,
    components: { Index },
    template: '<Index/>'
})
Copy the code

Revised:

import {createApp} from 'vue'
const app = createApp({
    router,
    components: { Index },
    template: '<Index/>'
})

app.mount('#J_app')
Copy the code

V – for modification

Modify before:

<div v-for="(item,index) in submitData" class="item">
Copy the code

Revised:

<template v-for="(item,index) in submitData" :key="item.id">
    <div class="item"></div>
</template>
Copy the code

Module not found: Error: Can’t resolve ‘vue’

Error after upgrade:

 ERROR in ./node_modules/vue3-ts-flow-components/dist/index.js
    Module not found: Error: Can't resolve 'vue' in 'D:\code\erp\Public\Erp\node_modules\vue3-ts-flow-components\dist'
Copy the code

Solution: Change ‘vue’: ‘vue/dist/vue.esm.js’ to ‘vue’: ‘vue/dist/vue.esm.js’

      alias: {The resolve.alias configuration item maps the original import path to a new one using an alias.
           'vue': 'vue/dist/vue.esm-bundler.js'.The '@': path.resolve(__dirname,'.. /src'),
            The '#': path.join(process.env.WORKDATA_PATH,'raw'),
            'jquery': path.join(commonDir,'assets/js/jquery - 2.1.1. Js'),
            '_': path.join(commonDir,'assets/js/lodash.js'),}Copy the code

Vue – select version is low

Solution: Download the source code and upgrade yourself
Vue-select has been released to NPM and can be installed by using NPM install vue3-select

TypeError: This.$on is not a function. TypeError: This

Vue3 removes the on, ON, on, off, and $once methods from the instance
Migration strategy: Replace the existing Event Hub with an external library that implements the event emitter interface

External library: github.com/developit/m…

Upgrade VUE-SELECT: Uncaught TypeError: Cannot read property ‘_c’ of undefined

NPM install vue @ ^ 3.1.1 – D
NPM install vue – loader @ ^ 16.1.2 – D
npm install @vue/compiler-sfc -D

Vue3 removed propsData

This $options. PropsData. HasOwnProperty (‘ reduce ‘) for the Object. The prototype. The hasOwnProperty. Call (this. $options. Props, ‘reduce’)

V – model change

Prop:value -> modelValue;
The event:input -> update:modelValue;

Vue3 removed vuue.config. productionTip

Vue3, the render function no longer accepts any arguments

Before the upgrade:

import Vue from "vue";
import Dev from "./Dev.vue";

new Vue({
  render: h= > h(Dev)
}).mount('#app')
Copy the code

After the upgrade:

import {createApp , h } from "vue";
import Dev from "./Dev.vue";


const app = createApp({
  render: () = > h(Dev)
})

app.mount('#app')
Copy the code

$scopedSlots Vue3 removed this.

Migration strategy: replace all this.scopedSlots with this.scopedSlots

TypeError: Cannot read property ‘subTree’ of null

Causes of the problem:

In the setupStatefulComponent() method, currentInstance is assigned to instance, not null

When the code executes to the setup function of the Basetransition component of Vue, instance is null

const getCurrentInstance = () = > currentInstance || currentRenderingInstance;
Copy the code

Null because the code for 1 and 2 are not in the same vue3 code.

2 code in vue3 of vuE-select installation;
The code of 1 is in VUe3 of erp installation
Vue-select is a component installed in erp

Problem solving method

Configure externals in the webpack configuration file of vue-select

Configure peerDependencies in package.json file in case vue3 fails to be imported from outside because vue3-select is not installed in the ERP project

 "peerDependencies": {
    "vue": "^ 3. *"
  },
Copy the code

Vue3-select will call vue3 installed under erp project, that is, vue3-select and ERP use the same VUe3.

An error occurs when installing the postCSS-Loader of the latest version. Procedure

 ERROR in./packages/Toast/src/index.vue? vue&type=style&index=0&id=2b2a0962&lang=css (./node_modules/css-loader/dist/cjs.js?? ref--1-1! ./node_modules/vue-loader/dist/stylePostLoader.js! ./node_modules/postcss-loader/dist/cjs.js?? ref--1-2! ./node_modules/vue-loader/dist?? ref--9-0! ./packages/Toast/src/index.vue? vue&type=style&index=0&id=2b2a0962&lang=css)
    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    TypeError: this.getOptions is not a function
        at Object.loader (D:\code\flow-component\node_modules\postcss-loader\dist\index.js:40:24)
Copy the code

Solution: Install postCSS-Loader of an earlier version

npm uninstall postcss-loader
npm install postcss-loader@'^ 4.3.0' -D
Copy the code

Postcss – loader error

ERROR in./packages/Toast/src/index.vue? vue&type=style&index=0&id=2b2a0962&lang=css (./node_modules/mini-css-extract-plugin/dist/loader.js?? ref--1-0! ./node_modules/css-loader/dist/cjs.js?? ref--1-1! ./node_modules/vue-loader/dist/stylePostLoader.js! ./node_modules/postcss-loader/dist/cjs.js?? ref--1-2! ./node_modules/vue-loader/dist?? ref--9-0! ./packages/Toast/src/index.vue? vue&type=style&index=0&id=2b2a0962&lang=css)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid: object { postcssOptions? , execute? , sourceMap? , implementation? } at validate (D:\code\flow-component\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.loader (D:\code\flow-component\node_modules\postcss-loader\dist\index.js:43:29)
    at D:\code\flow-component\node_modules\webpack\lib\NormalModule.js:316:20
    at D:\code\flow-component\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\code\flow-component\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at processTicksAndRejections (internal/process/task_queues.js:97:5) @ ./packages/Toast/src/index.vue? vue&type=style&index=0&id=2b2a0962&lang=css 1:0-372 1:0-372
 @ ./packages/Toast/src/index.vue
 @ ./packages/Toast/src/toast.ts
 @ ./packages/Toast/index.ts
 @ ./packages/index.ts
Copy the code

Configuration before error reporting:

 {
                    test : /\.css$/.// exclude: /node_modules/,
                    use : [
                        {
                            loader: ExtractCssPlugin.loader,
                            options: {publicPath: '.. / '}}, {loader: 'css-loader'.options: { importLoaders: 1}}, {loader: 'postcss-loader'.options: {
                            plugins: (loader) = > [
                              require('autoprefixer')()]}}]},Copy the code

Configuration after error:

{
                test : /\.css$/.// exclude: /node_modules/,
                use : [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                        {
                          loader: 'postcss-loader'.options: {
                            postcssOptions: {
                              plugins: [
                                  (loader) = >require('autoprefixer')()],},},}]},Copy the code

Vue files are packed into separate. CSS files

Install and import the mini-CSS-extract-Plugin package

npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Copy the code

Configure plugins for Webpack

 new MiniCssExtractPlugin({
        filename: "index.css"
    }),
Copy the code

Configure rules for webpack

{
   test : /\.css$/,
       use : [
             {
                loader: MiniCssExtractPlugin.loader,
             },
      ]
  }
Copy the code

The CSS file is packaged into a JS file

{
                test : /\.css$/.// exclude: /node_modules/,
                use : [
                    'style-loader'./ / style - loader is the key
                    'css-loader',
                    {
                        loader: 'postcss-loader'.options: {
                            postcssOptions: {
                              plugins: [
                                  (loader) = >require('autoprefixer')()],},},}]},Copy the code

Vue – the router upgrade

Before the upgrade:

“Vue – the router” : “^ 3.5.1 track of”,

import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{path:'/uploadFile'.name:'UploadFile'.component:UploadFile
        },
        {
            path:'/importExcel'.name:'ImportExcel'.component:ImportExcel
        },
       
    ]
})

const app = createApp({
    router,
    components: { Index },
    template: '<Index/>'
})
Copy the code

After the upgrade:

npm uninstall vue-router
NPM install [email protected] – D

import { createRouter, createWebHashHistory} from 'vue-router'

export default createRouter({
    history: createWebHashHistory(),
    routes: [{path: '/'.redirect: '/uploadFile'
        },
        {
            path:'/uploadFile'.name:'UploadFile'.component:UploadFile
        },
    ]
})

const app = createApp({
    components: { Index },
    template: '<Index/>'
})

app.use(router)
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue2 upgrade Vue3

An error occurs after vue-Loader is upgraded. Procedure

Instantiate the Vue mode

V – for modification

Module not found: Error: Can’t resolve ‘vue’

Vue – select version is low

TypeError: This.$on is not a function. TypeError: This

Upgrade VUE-SELECT: Uncaught TypeError: Cannot read property ‘_c’ of undefined

Vue3 removed propsData

V – model change

Vue3 removed vuue.config. productionTip

Vue3, the render function no longer accepts any arguments

$scopedSlots Vue3 removed this.

TypeError: Cannot read property ‘subTree’ of null

Causes of the problem:

Problem solving method

An error occurs when installing the postCSS-Loader of the latest version. Procedure

Postcss – loader error

Vue files are packed into separate. CSS files

The CSS file is packaged into a JS file

Vue – the router upgrade

Vue2 upgrade Vue3

An error occurs after vue-Loader is upgraded. Procedure

Instantiate the Vue mode

V – for modification

Module not found: Error: Can’t resolve ‘vue’

Vue – select version is low

TypeError: This.$on is not a function. TypeError: This

Upgrade VUE-SELECT: Uncaught TypeError: Cannot read property ‘_c’ of undefined

Vue3 removed propsData

V – model change

Vue3 removed vuue.config. productionTip

Vue3, the render function no longer accepts any arguments

$scopedSlots Vue3 removed this.

TypeError: Cannot read property ‘subTree’ of null

Causes of the problem:

Problem solving method

An error occurs when installing the postCSS-Loader of the latest version. Procedure

Postcss – loader error

Vue files are packed into separate. CSS files

The CSS file is packaged into a JS file

Vue – the router upgrade

Related Posts

React source code bit manipulation techniques

Vue functions to achieve the tremble components

Node series – 005 – colors.js