angular-localForage icon indicating copy to clipboard operation
angular-localForage copied to clipboard

Correct usage with webpack

Open matthias62 opened this issue 7 years ago • 3 comments

When using with webpack I get the warning:

WARNING in ./~/angular-localforage/~/localforage/dist/localforage.js Critical dependencies: 7:484-491 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

I learnt, that this is not critical but it produces side effects when using with angular fullstack generator. The automatic reload of the application on code changes hangs when that warning occurs and I have to do a manual reload of the application.

To get rid of the warning I had to webpack's noParse property with the following path syntax (because I am on Windows):

    noParse: /[\/\\]node_modules[\/\\]localforage[\/\\]dist[\/\\]localforage\.js$/,

After that the warning disappears and the auto reload on code changes works but I don't like the Windows dependent path which will probably not work when building on Linux.

What is the recommended way to use angular-localForage with webpack to avoid such platform specific issues?

Best regards Matthias

matthias62 avatar Jan 07 '18 15:01 matthias62

@matthias62

I'm not a Webpack user, but I'll give you my best guess as to a solution: declare localForage as your own dependency and make it's source available for bundling.

If you're able to get it working in an elegant way, please let me know and I can add some documentation to the project to help others who might be in your same situation, or you're welcome to open an documentation PR!

scotttrinh avatar Jan 07 '18 15:01 scotttrinh

@scotttrinh

Thank you but the guys at localForage do not recommend to use the original source. Furthermore I do not want to change the structure of the angular-localforage node package. I simply import now angular-localforage with:

import LocalForageModule from 'angular-localforage';

That automatically imports localforage as well. The only problem was the warning of webpack.

I now use the following solution in the webpack.make.js file of the angular fullstack generator. Seems to work on Windows and Linux. Maybe that helps others. Add the following noParse property to the module object in webpack.make.js

    /*
        Excludes the prebuild localforage library from parsing. Without that
        webpack produces a warning and the auto reolad of the app on code changes
        hangs and requires manual reloading.
        Two different path syntaxes for Windows and Linux build environments
    */
    noParse: [
        /[\/\\]node_modules[\/\\]localforage[\/\\]dist[\/\\]localforage\.js$/,
        /node_modules\/localforage\/dist\/localforage.js/
    ],

matthias62 avatar Jan 07 '18 15:01 matthias62

@scotttrinh

After checking the regular expressions in noParse I found that the first expression is already sufficient for both path syntax types on Windows and Linux. The second expression is henceforth redundant and can be removed.

matthias62 avatar Jan 07 '18 16:01 matthias62