Why is webpack outputting the const keyword instead of var? - phantomjs

Webpack appears to be outputting the const keyword instead of the var keyword which is breaking PhantomJS (as it doesn't support ES6 syntax).
...
/* 2 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
const testing_1 = __webpack_require__(3); // const keyword breaking PhantomJS
testing_1.describe('App', () => {
So PhantomJS reports
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
SyntaxError: Unexpected token 'const'
The file in question (karma-shim.js) is being processed by the karma-webpack preprocessor
karma-shim.js
'use strict';
Error.stackTraceLimit = Infinity;
require('es6-shim');
require('angular2/bundles/angular2-polyfills.js');
require('angular2/testing');
var appContext = require.context('./src', true, /root\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('angular2/testing');
var browser = require('angular2/platform/testing/browser');
testing.setBaseTestProviders(browser.TEST_BROWSER_PLATFORM_PROVIDERS, browser.TEST_BROWSER_APPLICATION_PROVIDERS);
karma.conf.js
...
preprocessors: {
'./karma-shim.js': ['webpack', 'sourcemap']
},
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"moduleResolution": "node",
"jsx": "react"
},
"exclude": [
"node_modules"
],
"compileOnSave": false,
"buildOnSave": false
}
webpack.config.js Is part of generator-ng2-webpack (https://github.com/cmelion/generator-ng2-webpack) but doesn't appear to mention transpilation.
Why would webpack be outputting const instead of var and is there anything I can do about it to help PhantomJS?

Related

app crashes on launch with absolute imports

In case it matters, this is my first time doing react-native on a Mac. The application works well when I am using relative imports but it crushes if I try absolute imports. My set up is:
bable.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'babel-plugin-transform-typescript-metadata',
['#babel/plugin-proposal-decorators', {legacy: true}]
],
};
tsconfig.js
// prettier-ignore
{
"extends": "#tsconfig/react-native/tsconfig.json", /* Recommended React Native TSConfig base */
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
"baseUrl": ".",
"paths": {
"myapp/*": ["src/*"]
},
"skipLibCheck": true, /* Skip type checking all .d.ts files. */
"experimentalDecorators": true,
"strict": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
}
}
After restarting my IDE, it does find the imports with no issue but compilation fails:
import { Btn } from 'myapp/components/Btn';
below works well:
import { Btn } from '../../components/Btn';

Error evaluating function `ceil`: argument must be a number

On OSX, after I installed all of dependencies by yarn install, The webpack bundle's output keeps showing the error Error evaluating function ceil: argument must be a number.
I have no idea why this happen but it works on my linux machine with the same package.json
Some info:
webpack: "5.56.0"
less: "^4.1.2"
less-loader: "^10.0.1"
Here is my less-loader config:
{loader: "less-loader"}
It looks like the there is a change of the default options of less based on what I've found in here
https://lesscss.org/usage/#less-options-math
The solution is adding the option for less-loader in webpack config as following:
{
loader: "less-loader",
options: {
lessOptions: {
math: 'always' // <=== add this
}
}
}
Also you should change => strictMath: false
Example (my file config-overrides.js):
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
addLessLoader({
cssLoaderOptions: {
sourceMap: true,
modules: {
localIdentName: "[hash:base64:8]",
},
},
lessLoaderOptions: {
lessOptions: {
math: "always",
modifyVars: { "#primary-color": "#2a4365" },
javascriptEnabled: true,
strictMath: false,
},
},
})
);

TypeOrm + Sqlite works only in development [React Native + Expo]

On development the app database works very well but when I generated APK it just not work, I can't use the database.
I found this answare of jbenzshawel:
1º: yarn add metro-minify-terser
2º: Update the metro config to keep class names and file names. Add the following to the metro.config.js transformer:
minifierConfig: {
ecma: 8,
keep_classnames: true,
keep_fnames: true,
module: true,
mangle: {
module: true,
keep_classnames: true,
keep_fnames: true,
},
},
So if you need to create metro.config.js add the following:
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.minifierPath = 'metro-minify-terser';
config.transformer.minifierConfig = {
ecma: 8,
keep_classnames: true,
keep_fnames: true,
module: true,
mangle: {
module: true,
keep_classnames: true,
keep_fnames: true,
},
};
module.exports = config;

Webpack can't resolve vue in node_modules/vue-template-compiler

