A webpack loader that works as an ahead-of-time (AOT) compiler which turns XML content into JavaScript during the build phase.
npm i --save @nativescript-community/xml-ui-loader


npm npm GitHub forks GitHub stars

This is a webpack loader for NativeScript.

By default, NativeScript Core uses a builder to compile XML components at runtime and that happens every time there is a need to render views.
This new approach is meant to work as an ahead-of-time (AOT) compiler that turns XML content into JavaScript during the build phase.
It's meant to improve performance and allow developers to use XML files as modules.


npm install @nativescript-community/xml-ui-loader --save-dev


Import as a module

One can easily import an XML component just like any regular JS module.

import MyActionBar from "./components/my-action-bar.xml";

Import as plain XML

To import the raw content of an XML file, append an XML declaration to it.

<?xml version="1.0" encoding="UTF-8"?>

This will make sure import will resolve to plain XML string content.

Custom components

Regarding custom components, the method to import one inside XML has changed so that it's identical to importing modules in JavaScript.

Correct approaches, supposing caller directory path is app/views/home and components directory path is app/components

<!-- Works -->
<Page xmlns:myxml="../../components/my-xml-component.xml" xmlns:myjs="../../components/my-js-component">

<!-- Works -->
<Page xmlns:myxml="~/components/my-xml-component.xml" xmlns:myjs="~/components/my-js-component">

<!-- Does not work! -->
<Page xmlns:myxml="components/my-xml-component.xml" xmlns:myjs="components/my-js-component">

Script & Style

In general, one is able to create script and style files for an XML component provided that they use the same filename.
The first contains useful entities like events used by XML and the latter applies all CSS to it.

There is also a forgotten method to bind scripts or styles to XML.
It's codeFile and cssFile properties. These properties are assigned to top element inside an XML file and are especially useful when one wishes to bind a single script or style file with multiple components.

<!-- Script -->
<Page codeFile="~/views/common/myscript">

<!-- CSS -->
<Page cssFile="~/views/common/mystyle">


This loader requires a new webpack configuration:


const webpack = require('@nativescript/webpack');
const { getEntryDirPath, getPlatformName } = require('@nativescript/webpack/dist/helpers/platform');
const { chainLoaderConfiguration } = require("@nativescript-community/xml-ui-loader/dist/helpers/webpack");

module.exports = (env) => {

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

webpack.chainWebpack((config) => {
chainLoaderConfiguration(config, {
appPath: getEntryDirPath(),
platform: getPlatformName()

return webpack.resolveConfig();