Tag Archives: view

extract-text-webpack-plugin" loader is used without the corresponding plugin Error (Fixed)

This was a problem that had been bothering me for a long time before the release of the project was that you had to package and it was okay to package at the beginning and all of a sudden it went wrong today and the answers on the web were so weird that I didn’t have to say much about it and I went straight to the code

At first thought it was a plugin version problem some of it was

It doesn’t matter if it’s been tested later or if it’s been tested before or after
In webpack.prod.conf.js under build, you only need to modify the following configuration// extract css into its own file

new
ExtractTextPlugin({

// filename: assetsPath(‘ CSS /[name].[Contenthash]. CSS ‘),// the original configuration

filename:

utils
.
assetsPath
(
‘[name]/styles.[contenthash].css’
),
//
The changes

// Setting the following option to `false` will not extract CSS from codesplit chunks.

// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.

// It’s currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it’s `false`,

// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110

allChunks:
true,

}),

And then it’s ok

The reason for this is not clear from the Github forum. If you are interested in what appears to be a plugin patch, check it out

Error: Cannot find module’webpack/bin/config-yargs’ solution

The following error occurred while running NPM Run Dev:

Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- D:\javaProject\vue\myvue\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (D:\javaProject\vue\myvue\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\javaProject\\vue\\myvue\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Wenxindiao\AppData\Roaming\npm-cache\_logs\2020-04-22T03_06_48_257Z-debug.log

Solution:
this is because the current version of [email protected] does not support [email protected] So simply delete the current Webpack-dev-Server folder and reinstall the higher version. The steps are as follows:

    find the project folder you created, mine is D:\javaProject\vue\myvue\node_modules\webpack-dev-server, delete the webpack-dev-server folder. Run NPM I [email protected] in the current project directory, and your webpack-dev-server version will be fine. Or update directly to the latest version
npm i –-save-dev [email protected] 

Vue Error-Error message: Syntax Error: Assigning to rvalue.

At first, I thought Syntax Error was node_modules and there was another problem, so I violently deleted the node_modules folder, and then back up in the backup file. It turned out to be useless. This is a grammatical error.
Then I continued to search for information, so I found the problem on CSDN blogger: Rabbit Gone away [click to open link].
In the HTML tag, one v-model bound property value is not declared .
So the problem was solved instantly, and I read back the wrong information afterwards, which actually gave me a very clear wrong position. As shown in figure:

It seems that we still need more observation, careful deBug ah…

(Emitted value instead of an instance of Error) Error compiling template:

Conclusion: Find out if templent contains a script and remove it
Error: (Emitted value instead of an instance of Error)
Error compiling. template:
also has a paragraph Error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as

Reason: Error packaging vUE with elementUI for the first time

Module build failed Error Plugin/Preset files are not allowed to export objects, only functions (How to Fix)

As a way to make a project of nuxt, this exception occurred. Module build failed: Error: Plugin/ prefiles are not allowed to export objects, only functions : make of the following figure:

Ii. Problem Analysis and Solution: Babel version conflict, Babel dependency package is not compatible, package.json dependency package contains both Babel 7.0 version and Babel 6.0 version, the two versions are obviously incompatible, We can upgrade to Babel 7.0 version, through NPM install [email protected] command all upgrade to Babel 7.0 version, so the conflict problem of the versions can be solved.

Module parse failed:Unexpectedtoken (1:0)You may need an appropriate loader to handle this file type

And give me a lesson on the cruel reality, make robeletric before it has been a problem in the environment, the beginning the whole vue and waste on the environment for so long time
I will download the latest version of the node directly, so The Times running someone else’s project is wrong, then I did not think of to see if the environment problem, and a call to find on the net, then change a lot of things, and no
this time on the Internet to see says the latest version of the node with a lot of things are not compatible, 8. A few is relatively stable, then changed 8. A few of the node and project up
to come over for a few days, when I see some other module, when start to quote for the following error:

ERROR in ./demo03/src/app.vue
Module parse failed: /vue-tutorials/06.Router/demo03/src/app.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
 @ ./demo03/src/main.js 9:23-43

>

>

>
>
>
>
>
>
>
>
>
> loaders in webpack.config.js changed to rules

module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]

webpack1.x -> Module. loaders changed the environment for module.rules
to start the project for the first time. Version conflicts seem to solve most problems!!

VUEJS Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of

Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.

in my previous post
VUEJS project practice 5 Dialog pop-up box MessageBox (very nice bootstrap style)
has introduced a MesageBox style combined with bootstrap style
Then in the previous post
VUEJS project practice 4 custom keyboard instructions (keystrokes to get focus)
introduced a way for keystrokes to automatically get focus and trigger events.
Now when MessageBox binds Enter, an error
messagebox.vue?Cb02 :80 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.

First post the message.vue file

