Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when webpacking .vue file #1978

Closed
he-yang opened this issue Jul 14, 2022 · 4 comments
Closed

Error when webpacking .vue file #1978

he-yang opened this issue Jul 14, 2022 · 4 comments

Comments

@he-yang
Copy link

he-yang commented Jul 14, 2022

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
Copy link

vue-bot commented Jul 14, 2022

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!

@vue-bot vue-bot closed this as completed Jul 14, 2022
@netandreus
Copy link

I have the same issue. Is there any solution?

@he-yang
Copy link
Author

he-yang commented Jul 29, 2022

I have the same issue. Is there any solution?

I got reply from here #1973 (comment)

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

@netandreus
Copy link

netandreus commented Jul 29, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants