Summary
Include details about your goal: I am attempting to include external libraries in a nativescript (vue) app; specifically openpgp
Describe expected and actual results: Initially, I expected to be able to add the external library to package.json and proceed. Upon further reading I realize there are some dependancies which are not available (fs, path, crypto, etc.). Investigating this issue, I found nodeify however, this did not resolve my issue. I've also tried node-polyfill without success.
Include any error messages: When not using nodeify/node-polyfill, I get 4 errors similar to this:
Module not found: Error: Can't resolve 'os' in 'PATH'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
The four libraries referenced in the exceptions are: 'os-browserify', 'browserify-zlib', 'crypto-browserify', 'stream-browserify'
When using node-polyfill my issue remains but the errors are semi-masked and look as follows:
ERROR in Cannot read property 'fallback' of undefined
ERROR in Cannot read property 'fallback' of undefined
ERROR in Cannot read property 'fallback' of undefined
ERROR in Cannot read property 'fallback' of undefined
ERROR in Cannot read property 'fallback' of undefined
What I've tried
As mentioned, I've tried with and without nodeify and node-polyfill. When not using node-polyfill I have attempted to set fallback however I am unsure of the syntax
EDIT: proper syntax for setting fallback
const webpack = require("@nativescript/webpack");
module.exports = (env) => {
webpack.init(env);
// Learn how to customize:
// https://docs.nativescript.org/webpack
webpack.chainWebpack(config => {
config.resolve.set('fallback', {
"os": require.resolve("os-browserify/browser"),
"zlib": require.resolve("browserify-zlib"),
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"util": require.resolve("util/"),
"buffer": require.resolve("buffer/")
});
});
return webpack.resolveConfig();
};
The above code block resolves the build errors, however the following runtime errors occur
System.err: TypeError: util.inherits is not a function
.....
webpack.config.js (with node-polyfill):
const webpack = require("@nativescript/webpack");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = (env) => {
webpack.init(env);
// Learn how to customize:
// https://docs.nativescript.org/webpack
webpack.chainWebpack(config => {
config.resolve.plugin('polyfills').use(NodePolyfillPlugin);
});
return webpack.resolveConfig();
};
Reproduce issue
ns create <project-name> --vue //effects --ts as well
npm install openpgp
Include require/import in script section
import * as openpgp from 'openpgp';
Related articles
https://stackoverflow.com/a/55478500
https://stackoverflow.com/a/71567424
https://stackoverflow.com/a/64580815
Other considerations:
I've read downgrading to webpack 4 (4.1.0) may resolve this; in updating package.json I updated the webpack.conig.js:
./node_modules/.bin/update-ns-webpack --configs
When doing so I get the following:
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/[user]/projects/android/[project]/webpack.config.js',
'/home/[user]/projects/android/[project]/node_modules/webpack-cli/bin/utils/convert-argv.js',
'/home/[user]/projects/android/[project]/node_modules/webpack-cli/bin/cli.js',
'/home/[user]/projects/android/[project]/node_modules/webpack/bin/webpack.js'
]