Skip to content

If using Vue 2, see latest comment here 💯  #11009

@dartstyle

Description

@dartstyle

Issue Description

I am not able to build an app. I tried to create a new app from scratch (via ns create) and cannot build it. Firstly I get a nativescript/webpack error that vueloader cannot be patched. Then it is not able to find styles with styleloader.js

Here is my package.json

{
  "name": "tapp",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~9.0.0",
    "@nativescript/theme": "^3.1.0",
    "nativescript-vue": "~2.9.3"
  },
  "devDependencies": {
    "@nativescript/ios": "9.0.2",
    "@nativescript/webpack": "~5.0.25",
    "nativescript-vue-template-compiler": "~2.9.3"
  }
}

my webpack.config.js

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);

	// Learn how to customize:
	// https://docs.nativescript.org/webpack

	return webpack.resolveConfig();
};

Reproduction

  1. ns create (Vue template, blank)
  2. ns run ios

Relevant log output (if applicable)

iMac-Anastasia:tapp dartow$ ns run ios --emulator
Searching for devices...
Copying template files...
Platform ios successfully added. v9.0.2
Preparing project...
[@nativescript/webpack] Error: 
 Failed to patch VueLoader - HMR may not work properly!
webpack is watching the files...
assets by path *.js 3.81 MiB
  asset vendor.js 3.76 MiB [emitted] (name: vendor) (id hint: defaultVendor) 1 related asset
  asset runtime.js 40.7 KiB [emitted] (name: runtime) 1 related asset
  asset bundle.js 12.1 KiB [emitted] (name: bundle) 1 related asset
assets by path fonts/*.ttf 374 KiB
  asset fonts/fa-solid-900.ttf 204 KiB [emitted] [from: app/fonts/fa-solid-900.ttf] [copied]
  asset fonts/fa-brands-400.ttf 131 KiB [emitted] [from: app/fonts/fa-brands-400.ttf] [copied]
  asset fonts/fa-regular-400.ttf 39.1 KiB [emitted] [from: app/fonts/fa-regular-400.ttf] [copied]
asset tns_modules/inspector_modules.js 939 bytes [emitted] (name: tns_modules/inspector_modules) 1 related asset
Entrypoint bundle 3.81 MiB (3.73 MiB) = runtime.js 40.7 KiB vendor.js 3.76 MiB bundle.js 12.1 KiB 3 auxiliary assets
Entrypoint tns_modules/inspector_modules 3.8 MiB (3.72 MiB) = runtime.js 40.7 KiB vendor.js 3.76 MiB tns_modules/inspector_modules.js 939 bytes 3 auxiliary assets
orphan modules 76.3 KiB [orphan] 19 modules
runtime modules 26.7 KiB 13 modules
modules by path ./node_modules/@nativescript/ 1.89 MiB 223 modules
modules by path ./node_modules/css-tree/lib/ 318 KiB 123 modules
modules by path ./node_modules/source-map-js/ 104 KiB 11 modules
modules by path ./app/ 5.8 KiB
  ./app/app.js 4.44 KiB [built] [code generated]
  + 5 modules
modules by path ./node_modules/@csstools/ 132 KiB
  ./node_modules/@csstools/css-calc/dist/index.mjs 28.3 KiB [built] [code generated]
  + 4 modules
modules by path ./node_modules/css-what/dist/esm/*.js 24.9 KiB
  ./node_modules/css-what/dist/esm/index.js 121 bytes [built] [code generated]
  + 3 modules
+ 6 modules

ERROR in ./app/app.js 2:0-20
Module not found: Error: Can't resolve 'vue-loader/lib/loaders/stylePostLoader.js' in '/Users/dartow/Documents/GitHub/lr-west/frontend/tapp'

ERROR in ./app/components/Home.vue?vue&type=template&id=1858554c&scoped=true (./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./app/components/Home.vue?vue&type=template&id=1858554c&scoped=true)
Module build failed (from ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')
    at Object.loader (/Users/dartow/Documents/GitHub/lr-west/frontend/tapp/node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js:44:28)
 @ ./app/components/Home.vue?vue&type=template&id=1858554c&scoped=true 1:0-297 1:0-297
 @ ./app/components/Home.vue 1:0-80 8:71-80
 @ ./app/app.js 5:0-36 8:31-35

ERROR in ./app/components/Home.vue 5:0-76
Module not found: Error: Can't resolve 'vue-loader/lib/loaders/stylePostLoader.js' in '/Users/dartow/Documents/GitHub/lr-west/frontend/tapp'
 @ ./app/app.js 5:0-36 8:31-35

2 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.103.0 compiled with 3 errors in 8382 ms
Webpack compilation complete. Watching for file changes.

Environment

OS: macOS 15.7.2
CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
Shell: /bin/bash
node: 25.2.1
npm: 11.6.2
nativescript: 9.0.1

# android
java: 21.0.9
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 16.3/16E140
cocoapods: 1.13.0
python: Not Found
python3: 3.9.6
ruby: 3.2.2
platforms: 
  - DriverKit 24.4
  - iOS 18.4
  - macOS 15.4
  - tvOS 18.4
  - visionOS 2.4
  - watchOS 11.4

Dependencies

"dependencies": {
  "@nativescript/core": "~9.0.0",
  "@nativescript/theme": "^3.1.0",
  "nativescript-vue": "~2.9.3"
},
"devDependencies": {
  "@nativescript/ios": "9.0.2",
  "@nativescript/webpack": "~5.0.25",
  "nativescript-vue-template-compiler": "~2.9.3"
}

Please accept these terms

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug-pending-triageReported bug, pending triage to confirm.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions