Home » vue » Why webpack cannot load *.js classes imported from vue component?

Why webpack cannot load *.js classes imported from vue component?

Posted by: admin November 26, 2021 Leave a comment

Questions:

When trying to build in prod / dev-envs I am getting following error:

> [email protected] dev-build /usr/local/var/www/DSP/frontend
> vue-cli-service build --mode development


98% after emitting

 ERROR  Failed to compile with 2 errors                                                                                                                                                    3:11:23 PM

 error  in ./src/classes/Contact.js

Module parse failed: Unexpected token (9:4)
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
|     _id
| 
>     _phone
|     _pipelineLevel
|     _tags

 @ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/projects/project/pipeline/Pipeline.vue?vue&type=script&lang=js& 162:0-49 232:110-117 292:51-58
 @ ./src/views/projects/project/pipeline/Pipeline.vue?vue&type=script&lang=js&
 @ ./src/views/projects/project/pipeline/Pipeline.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./src/classes/Script/Node.js

Module parse failed: Unexpected token (9:6)
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
|  */
| export default class Node {
>     id;
| 
|     script;

 @ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Script/Writer/Writer.vue?vue&type=script&lang=js& 117:0-48 188:40-44 195:40-44
 @ ./src/components/Script/Writer/Writer.vue?vue&type=script&lang=js&
 @ ./src/components/Script/Writer/Writer.vue
 @ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/projects/project/script/ScriptEditor.vue?vue&type=script&lang=js&
 @ ./src/views/projects/project/script/ScriptEditor.vue?vue&type=script&lang=js&
 @ ./src/views/projects/project/script/ScriptEditor.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev-build: `vue-cli-service build --mode development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev-build 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!     /Users/new/.npm/_logs/2019-09-12T12_11_24_212Z-debug.log

My package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "prod-build": "vue-cli-service build",
    "dev-build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@tinymce/tinymce-vue": "^3.0.1",
    "@vue/cli": "^3.11.0",
    "core-js": "^2.6.5",
    "css-loader": "^3.2.0",
    "eslint": "^6.3.0",
    "moment": "^2.24.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-router": "^3.0.3",
    "vue-the-mask": "^0.11.1",
    "vuetify": "^2.0.11",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/polyfill": "^7.6.0",
    "@mdi/font": "^4.2.95",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-plugin-unit-mocha": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "chai": "^4.1.2",
    "deepmerge": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0",
    "fibers": "^4.0.1",
    "sass": "^1.22.10",
    "sass-loader": "^7.3.1",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)"
        ],
        "env": {
          "mocha": true
        }
      }
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

My webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              fiber: require('fibers'),
              indentedSyntax: true // optional
            }
          },
        ]
      }
    ]
  },
}

My vue.config.js:

module.exports = {
  publicPath: '/pwa',
  outputDir: '../public/pwa',
  indexPath: '../../templates/views/index.html.twig',

  // Setting this to false can speed up production builds if you don't need source maps for production.
  productionSourceMap: false,

  // By default, generated static assets contains hashes in their filenames for better caching control.
  // However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
  // generated by Vue CLI, you can disable filename hashing by setting this option to false,
  filenameHashing: false,
  lintOnSave: false,

  // https://cli.vuejs.org/ru/config/#devserver-proxy
  devServer: {},

  // https://cli.vuejs.org/ru/config/#chainwebpack
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'Ojok Deep Sales Platform';
        args[0].template = './index.html.template';
        args[0].filename = '../../templates/views/index.html.twig';
        return args;
      });
  },
}

Content of Contact.js is:

import Utils from '../utils/utils';

export default class Contact {
    _id

    _phone
    _pipelineLevel
    _tags
    _listOfContacts

    _recallAt

    _color
    _name
    _category
    _country
    _region
    _city
    _postalCode
    _address
    _longitude
    _latitude
    _website
    _email
    _description

    _referral
    _utmSource
    _utmMedium
    _utmCampaign
    _utmTerm
    _utmContent

    constructor(fields) {
        Object.keys(fields).forEach(key => this['_' + key] = fields[key])
    }

    get id() {
        return this._id
    }
    get phone() {
        return this._phone.sourceFormat
    }
    get pipeline() {
        return this._pipelineLevel ? this._pipelineLevel.pipeline : null
    }
    get pipelineLevel() {
        return (this._pipelineLevel || null)
    }
    set pipelineLevel(level) {
        this._pipelineLevel = {...this._pipelineLevel, ...level}
    }
    get pipelineLevelID() {
        return (this.pipelineLevel ? this.pipelineLevel.id : null)
    }
    get pipelineLevelName() {
        return this.pipelineLevel ? this.pipelineLevel.name : null
    }
    get tags() {
        return this._tags
    }
    set tags(tags) {
        this._tags = tags
    }
    get listOfContacts() {
        return this._listOfContacts
    }

    get recallAt() {
        return (this._recallAt ? this._recallAt : null)
    }
    set recallAt(recallAt) {
        this._recallAt = recallAt
    }
    get recallAtHumanized() {
        return this.recallAt ? Utils.datetimeHumanizedDifference(this.recallAt) : null
    }
    get color() {
        return this._color
    }
    set color(color) {
        this._color = color
    }
    get name() {
        return this._name
    }
    set name(name) {
        this._name = name
    }
    get category() {
        return this._category
    }
    set category(category) {
        this._category = category
    }
    get country() {
        return this._country
    }
    get region() {
        return this._region
    }
    get city() {
        return this._city
    }
    get postalCode() {
        return this._postalCode
    }
    get address() {
        return this._address
    }
    get longitude() {
        return this._longitude
    }
    get latitude() {
        return this._latitude
    }
    get website() {
        return this._website
    }
    set website(site) {
        this._website = site
    }
    get email() {
        return this._email
    }
    set email(email) {
        this._email = email
    }
    get description() {
        return this._description
    }
    set description(description) {
        this._description = description
    }
    get referral() {
        return this._referral
    }
    get utmSource() {
        return this._utmSource
    }
    get utmMedium() {
        return this._utmMedium
    }
    get utmCampaign() {
        return this._utmCampaign
    }
    get utmTerm() {
        return this._utmTerm
    }
    get utmContent() {
        return this._utmContent
    }

    toJSON() {
        return Object.keys(this).reduce((json, value) => {
            json[value.slice(1)] = this[value]
            return json
        }, {})
    }
}

What is wrong with config files and how to fix this?

Thx!

Answers:

I’ve the same issue (Additional loaders needed after installing Vuetify) I’m reusing classes from previous Vue.js projects that have been fine.

The trouble started when i installed Vuetify 2, previous projects where Vuetify 1.5

Webpack et al are a mystery to me that i have not the time or resources to deep dive into 🙁

###

After I upgrade to the latest version of vue-cli-plugin-vuetify and vuetify-loader, the problem is solved.