"monaca debug" issues in vue-cordova-webpack template

denious

Running “monaca debug” and connecting to the app through my phone displays a blank page with no errors.

In the command line I get the following message when my phone connects:
Cannot find module ‘…\vue-cordova-webpack\.monaca\project_info.json’

This is correct, and in fact the .monaca directory is missing entirely from the template.

Attempting to run “monaca reconfigure” to generate the missing files, I am presented with the following error:
Something went wrong during reconfiguration. Cannot read property ‘build’ of null

What am I doing wrong and how do I get the app running on my phone?
Thanks!

denious

After running “monaca upload” and then “monaca clone”, I managed to get the .monaca folder and other changes back into my local build. However, the app is still blank when tested with “monaca debug”.

I then added 3 console outputs: index.html, main.js, app.vue. See output of “monaca preview” vs. “monaca debug”.
Again, no error messages anywhere. The app runs fine in “monaca preview”.

Not sure how to proceed, any input?

monaca preview

monaca debug

denious

denious

Got USB debugging to work and here’re further developments: static files aren’t being served.
See below for the folder structure, index.html, and the failed 404 requests in the debugger.

Still no clue how to fix this, though…

<!DOCTYPE html>
<html>
   <head>
      <meta charset=utf-8>
      <title>vue-cordova-webpack</title>
      <script src=https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js></script>
      <script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js></script>
      <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js></script>
      <link href=/static/css/app.39d2c30575368862e7814c7833ec12eb.css rel=stylesheet>
   </head>
   <body>
      <script>console.warn('index.html loaded');</script>
      <div id=app></div>
      <script type=text/javascript src=/static/js/manifest.3cae06e67ad1fa63ae76.js></script>
      <script type=text/javascript src=/static/js/vendor.5c6526a2bcac44902aab.js></script>
      <script type=text/javascript src=/static/js/app.c0e1673d8d64da5e1ce3.js></script>
   </body>
</html>

Fran Diox

@denious Are you following this guide?

Monaca Debugger currently needs all the files to be generated in www. Make sure you have those generated files there. monaca preview or npm run dev will only put those files in memory but not in www, so make sure you generate them with npm run build:watch for debugging.

denious

@Fran-Diox Thanks for your response. I understand this requirement.

Yes, we did follow this guide and started off with this template.
Please see screenshots in my previous post, it shows the “www” folder with all the files inside.

The Chrome DevTools screenshot is taken with USB debugging from Monaca Debugger.

Andi

@denious I tried in the same environment as your and had no problems at all.
Could you please tell us the following information:

Device name
Os version
Monaca Debugger version

Here is some info that may help to solve the issue.

Try to create the project once again in a new directory, making sure it’s not a subdirectory of another Cordova/Monaca project.
Make sure your firewall is correctly set to allow Monaca CLI/Node connections.

denious

@Andi Here’s the full project on GitHub with just one component for testing: https://github.com/denious/monaca-vue-webpack-blank

Comes out blank in my environment with the same issue as above in Chrom DevTools launched through Monaca Debugger:
404 for all static files.

Firewall is OK since I am able to load the app and see the debugger request all the files (see screenshots).

Samsung Galaxy S7 w/ Android 7.0
Windows 10 x64 (15063.483)
Monaca Debugger 6.1.1

Fran Diox

@denious Did you manually modify build configuration or do you have a very outdated version of vue-cordova-webpack?
Remove / from this line (make it like the original template) and it will work. Just tested it.

denious

@Fran-Diox Thanks for the response. Remember this thread?
https://community.onsen.io/topic/1544/problem-requesting-fonts-in-onsenui-vue-cordova-webpack-template/4

I applied the same fix to Production because of the same issue: fonts are not loading without the ‘/’.
What do? Can you please explain how this single slash affects everything?

This is an example of a request URL, getting 404:
file:///data/user/0/mobi.monaca.debugger/files/projects/local/3633730db0734a20c546d5aff9960041bf9102d2l/59889d4dcc49372bf720b9df87150633de3039077fd301c523e977be788b016b /www/static/css/static/fonts /fontawesome-webfont.af7ae50.woff2

Static images (from the actual static folder) are also not loading.

This is the new Production build code.
Same exact issue as in the thread I linked above.

    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../www/index.html'),
        assetsRoot: path.resolve(__dirname, '../www'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }

Files requested by Monaca Debugger:

Results in Chrome DevTools:

Fran Diox

@denious As mentioned in that topic, that fix only works for development. I explained it there:

