I am developing a web project using ES 6 in combination with the Babel transpiler and System.js as module loader. In all browsers from IE 9 up, that works well, unfortunately I have to support IE 8 though.
In the unbundled file, IE 8 can't even load my main.js file. It fails with the following console message without indicating any line of code.
Potentially unhandled rejection [4] SyntaxError: Error loading "main" at http://localhost:8080/assets/js/main.js
Error loading "npm:babel-core#5.8.22" at http://localhost:8080/assets/libs/npm/babel-core#5.8.22.js
expected identifier
I am using jspm as a dependency manager. The bundled sfx file built with jspm bundle-sfx yields a different error:
cannot read property "call" of undefined
Here, at least a line is given, it points to the following function of the system.js core:
function forEachGlobal(callback) {
iterateGlobals(function(globalName) {
if (indexOf.call(ignoredGlobalProps, globalName) != -1)
return;
try {
var value = loader.global[globalName];
}
catch(e) {
ignoredGlobalProps.push(globalName);
}
callback(globalName, value);
});
}
indexOf is indeed undefined here when logging it to the console, although it shouldn't, because it is defined earlier in the file.
The only relevant additional info I can give you is my package.json:
{
// some metadata
"devDependencies": {
"jspm": "^0.15.7",
"jspm-bower-endpoint": "^0.3.2",
// some more grunt tasks
},
"jspm": {
"directories": {
"baseURL": "source",
"packages": "source/assets/libs"
},
"dependencies": {
// frontend libraries
},
"devDependencies": {
"babel": "npm:babel-core#^5.1.13",
"babel-runtime": "npm:babel-runtime#^5.1.13",
"core-js": "npm:core-js#^0.9.4"
},
}
}
Officially, both system.js and babel support IE 8. I couldn't find everyone else with this issue, so I hope someone can help me solving that issue.
Thanks in advance!
Related
I'm new the world of automating/testing/bunding with JS and I've got parcel setup for the most part but I noticed that when it builds files, it does not actually save them with the .min.js part in the file name. I'm wondering if theres a way to do this without having to rename the build file manually.
I'm also trying to find a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me
Here's what my package.json looks like
{
"name": "lpac",
"version": "1.3.1",
"description": "",
"dependencies": {},
"devDependencies": {
"parcel": "^2.0.0-rc.0"
},
"scripts": {
"watch": "parcel watch --no-hmr",
"build": "parcel build"
},
"targets": {
"lite-maps": {
"source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
"distDir": "./path/build/"
}
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"outputFormat" : "global",
}
I checked out the docs but I couldn't find anything on linting or beautifying with parcel. How can i go about doing that? If you have tutorial links to doing so please also share because resources/tutorials seem scarce for anything other than the basic watching and building files
Unfortunately, there is no out-of-the-box setting that can cause parcel javascript output look like [fileName].[hash].min.js instead of [fileName].[hash].js. The .min.js extension is just a convention to keep output files distinct from source files, though - it has no effect at runtime - and the fact that parcel does automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.
However, if you really, really want this anyways, it's relatively simple to write a Namer plugin for parcel that adds .min.js to all javascript output:
Here's the code:
import { Namer } from "#parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "js") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.min.js`;
}
}
// Returning null means parcel will keep the name of non-js bundles the same.
return null;
},
});
Then, supposing the above code was published in a package called parcel-namer-js-min, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-js-min", "..."]
}
Here is an example repo where this is working.
The answer to your second question (is there "a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me") is unfortunately, no.
However, parcel can work well side-by-side with other command line tools that do this do this. For example, I have most of my projects set up with a format command in the package.json, that looks like this:
{
...
"scripts": {
...
"format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
}
...
{
You can easily make that command automatically run for git commits and pushes with husky.
The Problem
I am attempting to run a Cucumber test using a Karma test runner in my Npm project using the karma-cucumber-js adapter. However, when running my test, I find the following error in my console:
START:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: __adapter__
at features/Test.steps.js:80
For more context, I am in the middle of a platform migration. We had a complex system in place previously that essentially used karma 1.7.x, cucumber 1.2.x, karma-cucumber-js 0.3.3, and Node 0.8.x. I am trying to set up a simple npm project with the same exact versions (except now I'm using Node 8.x as I am not allowed to use 0.8.x). We have a suite of thousands of old tests that we'd like to minimize modifications for, and it would be easiest to get the karma-cucumber-js plugin working due to how tightly coupled our test system is with both karma and cucumber.
Things I've Tried
I played around with the dependent karma-cucumber-js source code a bit by tweaking the code in my package's node_modules directory as an attempt to better understand the issue at hand. I was able to bypass the issue above by modifying these lines in adapter.js to globalize the adapter variable in the window as follows:
var __adapter__;
(function (win) {
var adapter = new karma.CucumberAdapter(__karma__);
__adapter__ = adapter;
__karma__.start = adapter.getStart();
win.__adapter__ = __adapter__;
})(window);
Which lead to the next error:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: Cucumber
at node_modules/karma-cucumber-js/src/adapter.js:242
Which I worked around by adding the following line of code to the top of that very file after 'use strict':
var Cucumber = require('../../cucumber/release/cucumber.js');
Which lead to this issue:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: CucumberHTML
at node_modules/karma-cucumber-js/src/adapter.js:177
And the workaround was to manually require that file adapter.js as well:
var CucumberHTML = require('../../cucumber-html/src/main/resources/cucumber/formatter/formatter.js');
With this "hack" in place, the cucumber tests are now able to run successfully:
START:
PhantomJS 2.1.1 (Mac OS X 0.0.0) LOG: 'Found features: /base/features/Test.feature'
PhantomJS 2.1.1 (Mac OS X 0.0.0) LOG: 'Tags: '
Is it Friday yet?
Friday is Friday
✔ Given today is Friday
✔ When I ask whether it's Friday yet
✔ Then I should be told "TGIF"
Finished in 0.002 secs / 0.002 secs # 19:36:12 GMT-0700 (PDT)
SUMMARY:
✔ 3 tests completed
The underlying issue seems to be that [these Typescript variables][4] declared at the end of the karma-cucumber-js packages are, for some reason, not available to use. Which I believe is due to a webpack wiring issue.
Some other things I've tried:
Using other karma-cucumber adapters (there are 2 others), no luck.
Playing around with karma/phantomjs/cucumber version combinations
Using Firefox and Chrome in replacement of PhantomJS
My questions
I need help understanding why this webpack setup is not working. How can I fix this?
Are there any steps I'm missing or alternative approaches I should be taking to debug and resolve the issue at hand?
I've included some of the project code below, thank you for your time!
Project Code
package.json:
{
"name": "npm-pretty-much-local-example",
"version": "1.0.0",
"scripts": {
"wp": "webpack",
"wpd": "webpack --debug",
"test": "./node_modules/karma/bin/karma start"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"#babel/preset-react": "^7.7.0",
"babel-loader": "^8.0.0",
"#babel/preset-typescript": "^7.7.x",
"babel-generator": "^6.26.1",
"babel-core": "^6.26.3",
"cucumber": "^1.2.x",
"jquery": "^3.4.1",
"karma": "^1.7.x",
"karma-cucumber-js": "^0.3.3",
"karma-mocha-reporter": "^2.0.5",
"karma-phantomjs-launcher": "^1.0.x",
"karma-webpack": "^1.7.x",
"socket.io": "^1.4.x",
"webpack": "^3.7.1",
"setimmediate": "^1.0.5",
"karma-typescript-preprocessor": "^0.4.0"
},
"dependencies": {}
}
webpack.config.js:
const path = require('path');
module.exports = {
context: path.resolve('.'),
entry: './src/index.js',
output: {
filename: "./dist/output.js"
},
resolve: {
extensions: ['.js'],
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
]
}
};
Test.feature:
#Test
Feature: Is it Friday yet?
Everybody wants to know when it's Friday
Scenario: Friday is Friday
Given today is Friday
When I ask whether it's Friday yet
Then I should be told "TGIF"
Test.steps.js:
function isItFriday(today) {
if (today === "Friday") {
return "TGIF";
} else {
return "Nope";
}
}
// TODO: why is this not defined, and how was __adapter__ defined in the first place?
__adapter__.addStepDefinitions(function (scenario) {
scenario.Given('today is {string}', function (givenDay) {
this.today = givenDay;
});
scenario.When('I ask whether it\'s Friday yet', function () {
this.actualAnswer = isItFriday(this.today);
});
scenario.Then('I should be told {string}', function (expectedAnswer) {
return this.actualAnswer === expectedAnswer;
});
});
src/index.js
var dummyVar = "";
I am using hapi for one of my node+typescript project. I am trying to update hapi to the new #hapi/hapi package, due to the deprecation of the "naked" packages. I've changed #types/hapi to #types/hapi__hapi.
As soon as I updated, I started getting the TypeScript error -
node_modules/#types/hapi__hapi/index.d.ts:514:32 - error TS2709: Cannot use namespace 'Boom' as a type.
514 response: ResponseObject | Boom;
~~~~
node_modules/#types/hapi__hapi/index.d.ts:4050:18 - error TS2709: Cannot use namespace 'Boom' as a type.
4050 (Error | Boom) |
~~~~
Found 2 errors.
Here's the dependencies I have in package.json -
{
...
"devDependencies": {
...
"#types/hapi__boom": "7.4.1",
"#types/hapi__hapi": "18.2.5",
"#types/hapi__joi": "16.0.1",
"#types/nock": "10.0.3",
"#typescript-eslint/eslint-plugin": "2.4.0",
"jest": "24.9.0",
"nock": "11.4.0",
"nodemon": "1.19.4",
"prettier": "1.18.2",
"typescript": "3.6.4"
},
"dependencies": {
...
"#hapi/boom": "8.0.1",
"#hapi/hapi": "18.4.0",
"#hapi/joi": "16.1.7",
"axios": "0.19.0",
"axios-retry": "3.1.2"
},
...
}
I checked the node_modules/#types/hapi__hapi/index.d.ts file and it was importing Boom using the following way -
import * as Boom from '#hapi/boom';
When I change it to
import { Boom } from '#hapi/boom';
and it solved the error.
I can't change the index.d.ts file, as it's from #types/hapi__hapi package, but I want to solve this issue. Is there anything I can do to not have this error, such as downgrading to some specific version?
I checked the issues at #hapi/boom and they included types in 7.x release which were breaking typescript build. They removed types from 7.x releases, but put them back in 8.x, and since I was using #hapi/boom 8.0.1, it was conflicting with the existing types.
All the hapi ecosystem is going to include type definitions in them, but other packages are not updated to do it (as far as I could tell), thus the only way to resolve this issue without breaking breaking TypeScript builds is to downgrade #hapi/boom to 7.4.11.
PS: I found out the github issues minutes after posting the question, but I am still open for better answers, if there is one.
I'm attempting to transpile Salesforce Commerce Cloud's .ds files to JavaScript so we can apply standard testing tools (Jest, Mocha, etc.). The SFCC docs indicate that .ds files are "Rhino JavaScript", with a non-standard extension for Flow-like type checking.
So far, stripping out the type annotations has been simple, using the transform-flow-strip-types plugin. But SFCC supports a deprecated "for each...in" statement from JavaScript 1.6 that Babel is choking on.
All code below is available on github.
Here's my source src/index.ds file:
function dump(a: Array) {
for each (var x in a) {
console.log(x);
}
}
module.exports = dump;
And my gulfile.js:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('test', function () {
gulp.src('src/**/*.ds')
.pipe(babel())
.pipe(gulp.dest('dst'));
});
And this is my package.json:
{
"name": "dspoc",
"version": "1.0.0",
"description": "poc",
"main": "index.ds",
"author": "cjr",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1"
},
"babel": {
"plugins": [
"transform-flow-strip-types"
]
}
}
When I run gulp test, I get this:
%> gulp test
[11:23:06] Using gulpfile ~/dev/dspoc/gulpfile.js
[11:23:06] Starting 'test'...
[11:23:06] Finished 'test' after 9.15 ms
events.js:163
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/craser/dev/dspoc/src/index.ds: Unexpected token, expected ( (2:5)
1 | function dump(a: Array) {
> 2 | for each (var x in a) {
| ^
3 | console.log(x);
4 | }
5 | }
at Parser.pp$5.raise (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp.expect (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:1749:33)
at Parser.pp$1.parseForStatement (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:2008:8)
at Parser.pp$1.parseStatement (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:1836:19)
at Parser.parseStatement (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:5910:22)
at Parser.pp$1.parseBlockBody (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseBlock (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:2247:8)
at Parser.pp$3.parseFunctionBody (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:4235:22)
at Parser.parseFunctionBody (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:5897:20)
I've spent quite a bit of time digging for a plugin that will let Babel transpile this to something like the for...of statement, but I can't seem to find anything.
I'm now at the precipice of digging into the for-of transform was built and creating something similar to transform for each...in, but I really don't want to have to put that work in if I can avoid it.
I feel like I'm missing something obvious here. Anyone know how this can be done?
for each...in was never an official part of the spec and didn't exist by the time Babel came around, so it is not supported by Babel. I'm afraid you've have to update all usage of that syntax before Babel will be able to process it.
I'm using the uncss task with grunt.js in order reduce the size of my CSS by removing unused rules.
Here's the url for uncss: https://github.com/addyosmani/grunt-uncss
This is my Gruntfile.js setup:
module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'docs/tidy.css': ['docs/index.html']
}
},
options: {
compress:true
}
},
processhtml: {
dist: {
files: {
'docs/tidy.css': ['docs/index.html']
}
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss','processhtml']);
};
And this is my package.json:
{
"name": "ProjectName",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "~0.4.2",
"grunt-uncss": "~0.1.5",
"grunt-processhtml": "~0.2.7"
}
}
All the dependencies were installed fine, without any errors...
But when I run grunt or grunt uncss, I get the following error:
Running "uncss:dist: (uncss) task
[SyntaxError: Unmatched selector:(http]
>> Uncssing source "docs/index.html" failed.
Warning: Uncss failed. Use --force to continue.
Aborted due to warnings.
Does anybody have any idea what this error means and how to correct it? I searched and searched and I was unable to find any documentation that covers this.
Maybe you're using an unsupported selector, like in this issue : https://github.com/addyosmani/grunt-uncss/issues/14
It looks like you could have a syntax error in your css. Either that or you have a bug in your css. You could run using --force like the error hints at, which I'm assuming will ignore that single rule.
You could look for a selector that looks like this in your css file: (http