I have a simple Typescript project with this code:
import {
parseComponent,
compile as compileTemplate,
ASTElement,
} from "vue-template-compiler";
...
I compile it using tsc with:
"target": "es2020",
"module": "commonjs",
And it gives code like this:
const vue_template_compiler_1 = require("vue-template-compiler");
In my package.json I have this:
"dependencies": {
"vue-template-compiler": "^2.6.12"
But I don't have "vue", because I don't need all of Vue - just the template compiler.
This all works fine, but I'm trying to use Webpack to bundle everyone into a single file. However, when I run webpack I get this error:
ERROR in ./node_modules/vue-template-compiler/index.js 2:19-41
Module not found: Error: Can't resolve 'vue' in '/path/to/myproject/node_modules/vue-template-compiler'
# ./build/analysis.js 8:32-64
# ./build/index.js 8:19-40
This corresponds to the require("vue-template-checker") line. Why do I get this error?
Here's my webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
target: "node",
entry: "./build/index.js",
mode: "production",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
],
};
That module makes Vue version check during import. I guess, you want to skip that check. I would try aliasing. Something like:
module.exports = {
// ...
resolve: {
alias: {
'vue-template-compiler$': 'vue-template-compiler/build.js'
}
}
}

Aurelia Bundling error

I am using a modified aurelia-navigation-skeleton to build my project (modified because I am also adding a servicestack backend).
First the error:
[16:33:59] Error tracing npm:crypto-browserify#3.11.0/example/bundle.js at file:///C:/MyProjectPath/jspm_packages/npm/crypto-browserify#3.11.0/example/bundle.js
Error: Unable to calculate canonical name to bundle file:///test.js. Ensure that this module sits within the baseURL or a wildcard path config.
at getCanonicalNamePlain (C:\MyProjectPath\node_modules\systemjs-builder\lib\utils.js:227:13)
at getCanonicalName (C:\MyProjectPath\node_modules\systemjs-builder\lib\utils.js:150:19)
at C:\MyProjectPath\node_modules\systemjs-builder\lib\trace.js:565:36
at run (C:\MyProjectPath\node_modules\karma\node_modules\core-js\modules\es6.promise.js:87:22)
at C:\MyProjectPath\node_modules\karma\node_modules\core-js\modules\es6.promise.js:100:28
at flush (C:\MyProjectPath\node_modules\karma\node_modules\core-js\modules\_microtask.js:18:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
I am not using crpto-browserify myself so I assume it is a dependency somewhere either within the skeleton or within Aurelia itself.
Project layout:
ProjectRoot
-- build (from skeleton)
-- tasks
-- src (standard aurelia layout here)
-- app.js/main.js/app.html
-- views
-- resources
-- etc...
-- default.html
-- node_modules
-- jspm_packages
-- jspm.config.js
-- package.json
jspm.config.js
System.config({
defaultJSExtensions: true,
transpiler: "typescript",
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "npm:aurelia-animator-css#1.0.1",
"aurelia-api": "npm:aurelia-api#3.1.1",
"aurelia-authentication": "npm:aurelia-authentication#3.3.0",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper#2.1.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection#1.3.0",
"aurelia-dialog": "npm:aurelia-dialog#1.0.0-beta.3.0.1",
"aurelia-fetch-client": "npm:aurelia-fetch-client#1.1.1",
"aurelia-framework": "npm:aurelia-framework#1.1.0",
"aurelia-pal-browser": "npm:aurelia-pal-browser#1.1.0",
"aurelia-router": "npm:aurelia-router#1.2.1",
"aurelia-templating-binding": "npm:aurelia-templating-binding#1.3.0",
"bootstrap": "github:twbs/bootstrap#3.3.7",
"font-awesome": "npm:font-awesome#4.7.0",
"moment": "npm:moment#2.17.1",
"numeral": "npm:numeral#2.0.4",
"servicestack-client": "npm:servicestack-client#0.0.26",
"text": "github:systemjs/plugin-text#0.0.9",
"typescript": "npm:typescript#2.2.1",
"github:jspm/nodelibs-assert#0.1.0": {
"assert": "npm:assert#1.4.1"
},
...
...
...
}
bundle.js
var gulp = require('gulp');
var bundler = require('aurelia-bundler');
var bundles = require('../bundles.js');
var config = {
force: true,
baseURL: '.',
configPath: './jspm.config.js',
bundles: bundles.bundles
};
gulp.task('bundle', ['build'], function() {
return bundler.bundle(config);
});
gulp.task('unbundle', function() {
return bundler.unbundle(config);
});
bundles.js
module.exports = {
"force": true,
"packagePath": ".",
"configPath": [ // SystemJS/JSPM configuration files
"./jspm.config.js"
],
"injectionConfigPath": "./jspm.config.js",
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": true
}
},
"dist/aurelia": {
"includes": [
"aurelia-api",
"aurelia-authentication",
"aurelia-framework",
"aurelia-pal-browser",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-dialog",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-binding",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"moment",
"numeral",
"servicestack-client",
"bootstrap",
"bootstrap/css/bootstrap.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": true
}
}
}
};
The error means nothing to me and other posts about this error talk about changing the BaseURL, but I don't know what I would change it to to make this work. Any help would be appreciated.