IOS -JS ERROR Error: Failed to create file at path .... phone.css

4 posts, 0 answers
  1. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 04 Oct Link to this post

    Hi
    After a lot of efforts I finally managed to get my project to build with webpack in both android and IOS - npm run build-ios-bundle and npm run build-android-bundle both work and I am able to build the project successfully.
    However when i try to run the project in IOS i get the following error:
    Failed to create file at path '/var/containers/Bundle/Application/0B693BA3-00EC-4C21-90CF-14E92AA0D68C/questNewS.app/app/phone.css'

    Also the styles and the custom fonts that I have used to create the project are not applied and the styling breaks completely.
    Please let me know what I can do or if you need more information.
    Project uses the latest tns version 3.2.0.
    Thanks
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 05 Oct Link to this post

    Hello Anurag,

    To reproduce the issue, I have created this test project using two custom fonts and a CSS file called phone.css located in the application root directory (app folder). However, with these settings the bundling is successful, and the projects run as expected (fonts and styles are applied).
    Here are the steps -taken
    - created fonts folder with the custom fonts
    - created phone.css with the custom styles
    - using the custom styles with relative path here and applying the styles here (note that you still need module.id to resolve the relative path in the component file)
    - installing WebPack plugin
    npm i nativescript-dev-webpack --save-dev
    npm install
    - bundling the app
    npm run start-ios-bundle

    The project is built and started on a device and the custom fonts and styles are applied as expected.

    Please provide more information about how you are working with phone.css (the file in the error log).
    If that file is created runtime make sure that you have included it in your webpack.config.js as described in this article section about adding extra assets. Another possible thing you might consider if the CSS file is created runtime is to use the documents folder instead of the currentApp folder on iOS as discussed here.

    If none of the above suggestions are valid for your scenario, pelase send us more detailed information about your specific project settings (full error log, package.json and information about how phone.css is used in your project ). If sending the original project is not an option, perhaps you can try isolating the issue using your custom fonts and CSS files in a separate new test project.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 05 Oct in reply to Nikolay Iliev Link to this post

    Thanks a lot Nikolay. Your detailed response helped - I was generating the css files at runtime and as suggested by you needed to add those extra assets  as described in the article. Adding 

    { from: "**/*.css" },

     to the Webpackcopy plugin got it working.

    Happy to report a dramatic reduction (less than half)in the startup time for the app. Thanks for your awesome support. Now will try to get the android version working as well.

    Regards

    Anurag

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 05 Oct Link to this post

    Hello Anurag,

    Very glad to hear that the issue is now resolved!
    Do let me know if you need further assistance on that or other matter.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top