search

vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

Error when webpacking .vue file #1978

Closed he-yang closed 2 years ago

he-yang commented 2 years ago

Here is the error I get when I try to webpack

Compiled with problems:X

ERROR in ./vue/index.vue

Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (D:\FDT\node_modules\vue-loader\dist\index.js:70:34)

Below is the content in my index.vue file

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

Any idea how to solve this?

vue-bot commented 2 years ago

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

netandreus commented 2 years ago

I have the same issue. Is there any solution?

he-yang commented 2 years ago

I have the same issue. Is there any solution?

I got reply from here https://github.com/vuejs/vue-loader/issues/1973#issuecomment-1183982271

basically, you need to downgrade vue-load to @15, if you are using vue2.0

netandreus commented 2 years ago

It does not helps me. I've got an new error:

ERROR in ../ts/Vue/TestComponent.vue
    Module not found: Error: Can't resolve 'babel-loader' in '/var/www/vision/current/src/Resources/public'
     @ ../ts/Vue/TestComponent.vue 1:0-104 10:2-8 11:2-17
     @ ../ts/Vue/VueApp.ts

    ERROR in ../ts/Vue/TestComponent.vue
    Module not found: Error: Can't resolve 'babel-loader' in '/var/www/vision/current/src/Resources/public'
     @ ../ts/Vue/TestComponent.vue 2:0-65 3:0-60 3:0-60 9:2-8
     @ ../ts/Vue/VueApp.ts

    ERROR in [at-loader] ./src/Resources/public/ts/Vue/VueApp.ts:2:27
        TS2307: Cannot find module './TestComponent.vue'.

My package.json versions are:

"dependencies": {
    "@ag-grid-community/all-modules": "^22.0.0",
    "@ag-grid-community/react": "^22.0.0",
    "@ckeditor/ckeditor5-build-classic": "^27.0.0",
    "@ckeditor/ckeditor5-upload": "^29.2.0",
    "@types/bootstrap": "4.3.1",
    "@types/jquery": "^3.3.1",
    "@types/lodash.memoize": "^4.1.6",
    "@types/moment": "^2.13.0",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^4.3.5",
    "@types/select2": "^4.0.47",
    "@types/simplebar": "^2.4.2",
    "@types/url-parse": "^1.1.0",
    "@types/js-cookie": "^3.0.0",
    "autoprefixer": "^9.1.3",
    "awesome-typescript-loader": "^5.2.1",
    "bootstrap": "4.3.1",
    "bootstrap-daterangepicker": "^2.1.25",
    "chart.js": "^2.9",
    "clipboard": "2.0.0",
    "css-loader": "1.0.0",
    "detect-mobile-browser": "https://github.com/vrebierr/detect-mobile-browser.git#0.0.1",
    "dropify": "^0.2.2",
    "exports-loader": "^0.7.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^2.0.0",
    "floatthead": "2.1.1",
    "flow-bin": "^0.107.0",
    "font-awesome": "^4.7.0",
    "freeotp": "https://github.com/freeotp/freeotp.github.io.git",
    "freeotp.github.io": "https://github.com/freeotp/freeotp.github.io.git",
    "fullcalendar": "3.9.0",
    "i18next": "^19.0.0",
    "i18next-loader": "^0.0.6",
    "ignore-loader": "^0.1.2",
    "immutable": "^3.8.2",
    "inputmask": "robinherbots/inputmask",
    "intl-polyfill": "^0.0.3",
    "intl-tel-input": "^17.0.0",
    "jquery": "3.3.1",
    "json-loader": "^0.5.7",
    "jstree": "^3.3.7",
    "jstreegrid": "^3.9.0",
    "loader-utils": "^1.1.0",
    "lodash.memoize": "^4.1.2",
    "mini-css-extract-plugin": "^0.4.3",
    "mobile-detect": "^1.4.3",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "number_format-php": "^1.0.9",
    "pdfjs-dist": "^2.5.207",
    "postcss-loader": "^3.0.0",
    "postcss-move-props-to-bg-image-query": "^0.2.5",
    "promise-polyfill": "^8.1.0",
    "qrcode-generator": "^1.4.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "resolve-url-loader": "^3.0.0",
    "sass-loader": "7.1.0",
    "select2": "^4.0.13",
    "simplebar": "4.2.1",
    "simplebar-react": "1.2.1",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.21.0",
    "svg-inline-loader": "^0.8.0",
    "svg-transform-loader": "^2.0.0",
    "svg-url-loader": "^2.3.2",
    "toastr": "2.1.4",
    "typescript": "^3.1.1",
    "url-loader": "1.0.0",
    "url-parse": "^1.4.1",
    "webfonts-generator": "^0.4.0",
    "webpack": "4.17.1",
    "webpack-cli": "3.1.0",
    "x-editable": "^1.5.1",
    "yaml-loader": "^0.5.0",
    "js-cookie": "^3.0.0",
    "cyrillic-to-translit-js": "3.1.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.10.0"
  },

VueApp.js

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

var vueApp = new Vue({
    el: '#vue-app',
    name: 'VueApp',
    components: {
        TestComponent: TestComponent
    },
});

TestComponent.vue

<template>
  TTTTTT
</template>

<script>
export default {
  name: "TestComponent"
}
</script>

<style scoped>

</style>

Rules in webpack.config.json:

    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            loaders: {
                ts: {
                    loader: "awesome-typescript-loader",
                    options: {
                        appendTsSuffixTo: ['\\.vue$'],
                        configFileName: resolve(__dirname, './tsconfig.json'),
                    },
                },
            },
            esModule: true,
        },
    }

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "declaration": false,
        "target": "es5",
        "noEmit": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "jsx": "react",
        "resolveJsonModule": true,
        "downlevelIteration": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "typeRoots": [
          "node_modules/@types",
          "./assets/types"
        ],
        "types": [
            "react",
            "jquery",
            "bootstrap",
            "select2",
            "routing",
            "jstree",
            "number_format-php",
            "json-loader",
            "yaml-loader"
        ],
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "jsonapi": ["./assets/JsonApi"],
            "jsonapi/*": ["./assets/JsonApi/*"]
        }
    },
    "include": [
        "assets/JsonApi"
    ],
    "exclude": [
      "node_modules",
      "web/vendor",
      "web/bundles",
      "public/bundles",
      "vendor"
    ]
}

Do you have any ideas, what's the problem?