Closed kriefsacha closed 3 years ago
TextDecoder
is built in to the web platform and node.js since v12.
I think the only place I'm using process.env
is in the tests, but if you can provide a backtrace I'll look into it more.
I've never used nativescript, can you make sure you have the latest version if possible?
@hildjj thank you for your fast answer that is a very big problem for us.
My node js version is 12.14.0.
The thing is nativescript is not a web platform but it uses javascript typescript and html so i thought it would work.
That's in case of if i use cbor-web.
About the regular cbor thats very weird because i soon as i put: const cbor = require('cbor');
i get:
System.err: TypeError: Cannot read property 'env' of undefined
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read property 'env' of undefined
System.err: File: (file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:184044:19)
System.err:
System.err: StackTrace:
System.err: ../node_modules/readable-stream/readable.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:184044:20)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at ../node_modules/stream-browserify/index.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:202617:19)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at ../node_modules/cbor/lib/commented.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:137069:16)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at ../node_modules/cbor/lib/cbor.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:136961:21)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at ./app/scan/scan.component.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:3597:12)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at ./app/app-routing.module.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:273:82)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at ./app/app.module.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:401:77)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err: at (file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:7437:73)
System.err: at ./main.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:7499:30)
System.err: at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err: at checkDeferredModules(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:44:23)
System.err: at webpackJsonpCallback(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:31:19)
System.err: at (file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:2:57)
System.err: at require(:1:266)
OK, this use of process.env is coming from readable-stream. See https://github.com/nodejs/readable-stream/issues/412 for people that are having similar issues. You might be able to mock it out to just be {}
, but I'm no webpack expert.
What JS runtime is nativescript using? It's really odd that it doesn't have TextDecoder
. You should be able to use util.TextDecoder
which does the same thing, if you can get webpack to substitute it.
@hildjj the thing is that i don't know where to mock the process.env
or substitue the TextDecoder
either because on the result i see that you get oncbor-web
its a regular js where you do new TextDecoder
so how am i able to change it toutil.TextDecoder
:( I don't know a lot of webpack neither.. That's too bad :/
Something like:
const webpack = require('webpack');
module.exports = {
{...}
resolve: {
alias: {
process: 'process/browser',
}
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
]
}
and add process
as a dependency.
@hildjj for now i tried to do as on the PR you sended to me, adding the
typeof process !== 'undefined'
into readable-stream and now i get the same error but from util/util
I did what you told me on webpack didnt change a thing. im gonna try to to the same thing i did at redable-stream but on util. Hope it will not touch something else. My webpack file just in case:
const { join, relative, resolve, sep, dirname } = require("path");
const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader");
const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng");
const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils");
const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const TerserPlugin = require("terser-webpack-plugin");
const { getAngularCompilerPlugin } = require("nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin");
const hashSalt = Date.now().toString();
module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
const appComponents = [
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
];
const platform = env && (env.android && "android" || env.ios && "ios");
if (!platform) {
throw new Error("You need to provide a target platform!");
}
const AngularCompilerPlugin = getAngularCompilerPlugin(platform);
const projectRoot = __dirname;
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file.
appPath = "src",
appResourcesPath = "App_Resources",
// You can provide the following flags when running 'tns run android|ios'
aot, // --env.aot
snapshot, // --env.snapshot,
production, // --env.production
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
hmr, // --env.hmr,
unitTesting, // --env.unitTesting
verbose, // --env.verbose
snapshotInDocker, // --env.snapshotInDocker
skipSnapshotTools, // --env.skipSnapshotTools
compileSnapshot // --env.compileSnapshot
} = env;
const useLibs = compileSnapshot;
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
const externals = nsWebpack.getConvertedExternals(env.externals);
const appFullPath = resolve(projectRoot, appPath);
const tsConfigName = "tsconfig.tns.json";
const tsConfigPath = join(__dirname, tsConfigName);
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
let coreModulesPackageName = "tns-core-modules";
const alias = {
'~': appFullPath
};
const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
if (hasRootLevelScopedModules) {
coreModulesPackageName = "@nativescript/core";
alias["tns-core-modules"] = coreModulesPackageName;
nsWebpack.processTsPathsForScopedModules({ compilerOptions });
}
if (hasRootLevelScopedAngular) {
alias["nativescript-angular"] = "@nativescript/angular";
nsWebpack.processTsPathsForScopedAngular({ compilerOptions });
}
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
const entryPath = `.${sep}${entryModule}`;
const entries = { bundle: entryPath };
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
if (platform === "ios" && !areCoreModulesExternal) {
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
};
const ngCompilerTransformers = [];
const additionalLazyModuleResources = [];
if (aot) {
ngCompilerTransformers.push(nsReplaceBootstrap);
}
if (hmr) {
ngCompilerTransformers.push(nsSupportHmrNg);
}
// when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
// directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
// fixes https://github.com/NativeScript/nativescript-cli/issues/4024
if (env.externals && env.externals.indexOf("@angular/core") > -1) {
const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule), tsConfigName);
if (appModuleRelativePath) {
const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath));
// include the lazy loader inside app module
ngCompilerTransformers.push(nsReplaceLazyLoader);
// include the new lazy loader path in the allowed ones
additionalLazyModuleResources.push(appModuleFolderPath);
}
}
const ngCompilerPlugin = new AngularCompilerPlugin({
hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)),
mainPath: join(appFullPath, entryModule),
tsConfigPath,
skipCodeGeneration: !aot,
sourceMap: !!isAnySourceMapEnabled,
additionalLazyModuleResources: additionalLazyModuleResources,
compilerOptions: { paths: compilerOptions.paths }
});
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
const itemsToClean = [`${dist}/**/*`];
if (platform === "android") {
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
}
const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(join(projectRoot, tsConfigName));
nsWebpack.processAppComponents(appComponents, platform);
const config = {
mode: production ? "production" : "development",
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
// Don't watch hidden files
"**/.*",
]
},
target: nativescriptTarget,
entry: entries,
output: {
pathinfo: false,
path: dist,
sourceMapFilename,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
hashSalt
},
resolve: {
extensions: [".ts", ".js", ".scss", ".css"],
// Resolve {N} system modules from tns-core-modules
modules: [
resolve(__dirname, `node_modules/${coreModulesPackageName}`),
resolve(__dirname, "node_modules"),
`node_modules/${coreModulesPackageName}`,
"node_modules",
],
alias: {
process: 'process/browser'
},
symlinks: true
},
resolveLoader: {
symlinks: false
},
node: {
// Disable node shims that conflict with NativeScript
"http": false,
"timers": false,
"setImmediate": false,
"fs": "empty",
"__dirname": false,
},
devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
optimization: {
runtimeChunk: "single",
noEmitOnErrors: noEmitOnErrorFromTSConfig,
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
chunks: "all",
test: (module, chunks) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) ||
appComponents.some(comp => comp === moduleName);
},
enforce: true,
},
}
},
minimize: !!uglify,
minimizer: [
new TerserPlugin({
parallel: true,
cache: true,
sourceMap: isAnySourceMapEnabled,
terserOptions: {
output: {
comments: false,
semicolons: !isAnySourceMapEnabled
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
'collapse_vars': platform !== "android",
sequences: platform !== "android",
}
}
})
],
},
module: {
rules: [
{
include: join(appFullPath, entryPath),
use: [
// Require all Android app components
platform === "android" && {
loader: "nativescript-dev-webpack/android-app-components-loader",
options: { modules: appComponents }
},
{
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
angular: true,
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
}
},
].filter(loader => !!loader)
},
{ test: /\.html$|\.xml$/, use: "raw-loader" },
{
test: /[\/|\\]app\.css$/,
use: [
"nativescript-dev-webpack/style-hot-loader",
{
loader: "nativescript-dev-webpack/css2json-loader",
options: { useForImports: true }
}
]
},
{
test: /[\/|\\]app\.scss$/,
use: [
"nativescript-dev-webpack/style-hot-loader",
{
loader: "nativescript-dev-webpack/css2json-loader",
options: { useForImports: true }
},
"sass-loader"
]
},
// Angular components reference css files and their imports using raw-loader
{ test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
{ test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
"nativescript-dev-webpack/moduleid-compat-loader",
"nativescript-dev-webpack/lazy-ngmodule-hot-loader",
"@ngtools/webpack",
]
},
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
{
test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
parser: { system: true },
},
],
},
plugins: [
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"process": "global.process",
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
// Remove all files from the out dir.
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
{ from: { glob: "**/*.jpeg" } },
{ from: { glob: "**/*.wav" } }
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
new CopyWebpackPlugin([
{
from: 'src/assets/i18n',
to: `${dist}/i18n`,
context: projectRoot
},
]),
new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
ngCompilerPlugin,
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin(),
],
};
if (report) {
// Generate report files for bundles content
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
generateStatsFile: true,
reportFilename: resolve(projectRoot, "report", `report.html`),
statsFilename: resolve(projectRoot, "report", `stats.json`),
}));
}
if (snapshot) {
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
chunk: "vendor",
angular: true,
requireModules: [
"reflect-metadata",
"@angular/platform-browser",
"@angular/core",
"@angular/common",
"@angular/router",
"nativescript-angular/platform-static",
"nativescript-angular/router",
],
projectRoot,
webpackConfig: config,
snapshotInDocker,
skipSnapshotTools,
useLibs
}));
}
if (hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};
I changed in util and then it told be about a variable called "browser" and then in stream-readable/writable.. im gonna continue tomorrow its 9:31pm here. Will keep you posted. Thanks for your help @hildjj
@hildjj so what i did at the end, i made a webview , with a page that i created and puted on my website, it interacts with it threw events. I send her the string , she decode it threw cbor-web and send me back the result. It works very good if someone has the same problem
Hi, little question.
I have a nativescript angular app where i need to decrypt cbor. The thing is when i put cbor-web i have an error about textDecoder not defined, and when i put cbor (which is node-cbor i guess) i have an error about 'env' not defined.
It's working with webpack and typescript/javascript.
How do you think can i do ?
Please help. Thanks