CODEWITHSUNDEEP
typescriptvuejs2nativescript
Aren Villanueva
Aren Villanueva

Reputation: 31

NativeScript-Vue typescript chainloading babel-loader with ts-loader

I'm attempting to create a NativeScript-Vue project using TypeScript. I have managed to get things building to a point where it is complaining about:

ERROR in app.ios.js from UglifyJs
Unexpected token: operator (>) [app.ios.js:132,15]

The offending line is:

new __WEBPACK_IMPORTED_MODULE_0_nativescript_vue___default.a({
    // This line right here:
    render: h => h(__WEBPACK_IMPORTED_MODULE_1__components_Counter_vue__["a" /* default */]),
}).$start();

I may be naively assuming that I need to chain load babel-loader!ts-loader in my webpack.config.js but that just fails with:

ERROR in Entry module not found: Error: Can't resolve 'babel-loader!ts-loader' in '/path/to/project'

The dependencies in my package.json are as follows:

"dependencies": {
  "nativescript-theme-core": "^1.0.4",
  "nativescript-vue": "^1.3.1",
  "tns-core-modules": "~3.4.1",
  "typescript": "^2.8.3",
  "vuex": "^3.0.1"
},
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.4",
  "babel-plugin-transform-object-rest-spread": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "copy-webpack-plugin": "^4.5.1",
  "css-loader": "^0.28.11",
  "extract-text-webpack-plugin": "^3.0.2",
  "fs-extra": "^5.0.0",
  "nativescript-vue-externals": "^0.2.0",
  "nativescript-vue-loader": "^0.1.5",
  "nativescript-vue-target": "^0.1.0",
  "nativescript-vue-template-compiler": "^1.3.1",
  "node-sass": "^4.7.2",
  "ns-vue-loader": "^0.1.2",
  "optimize-css-assets-webpack-plugin": "^3.2.0",
  "rimraf": "^2.6.2",
  "sass-loader": "^6.0.7",
  "ts-loader": "^3.5.0",
  "vue-template-compiler": "^2.5.16",
  "webpack": "^3.11.0",
  "webpack-synchronizable-shell-plugin": "0.0.7",
  "winston-color": "^1.0.0"
}

What am I doing wrong? Am I looking at the problem incorrectly?

Upvotes: 0

Views: 278

Answers (1)

Aren Villanueva
Aren Villanueva

Reputation: 31

I resolved the issue by changing my webpack.config.js to have:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader',
    },
    {
      test: /\.ts(x?)$/,
      exclude: /(node_modules)/,
      use: [
        {
          loader: 'babel-loader',
        },
        {
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          },
        }
      ]
    },
...

Upvotes: 1

Related Questions