I have my VueJS project and I want to use VueJs single page components in it. The project is desired to be CRUD application that works with PotrgeSQL tables so it has all corresponding dependencies. For some reason after installing dependencies webpack appeared in the node_module - probably some dependencies just require it. The problem is it gives me an error when I am trying to start my project it requires some loader to be configured to process my vue components:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>
| <div class="wrapper">
After googling the solution I installed vue-lodader and vue-template-compiler but the error was still occurring. Then I found out about laravel-mix that it helps to configure vue-loader for environment that uses webpack. I created and configured my webpack.mix.js file as instructed in official manual but after that I still have the same error plus there is also new errors that tell me about require() of ES Module are not supported. The full actual error text is shown below:
ERROR Failed to compile with 2 errors 12:03:35
D:\Stuff\Programming\Web\auction_antique\src\App.vue
0:0 error Parsing error: require() of ES Module D:\Stuff\Programming\Web\auction_antique\node_modules\eslint-scope\lib\definition.js from D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-esl
int.js not supported.
Instead change the require of definition.js in D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
D:\Stuff\Programming\Web\auction_antique\src\components\StartPage.vue
0:0 error Parsing error: require() of ES Module D:\Stuff\Programming\Web\auction_antique\node_modules\eslint-scope\lib\definition.js from D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-esl
int.js not supported.
Instead change the require of definition.js in D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
D:\Stuff\Programming\Web\auction_antique\src\main.js
0:0 error Parsing error: require() of ES Module D:\Stuff\Programming\Web\auction_antique\node_modules\eslint-scope\lib\definition.js from D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-esl
int.js not supported.
Instead change the require of definition.js in D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
D:\Stuff\Programming\Web\auction_antique\src\router.js
0:0 error Parsing error: require() of ES Module D:\Stuff\Programming\Web\auction_antique\node_modules\eslint-scope\lib\definition.js from D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-esl
int.js not supported.
Instead change the require of definition.js in D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
✖ 4 problems (4 errors, 0 warnings)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
error in ./src/components/VueTabs
Instead change the require of definition.js in D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
D:\Stuff\Programming\Web\auction_antique\src\router.js
0:0 error Parsing error: require() of ES Module D:\Stuff\Programming\Web\auction_antique\node_modules\eslint-scope\lib\definition.js from D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-esl
int.js not supported.
Instead change the require of definition.js in D:\Stuff\Programming\Web\auction_antique\node_modules\babel-eslint\lib\require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
✖ 4 problems (4 errors, 0 warnings)
webpack compiled with 2 errors
When I run npm mix then I get only the first error:
The package.json file text is given below:
{
"name": "auction_antique",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "node server.js"
},
"dependencies": {
"axios": "^0.26.1",
"body": "^5.1.0",
"body-parser": "^1.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"express": "^4.17.3",
"parser": "^0.1.4",
"pg": "^8.7.3",
"pg-hstore": "^2.3.4",
"sequelize": "^6.17.0",
"vue": "^2.6.14",
"vue-router": "^3.1.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-service": "^5.0.4",
"babel-eslint": "^10.1.0",
"eslint": "^8.13.0",
"eslint-plugin-vue": "^8.6.0",
"html-webpack-plugin": "^5.5.0",
"laravel-mix": "^6.0.43",
"resolve-url-loader": "^5.0.0",
"sass": "^1.50.0",
"sass-loader": "^12.1.0",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"description": "## Project setup ``` npm install ```",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/IngeniousTom/DB_AND_UI.git"
},
"keywords": [
"nodejs",
"express",
"sequelize",
"postgresql",
"rest",
"api"
],
"author": "Artem Alikin",
"license": "ISC",
"bugs": {
"url": "https://github.com/IngeniousTom/DB_AND_UI/issues"
},
"homepage": "https://github.com/IngeniousTom/DB_AND_UI#readme"
}
Really need some help with this problem!
Here is the link to my project on github.com - my vuejs project