If you wonder why it is different for development and production, well, Cordova uses file://some/path/www/… for serving files so we cannot use absolute paths, it must be relative.

Not sure what else can I add to that. If you use an absolute path / it will overwrite Cordova’s file://some/path/, which is mandatory.

For the fonts, there is a fix in the original template that perhaps you removed.

For the static files, read more about it in the template docs. Since you’ve updated the public path, you’ll probably need to include static files with img src="static/something.png", without leading /.

denious

@Fran-Diox I don’t get your response. You can see in the code and the screenshots above that I removed the “/” from the Production build and that I’m still seeing errors loading fonts. Nothing has been changed in the webpack.base.conf.js file; in fact, the link you posted goes to the code in my own test repository that I posted for you and contains exactly the same code as my actual project minus components and CSS.

So in my understanding I have followed everything you’ve said and am still getting the error.

I have updated the repository with your recommended fixes, added a sample test page that has some icons (so needs fonts), and am running all the latest tools and packages. When I run it, the icons don’t display on the page and in Chrome DevTools opened through the Monaca Debugger I get 404s loading fonts.

https://github.com/denious/monaca-vue-webpack-blank

Can you please point me to what I need to change in this exact repository to get the fonts to load?
I’m not trying to argue, Fran, just trying to get my project running.

ericbehughes

I am getting the same errors cloned the repository and running in local kit version: 2.3.7
tried on iphone as well icons don’t appear either

Fran Diox

@denious

in fact, the link you posted goes to the code in my own test repository that I posted for you and contains exactly the same code as my actual project minus components and CSS.

When I was comparing both configurations, I copied the link from your repo instead of the original template by mistake. This is the one I wanted to share: https://github.com/OnsenUI/vue-cordova-webpack/blob/master/template/build/webpack.base.conf.js#L75

I fixed the link in the previous post as well.

I’m not in the office right now so I’ll test your repo again on Monday but I think that, if you are using fonts like in the original template, that configuration should make it work in Cordova.

ericbehughes

This post is deleted!

Fran Diox

@Eric-Hughes I think this is working well in the original template so you guys could just make a new project and move your code there. The vue-router template is just a project created with vue init OnsenUI/vue-cordova-webpack, nothing else :P

– oops, I just noticed that your comment was deleted so this post might look weird :sweat_smile:

ericbehughes

could you get this to work with pictures. we’re having a hard time getting the pictures to work on the debugger and on local kit. works fine with npm build:watch and monaca preview, but doesnt load pictures on local kit or with monaca debugger.

both hard coded and dynamically bound would be awesome thanks alot.

and yea my deleted comment wasnt ideal solution after peer reviewing with team.

Fran Diox

@ericbehughes Well, the thing is that the original template is working with fonts and pictures in three different ways: loading from src/assets/ directory, loading from static/ directory, and even in CSS background-image: url('../assets/logo.png'). I just tested in Monaca Debugger once again and can’t find any issue with fonts or images.

I’m sorry if it sounds like I’m repeating myself and it doesn’t help you, but I honestly don’t know how can I fix your issue if it is working well in the original template. Are you loading your assets in a different way that I didn’t mention? Did you modify any other configuration file and perhaps this broke?

Again, differences between src/assets and static are explained in the official docs of the Vue template. Just consider that the assetsPublicPath for production is '' (relative) for Cordova limitations (it loads everything on file://specific/cordova/path/www/yourApp). By the way, I think LocalKit only uses production builds, so I guess the problem is the same.

The loaders configuration is in build/webpack.base.conf.js. You can add there any missing extension if it is not provided already.

denious

@Fran-Diox Thanks for all your help, we’re up and running. The issue was not the slash (although the slash created another issue), the original issue was the latest version of Monaca Debugger. We upgraded it at the same time as we made changes to the vue router, and thought something went wrong with our configuration. Yesterday, we realized that in the Debugger, once you get the loading bar, the file sync would stop and freeze somewhere in the middle (ex files 2 out of 13) for about 30 seconds to a minute, after which the app would open to a white screen with the errors I originally provided. Clearing the cached files did nothing, but uninstalling and reinstalling the Debugger app fixed everything.

So if for some reason someone notices that their app has stopped loading for no good reason, try uninstall and reinstall.
Thanks again for all your help, we did learn a lot about webpack and various config settings thanks to this whole ordeal! :)

Fran Diox

@denious I see, thanks for sharing the end of the story! Yeah, hopefully after this, Webpack is not a black box anymore :stuck_out_tongue:

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

"monaca debug" issues in vue-cordova-webpack template