Tag Archives: I saw it. JS Company

Error: Rule can only have one resource source (provided resource and test + include + exclude)

The Vue project reports an error after running NPM run dev/NPM run serve:

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "type": "javascript/auto",
  "include": [
    {}
  ],
  "use": []
}
    at checkResourceSource (D:\Program Files\vue_shop\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
    at Function.normalizeRule (D:\Program Files\vue_shop\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
    at D:\Program Files\vue_shop\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (D:\Program Files\vue_shop\node_modules\@vue\cli-
    ```
    Process finished with exit code 1

Cause of problem:

Webpack version conflict.

Webpack version conflict issue.

Some new versions of libraries require webpack@5, and when updating dependencies, webpack@5 is installed as the primary dependency based on the rules of dependency selection. However, @vue/cli relies on webpack@4, and its own webpack configuration is not compatible with webpack@5, so it reports an error and cannot continue to compile. If you’re also using @vue/cli, then don’t upgrade webpack@5 rashly.

Following its solution, I found a conflict between webpack and the previously installed version of less,less-loader

The overall solution is as follows:

//uninstall webpack 
npm uninstall webpack
//Install the specified version of webpack
npm install [email protected] --save-dev

npm uninstall less-loader
npm uninstall less

//Install compliant versions of less and less-loader
npm install [email protected] [email protected] --save-dev

Vue warn]: vue3 element Component emit Pass Event Error

vue3 in element component emit pass event error
Report error:

Vue warn]: Extraneous non-emits event listeners (cancel, confirm, modelClose) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.

Sub-component throwing events

 emits: ['cancel', 'confirm', 'modelClose'],
  setup (props, context) {
    const { showDialog } = toRefs(props)
    const show = computed(() => {
      return showDialog.value
    })
    const cancel = () => {
      context.emit('cancel')
    }
    const confirm = () => {
      context.emit('confirm')
    }
    const modelClose = () => {
      context.emit('modelClose')
    }
    return {
      show, cancel, confirm, modelClose
    }

Parent component receives events

`<user-info :showDialog="showDialog" @cancel="showDialog=false" @confirm="showDialog=false" @modelClose="showDialog=false"></user-info>

＜script setup＞ Error: ‘defineProps‘ is not defined [How to Solve]

Solution 1: in eslintrc. JS env add configuration

  env: {
    'vue/setup-compiler-macros': true // New
  }

An error may be reported when the development service is restarted after configuration:

Environment key “vue/setup-compiler-macros” is unknown

Recompile again and the error disappears.

Solution 2: add global configuration in eslintrc.js

  globals: {
    defineProps: "readonly",
    defineEmits: "readonly"
  }

[Solved] Vue Start Project Error: ValidationError: webpack Dev Server Invalid Options

#Vue project development error
premise: during the development of Vue project, error: validationerror: webpack dev server invalid options appear when the project is started

problem analysis:
according to the problem description, the value of the “agent” object used to solve cross domain problems in the configuration file is empty

Solution:
find webpack.config.JS or Vue.config.JS
then find devserver and comment out the proxy or fill in the complete configuration

[Solved] electron Error: Uncaught TypeError: Cannot read property ‘BrowserWindow‘ of undefined

Electronic version 16+

There is a problem when using the remote module. The code is as follows:

const BrowserWindow = require(‘electron’). remote. BrowserWindow；

report errors:

Uncaught TypeError: Cannot read property ‘BrowserWindow’ of undefined

Solution:

1. Install remote:

npm install –save @electron/remote

2. demo2.js：

3. main.js：

It’s ready to run. The version of electron is updated too fast, and the rules are changed too fast.

[Solved] Vue 3 Script Setup ESLint Error: ‘defineProps‘ is not defined

Solution: when using Vue 3 script setup, eslint reports the error ‘defineprops’ is not defined

Vue 3’s script setup syntax introduces compiler macros of defineprops, definemits, defineexpose, withdefaults. However, in some cases, eslint will report an error. The above compiler macro functions are not defined.

This article will introduce two solutions to solve this problem (assuming that your project is initialized with Vue CLI).

Step 1. Check the version of eslint-plugin-Vue 

npm list eslint-plugin-vue

If the version is in V8 Above 0.0, jump to step 2, otherwise go directly to the content of step 3.

Step 2. Version is V8.0.0+

Open eslintrc.JS file and modify it as follows:

  env: {
    node: true,
    // The Follow config only works with eslint-plugin-vue v8.0.0+
    "vue/setup-compiler-macros": true,
  },

Step 3. Version is V8 Below 0.0

Open eslintrc.JS file and modify it as follows:

  // The Follow configs works with eslint-plugin-vue v7.x.x
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },

If your version of  eslint-plugin-vue is under V8, I don’t recommended you to upgrade the version，especially you had used a lot of ts dependency.

webpack4 Use webpack-dev-server Error [How to Solve]

Today, I reported an error with webpack dev server in the project to visually check the version problem
the webpack version used in the project is "webpack": "^ 4.28.4"
the default is "webpack dev server": "^ 4.7.3" , and the reduced version is "webpack dev server": "^ 3.1.14" . The problem is solved

Then start the error report:
check the data and find that the startup command is changed to NPX webpack server -- config webpack dev.js

[Solved] webpack Package Error: TypeError: this.getOptions is not a function style-loader

I used style-loader in the project today, and found an error in packaging: typeerror: this Getoptions is not a function
visual inspection is a version problem. The default version of style-loader is 3.3.1. The reduced version is 2.0.0, and the problem is solved
PS: the webpack version used is 4.28.4

Yarn vue3 modify the name of the source file Error [Solved]

ERROR Failed to compile with 1 error PM 6:26:46
This relative module was not found:
* ./RoleFormDialog in ./node_modules/cache-loader/dist/cjs.js??ref–13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref–1-1!./src/views/Role/List.vue?vue&type=script&lang=js

Solution:
Also change the directory where the source file is located to any other name (here it is changing Role to RoleAAA) and then change back to the original name (here it is changing back to Role), yarn will automatically clear the cache and the problem is solved.

 

Vue Package Image Error: Syntax Error: Error: ‘**\node_modules\pngquant-bin\vendor\pngquant.exe‘

When packaging, an error is displayed at a picture path
Syntax Error: Error: ‘D:\work\tiny-sample\src\frontend\web\packages\src-entry\node_modules\pngquant-bin\vendor\pngquant.exe’

It can be seen that the package pngquant-bin reports an error, and the package is derived from the dependency of image-webpack-loader, so the root cause is image-webpack-loader.
Solution: delete the dependency image-webpack-loader, and then reinstall it. If it doesn’t work, try a few more times.

npm uninstall image-webpack-loader
npm install image-webpack-loader

If it still fails, set the image for NPM and repeat the above two steps