This repository was archived by the owner on Aug 7, 2021. It is now read-only.
Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork40
This repository was archived by the owner on Aug 7, 2021. It is now read-only.
Livesync & Build issue while using platform-specific TypeScript pages #672
Open
Labels
Description
Issue Checklist
- You are submitting: a bug report.
- You verified that this is a real problem by searching the [NativeScript Forum] and the other [issues] in this repo.
- You checked our [demo apps] and the [documentation] for sample usage.
Tell us about the problem
The issue happens while using platform-specific TypeScript files after the first liveSync. The problem can be easily reproduced with thenativescript-sdk-examples-js while building the app with thetns run <platform_name> --bundle
command. After the first build, we should make some change in the code. During the liveSync process the following error will appear:
[./ns-ui-widgets-category/placeholder/platform-files/platform-files-page.js] 378 bytes {bundle} [optional] [built][./ns-ui-widgets-category/placeholder/platform-files/platform-files-ts-page.ts] 1.04 KiB {bundle} [optional] [built] [failed] [1 error] + 767 hidden modulesWARNING in ./ns-ui-widgets-category/placeholder/platform-files/platform-files-ts-page.tsModule build failed: Error: Final loader didn't return a Buffer or String at runLoaders (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/webpack/lib/NormalModule.js:256:7) at /Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:370:3 at iterateNormalLoaders (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:211:10) at iterateNormalLoaders (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:218:10) at /Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:233:3 at context.callback (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at <anonymous> at runMicrotasksCallback (internal/process/next_tick.js:121:5) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) @ . sync (root|page)\.(xml|css|js|ts|scss)$ @ ./app.tsERROR in [at-loader] TS6053: File '/Users/ntsonev/Desktop/nativescript-sdk-examples-js/app/ns-ui-widgets-category/placeholder/platform-files/platform-files-ts-page.ts' not found.Webpack compilation complete. Watching for file changes.Webpack build done!
When we navigate toapp/ns-ui-widgets-category/placeholder/platform-files/platform-files-ts-page
the app will crash with:
Hook skipped because either bundling or livesync is in progress.Preparing project...Executing before-prepareJSApp hook from /Users/ntsonev/Desktop/nativescript-sdk-examples-js/hooks/before-prepareJSApp/nativescript-dev-webpack.jsProject successfully prepared (Android)Executing after-prepare hook from /Users/ntsonev/Desktop/nativescript-sdk-examples-js/hooks/after-prepare/nativescript-dev-webpack.jsSuccessfully transferred bundle.js.Refreshing application...Successfully synced application org.nativescript.nativescriptsdkexamplesjs on device 84B7N16309001310.09-25 14:32:33.567 22465 22465 E AndroidRuntime: at com.tns.Runtime.callJSMethodNative(Native Method)09-25 14:32:33.567 22465 22465 E AndroidRuntime: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)09-25 14:32:33.567 22465 22465 E AndroidRuntime: at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)09-25 14:32:33.567 22465 22465 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:983)09-25 14:32:33.567 22465 22465 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:967)09-25 14:32:33.567 22465 22465 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:959)System.err: com.tns.NativeScriptException: System.err: Calling js method onItemClick failedSystem.err: System.err: Error: Module build failed: Error: Final loader didn't return a Buffer or StringSystem.err: at runLoaders (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/webpack/lib/NormalModule.js:256:7)System.err: at /Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:370:3System.err: at iterateNormalLoaders (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:211:10)System.err: at iterateNormalLoaders (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:218:10)System.err: at /Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:233:3System.err: at context.callback (/Users/ntsonev/Desktop/nativescript-sdk-examples-js/node_modules/loader-runner/lib/LoaderRunner.js:111:13)System.err: at <anonymous>System.err: at runMicrotasksCallback (internal/process/next_tick.js:121:5)System.err: at _combinedTickCallback (internal/process/next_tick.js:131:7)System.err: at process._tickCallback (internal/process/next_tick.js:180:9)System.err: File: "file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/bundle.js, line: 11771, column: 0System.err: System.err: StackTrace: System.err: Frame: function:'./ns-ui-widgets-category/placeholder/platform-files/platform-files-ts-page.ts', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/bundle.js', line: 11771, column: 7System.err: Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/bundle.js', line: 76, column: 30System.err: Frame: function:'webpackContext', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/bundle.js', line: 778, column: 15System.err: Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 5961, column: 76System.err: Frame: function:'push.../node_modules/tns-core-modules/globals/globals.js.global.loadModule', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 5976, column: 16System.err: Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 12701, column: 23System.err: Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 12723, column: 29System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 20245, column: 30System.err: Frame: function:'ListViewLinksModel.viewModel.set', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/bundle.js', line: 979, column: 31System.err: Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable.notify', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 3506, column: 32System.err: Frame: function:'ItemClickListenerImpl.onItemClick', file:'file:///data/data/org.nativescript.nativescriptsdkexamplesjs/files/app/vendor.js', line: 24951, column: 19System.err: System.err: at com.tns.Runtime.callJSMethodNative(Native Method)System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)System.err: at com.tns.Runtime.callJSMethod(Runtime.java:983)System.err: at com.tns.Runtime.callJSMethod(Runtime.java:967)System.err: at com.tns.Runtime.callJSMethod(Runtime.java:959)System.err: at com.tns.gen.java.lang.Object_vendor_24944_32_ItemClickListenerImpl.onItemClick(Object_vendor_24944_32_ItemClickListenerImpl.java:20)System.err: at android.widget.AdapterView.performItemClick(AdapterView.java:318)System.err: at android.widget.AbsListView.performItemClick(AbsListView.java:1158)System.err: at android.widget.AbsListView$PerformClick.run(AbsListView.java:3127)System.err: at android.widget.AbsListView$3.run(AbsListView.java:4042)System.err: at android.os.Handler.handleCallback(Handler.java:790)System.err: at android.os.Handler.dispatchMessage(Handler.java:99)System.err: at android.os.Looper.loop(Looper.java:164)System.err: at android.app.ActivityThread.main(ActivityThread.java:6494)System.err: at java.lang.reflect.Method.invoke(Native Method)System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
Local environment
- Node version:
8.9.1
- NativeScript CLI version :
4.2.4
Project data
- Platform you are building the app for Both
- Node dependencies:
{ "name": "nativescript-sdk-examples-js", "description": "NativeScript SDK Examples", "author": "Telerik <support@telerik.com>", "version": "0.1.0", "homepage": "https://github.com/NativeScript/nativescript-sdk-examples-js", "repository": { "type": "git", "url": "https://github.com/NativeScript/nativescript-sdk-examples-js" }, "bugs": { "url": "https://github.com/NativeScript/nativescript-sdk-examples-js/issues" }, "keywords": [ "NativeScript", "JavaScript", "SDK", "example", "documentation" ], "license": "Apache-2.0", "nativescript": { "id": "org.nativescript.nativescriptsdkexamplesjs", "tns-ios": { "version": "4.2.0" }, "tns-android": { "version": "4.2.0" } }, "dependencies": { "nativescript-theme-core": "~1.0.4", "tns-core-modules": "^4.2.0" }, "devDependencies": { "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "chai": "^4.1.2", "clean-webpack-plugin": "~0.1.19", "copy-webpack-plugin": "~4.5.1", "css-loader": "~0.28.11", "eslint": "~4.19.0", "extract-text-webpack-plugin": "~3.0.2", "fs-extra": "^0.30.0", "markdown-snippet-injector": "^0.2.0", "mocha": "^5.2.0", "mocha-junit-reporter": "^1.17.0", "mocha-multi": "^1.0.1", "nativescript-dev-appium": "next", "nativescript-dev-webpack": "^0.15.1", "nativescript-worker-loader": "~0.9.0", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.2.1", "tar.gz": "^1.0.7", "tns-platform-declarations": "4.2.1", "nativescript-dev-typescript": "~0.7.0", "tslint": "^5.4.2", "typescript": "~2.7.2", "@types/chai": "~4.1.3", "@types/mocha": "~5.2.1", "@types/node": "^7.0.5" }, "scripts": { "lint": "eslint \"app/**/*.js\"", "tslint": "tslint -p tsconfig.json", "tsc": "tsc", "build": "node scripts/build.js", "archive": "node scripts/archive.js", "inject": "mdinject --root=app --docsroot=dist/cookbook --sourceext=\".js|.ts|.css|.xml\" --snippettitles=\"JavaScript|TypeScript|CSS|XML\"", "pretsc": "npm install", "pretslint": "npm run tsc", "prelint": "npm run tslint", "prebuild": "npm run lint", "postbuild": "npm run inject && npm run archive", "e2e": "mocha --opts ./e2e/config/mocha.opts" }}
- Webpack configuration:
const { join, relative, resolve, sep } = require("path");const webpack = require("webpack");const nsWebpack = require("nativescript-dev-webpack");const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");const CleanWebpackPlugin = require("clean-webpack-plugin");const CopyWebpackPlugin = require("copy-webpack-plugin");const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");const UglifyJsPlugin = require("uglifyjs-webpack-plugin");module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "tns-core-modules/ui/frame", "tns-core-modules/ui/frame/activity", ]; const platform = env && (env.android && "android" || env.ios && "ios"); if (!platform) { throw new Error("You need to provide a target platform!"); } const platforms = ["ios", "android"]; const projectRoot = __dirname; // Default destination inside platforms/<platform>/... const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS"; const { // The 'appPath' and 'appResourcesPath' values are fetched from // the nsconfig.json configuration file // when bundling with `tns run android|ios --bundle`. appPath = "app", appResourcesPath = "app/App_Resources", // You can provide the following flags when running 'tns run android|ios' snapshot, // --env.snapshot uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap } = env; const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const entryModule = nsWebpack.getEntryModule(appFullPath); const entryPath = `.${sep}${entryModule}.ts`; const config = { mode: uglify ? "production" : "development", context: appFullPath, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files "**/.*", ] }, target: nativescriptTarget, entry: { bundle: entryPath, }, output: { pathinfo: false, path: dist, libraryTarget: "commonjs2", filename: "[name].js", globalObject: "global", }, resolve: { extensions: [".ts", ".js", ".scss", ".css"], // Resolve {N} system modules from tns-core-modules modules: [ resolve(__dirname, "node_modules/tns-core-modules"), resolve(__dirname, "node_modules"), "node_modules/tns-core-modules", "node_modules", ], alias: { '~': appFullPath }, // don't resolve symlinks to symlinked modules symlinks: false }, resolveLoader: { // don't resolve symlinks to symlinked loaders symlinks: false }, node: { // Disable node shims that conflict with NativeScript "http": false, "timers": false, "setImmediate": false, "fs": "empty", "__dirname": false, }, devtool: sourceMap ? "inline-source-map" : "none", optimization: { splitChunks: { cacheGroups: { vendor: { name: "vendor", chunks: "all", test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName); }, enforce: true, }, } }, minimize: !!uglify, minimizer: [ new UglifyJsPlugin({ uglifyOptions: { parallel: true, cache: true, output: { comments: false, }, compress: { // The Android SBG has problems parsing the output // when these options are enabled 'collapse_vars': platform !== "android", sequences: platform !== "android", } } }) ], }, module: { rules: [ { test: new RegExp(entryPath), use: [ // Require all Android app components platform === "android" && { loader: "nativescript-dev-webpack/android-app-components-loader", options: { modules: appComponents } }, { loader: "nativescript-dev-webpack/bundle-config-loader", options: { loadCss: !snapshot, // load the application css if in debug mode } }, ].filter(loader => !!loader) }, { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"}, { test: /\.css$/, use: { loader: "css-loader", options: { minimize: false, url: false } } }, { test: /\.scss$/, use: [ { loader: "css-loader", options: { minimize: false, url: false } }, "sass-loader" ] }, { test: /\.ts$/, use: { loader: "awesome-typescript-loader", options: { configFileName: "tsconfig.esm.json" }, } }, ] }, plugins: [ // Define useful constants like TNS_WEBPACK new webpack.DefinePlugin({ "global.TNS_WEBPACK": "true", "process": undefined, }), // Remove all files from the out dir. new CleanWebpackPlugin([ `${dist}/**/*` ]), // Copy native app resources to out dir. new CopyWebpackPlugin([ { from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, to: `${dist}/App_Resources/${appResourcesPlatformDir}`, context: projectRoot }, ]), // Copy assets to out dir. Add your own globs as needed. new CopyWebpackPlugin([ { from: "fonts/**" }, { from: "**/*.jpg" }, { from: "**/*.png" }, ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), // Generate a bundle starter script and activate it in package.json new nsWebpack.GenerateBundleStarterPlugin([ "./vendor", "./bundle", ]), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), new nsWebpack.PlatformFSPlugin({ platform, platforms, }), // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin(), ], }; if (report) { // Generate report files for bundles content config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: false, generateStatsFile: true, reportFilename: resolve(projectRoot, "report", `report.html`), statsFilename: resolve(projectRoot, "report", `stats.json`), })); } if (snapshot) { config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ chunk: "vendor", requireModules: [ "tns-core-modules/bundle-entry-points", ], projectRoot, webpackConfig: config, })); } return config;};