<template>
  <div v-key-bind-listen>
      <div class="msgBox" v-show="isShowMessageBox">
        <div class="msgBox_header">
          <div class="msgBox_title">
            <h3>{{ title }}</h3>
          </div>
        </div>

        <div class="msgBox_content">
          <p>{{ content }}</p>
        </div>

        <div class="msgBox_btns">
          <button type="button" class="btn btn-lime btn-lg" id="confirmBtn" @click="confirm"  bind_key="ENTER">确定</button>
          <button type="button" class="btn btn-dark btn-lg" id="cancelBtn" @click="cancel"  bind_key="ESC">取消</button>

        </div>

      </div>
  </div>
</template>

<script>
  export default {
    name: 'messageBox',
    data(){
      return {
        title: '',
        content: '',
        isShowMessageBox: false,
        resolve: '',
        reject: '',
        promise: '' // 保存promise对象
      }
    },
    methods: {
      close(state){
        this.model.show = false;
        if(this.model.callback){
          this.model.callback(state);
        }
      },
    // 确定,将promise断定为resolve状态
    confirm: function () {
      this.isShowMessageBox = false;
      this.resolve('confirm');
      this.remove();
    },
    // 取消,将promise断定为reject状态
    cancel: function () {
      this.isShowMessageBox = false;
      this.reject('cancel');
      this.remove();
    },
    // 弹出messageBox,并创建promise对象
    showMsgBox: function () {
      this.isShowMessageBox = true;
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      // 返回promise对象
      return this.promise;
    },
    remove: function () {
      setTimeout(() => {
        this.destroy();
      }, 300);
    },
    destroy: function () {
      this.$destroy();
      document.body.removeChild(this.$el);
    }
  }
  }
</script>

<style scoped>
  .msgBox {
    position: fixed;
    z-index: 4;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    width: 420px;
    background-color: black;
    opacity: 0.55;
  }

  .msgBox_header {
    padding: 20px 20px 0;
  }

  .msgBox_title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 26px;
    font-weight: 800;
    height: 18px;
    color: #fff;
  }

  .msgBox_content {
    padding: 30px 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 200;
  }

  .msgBox_btns {
    padding: 10px 20px 15px;
    text-align: right;
    overflow: hidden;
  }

  @keyframes show-messageBox {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;

    }
  }

  @keyframes bounce-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;

    }
  }


</style>

The V-key-bind-listen instruction defined here is used for key listening. For details, please refer to the previous blog. It would be boring to write it again.
VUEJS project practice four custom keyboard commands (keys to get focus)
When you press ESC to cancel, there is no problem
when you press ENTER to confirm, the error will appear in the newspaper
messagebox.vue?Cb02:80 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.
Error is located via console.

>
add a line of logs in the destroy method. The console prints this.$el.

console.log(this.$el)

Add a line of logs to determine if this.$el is a child of the body

console.log(document.body.contains(this.$el))

Forbidden (403) CSRF verification failed. Request aborted. – Django

How to solve the cross-domain problem of Django?
please see this article, very detailed: https://pypi.org/project/django-cors-headers/


The above is due to the CSRF problem, how to solve?
Two ways:
Top: comment out CsrfViewMiddleware as shown, but
is not recommended
Second: add the annotation @csrf_exempt
to the interface view
The above two methods do solve 403 errors.
However, according to a lot of information, the approach is that the front end first USES get request to specify the interface, and then the server generates get_token(request) to return to the front end. The front end carries csrftoken returned when requesting the interface, which will verify whether the cookie is consistent…
But they all tried in vain…
We can see the article: https://www.cnblogs.com/rgcLOVEyaya/p/RGC_LOVE_YAYA_692days_802_1.html

Module build failed: SyntaxError: Unexpected token

vue router loading on demand times error

{
	path: '/product',
	component: () => import('./pages/product'),
},

error: Module build failed: SyntaxError: Unexpected token

solution:

1. In the beginning, I was in a hurry to write something, but instead of studying it carefully, I changed it to another way:
{
	path: '/product',
	component:resolve => require(['./pages/product'], resolve),
},

found no error and ran successfully. Later baidu checked that the original Babel needs to be added with syntax-dynamic-import plug-in, so that the Babel can correctly parse the syntax.

2. Download the plug-in
npm install babel-plugin-syntax-dynamic-import --save-dev
3. Then modify the loader configuration

in webpack

{
	test: /\.js$/,
	loader:'babel-loader',
	options:{
		plugins:['syntax-dynamic-import']
	},
},

so far, problem solved

my personal blog, drop by sometime

cnpm error Module build failed: Error: No PostCSS Config found in:

phenomenon:

执行cnpm run server
报错:
cnpm 报错 Module build failed: Error: No PostCSS Config found in:

reason:

Postcss.config. js

is missing from the configuration file

solution:

in the project root directory to create a new configuration file postcss.config.js, paste the following

module.exports = { 
  plugins: { 
    'autoprefixer': {browsers: 'last 5 version'} 
  } 
}