App crashes when using builder within custom component after bundle-build with webpack #867
Comments
|
Hi @felix-idf, Thanks for the detailed explanation and the sample project. When you run an app with Webpack (--bundle), all pages and custom components have to be registered by calling the In order to make this process easier, each There is also xml-namespace-loader which is analyzing the XML of your pages and registers the custom components defined with In other words, you are getting this exception because the You've been really close by calling global.registerModule("DropdownList",
() => require("./shared/dropdown/DropdownList"));in your bundle-config.js, but the key should match the path used in the global.registerModule("shared/dropdown/DropdownList",
() => require("./shared/dropdown/DropdownList"));In order to get your app working, you currently have the following options:
...
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
registerModules: /(root|page|fragment)\.(xml|css|js|ts|scss)$/ // <-- fragment is added here
}
...then you just need to load the component with the new name: var dropdown = builder.load({
path: 'shared/dropdown/DropdownList-fragment',
name: 'DropdownList'
});I hope this clarifies the issue. We are also thinking about exposing an easier API for more page/component conventions in addition to |
|
Hi @DimitarTachev , thank you for the detailed explanation. This really helps. I fixed the issue with the Pagination component by editing the So for now, a mix of your sugesstions 1 and 4 seem to be applicable for us. Besides those javascript components (like DropdownBase and Pagination and some other ones) we have multiple xml-snippets in our project, that we want to share between several places in our app. But the code-behind of the elements within the snippet is defined for each page, where the snippet is used. So if there is nothing that can be done from the NativeScript side to bring us the old behaviour when not using WebPack, then we will have to put those snippets to fragments and register them like it is done in suggestion 4. We will see... So from here, thank you very much for your detailed help and for investigating this issue. |
|
extend documentation section here |
|
Where is the bundle-config.js located? I don't find it in my project. |
|
Hi @markusmauch, That's just a file from the sample project attached in the issue. There's nothing special about it. The requirement is that the component should be registered before the In the attached project, there is a In other words, you can register the custom component directly in your |
DimitarTachev
added
the
migration-to-bundle
|
@DimitarTachev Thanks for the clarification. Is it also possible to use this in order to register XML files?
|
|
@DimitarTachev - Is there a way we can do this (Also isn't bundle-config.js depreciated, I don't recall seeing it in any of the modern template sets.) |
|
@markusmauch, yes, it's possible and currently required :) If you are using the @NathanaelA, the app developers using the We do not recommend a manual registration from the plugin authors because registering all of the plugin components inside the plugin will break the UI components tree shaking as these UI components will be forcefully included in the app bundle. |
|
I'm closing this issue as starting from this PR and NativeScript 6.0, we are automatically including all app files instead of requiring the old You could also take a look at this issue comment for a way of excluding files from the Webpack compilation. |
Environment
Provide version numbers for the following components (information can be retrieved by running
tns infoin your project folder or by inspecting thepackage.jsonof the project):Just the config files package.json, webpack.config.js, bundle-config.js:
config_file.zip
Describe the bug
I have two custom components (code-only) in my app: DropdownList.js and Pagination.js.
In the Pagination.js component, I try to add the DropdownList component within the Pagination component like this:
But when navigating to page that uses the pagination component, the app crashes.
Please note that everything works as expected when building the app without the --bundle flage.
I have no idea where to start searching the cause of this issue.
I tried to register the components in bundle-config.js
I also added the shared folder here within webpack.config.js:
The crashlog can be found here:
The strange thing is this part of the crashlog:
To Reproduce
Just start the sample project, it will crash immediately, as I try to include the Pagination component in the main-page.xml.
Expected behavior
Sample project
Full sample project:
NSWebPackCustomComponent.zip
I appreciate any hint to figure out what causes this issue.
Again I want to mention one more time, that everything works when not using webpack (tns run android)
The text was updated successfully, but these errors were encountered: