When I run an Aurelia app, I get the following error in Chrome. I get the error wherever I have #. For example, #customElement and #bindable gives the error.
My config.js looks like below:
System.config({
"baseURL": "/",
"transpiler": "babel",
"babelOptions": {
"optional": [
"runtime"
]
},
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js",
"npm:*": "jspm_packages/npm/*.js"
}
});
#customElement and #bindable are called decorators which is an experimental feature in JavaScript ES7, so it is currently not supported by the browsers.
However babel can also transpile this feature back to ES5 which is then can be executed by the common browsers
You just need to configure this feature in babel with using the es7.decorators option:
"babelOptions": {
"optional": [
"es7.decorators",
"runtime"
]
},
You can always check the Aurelia navigation skeleton as a reference for the config.js or other setup options.
Related
I added a Material-UI icon to one of my react components like so:
import { ImportExport } from '#material-ui/icons';
Thereafter, on my production site (but not my localhost dev server), I started getting an error on pageload whereby my socket-io client library was unable to correctly import something in one of its internal files. It had this:
const encodePacket = require("./encodePacket");
Which was used like so:
encodePacket(packet, false, encodedPacket => {
This is where the error arises: TypeError: encodePacket is not a function. Inspecting it, I can see that encodePacket is indeed not a function. When printed in the console, it shows as {default: {…}, __esModule: true}.
On my localhost dev server, this isn't the case. It's a function as expected. Moreover, the import right next to it, for decodePacket, is still a function in both contexts, locally and in production.
More bizarrely, when I examine the encodePacket module in the console, it looks like this:
Mui is Material-UI, a UI lib I use in other parts of the application and from which the icon is sourced - obviously it has no connection to a network library's internal packet encoding logic.
By commenting out the ImportExport icon and its import, I found that the error goes away.
What on earth though? How could this happen?
I even tried renaming the icon, but that didn't work either~
import { ImportExport as ReverseSortIcon } from '#material-ui/icons';
Any suggestions? I'm using Parcel and this is my tsconfig that has worked for 2+ years uneventfully~
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
"jsx": "react",
"esModuleInterop": true
},
"include": [
"./src/**/*"
]
}
I can build and the code works and correctly excludes the tests using and can run the code with node:
babel src -s -d dist --extensions ".js,.ts,.tsx" --ignore '**/*.test.js' --ignore '**/test/*'
But trying to use babel-node seems to include the tests regardless:
babel-node --extensions '.js,.ts,.tsx' --ignore='src/**/*.test.js' src/index.js
Depending on the ignore pattern I can get different errors but errors inside a test file. eg. src/entity/authentication/authentication.test.js which babel should be ignoring.
I've tried a number of patters:
**/*.test.js
src/**/*.js
/src/**/*.js
I'm sure it something simple that I'm missing.
My babel config if its helpful:
{
"presets": [
"#babel/preset-env",
["#babel/preset-typescript", {
"isTSX": true,
"allExtensions": true
}]
],
"plugins": [
"babel-plugin-transform-typescript-metadata",
["#babel/plugin-proposal-decorators", {"legacy": true}],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
]
}
🤦♂️Turns out it was not a babel issue at all it was a typeorm issue. https://github.com/typeorm/typeorm/issues/1654
"entities": [
"src/entity/**/!(*.test)*.js"
]
Note to self: Always leave a project in working condition prior to taking a long break from it. :( Much time was wasted. 😞
As far as I understand, the protractor-cucumber-framework passes through the cucumberOpts object to cucumber, which allows the user to specify cucumber options like strict and tags. I'm trying to use a TeamCity reporter with this framework. According to the instructions for the reporters, (e.g. TeamCity Reporter, to use this reporter you use the --format option to specify the reporter when running cucumber. So my interpretation is that I should specify the format property in the cucumberOpts object in the same way. i.e. cucumber -f TeamCityFormatter::Formatter becomes:
cucumberOpts: {
'format': 'TeamCityFormatter::Formatter'
}
But when I do this, I get the error:
Unhandled rejection Error: ENOENT: no such file or directory, open 'C:\Dev\fork\Billing.Test.Automation.V2\:Formatter':
I thought maybe I just need to specify the name of the module, so I tried:
cucumberOpts: {
'format': 'TeamCityFormatter'
}
Which gave me this error:
Unhandled rejection Error: Cannot find module 'C:\Dev\fork\Billing.Test.Automation.V2\TeamCityFormatter'
So that looks like it is looking for a module, so I tried pointing it to the module in the node_modules folder:
cucumberOpts: {
'format': 'node_modules/teamcity-formatter'
}
And I get this error:
Unhandled rejection TypeError: this.registerHandler is not a function
Is there some special way to use a cucumber reporter via the protractor-cucumber-framework?
Not an answer but an example of how a package can be imported as a plugin
onPrepare:fucntion(){
...
},
// Here the magic happens
plugins: [{
package: 'protractor-multiple-cucumber-html-reporter-plugin',
options: {
automaticallyGenerateReport: true,
removeExistingJsonReportFile: true,
displayDuration: true
}
}],
Trying to run build on CircleCi and it's failing on test. Same stuff is working perfect on my local.
My .babelrc config:
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-class-properties",
"react-hot-loader/babel",
["babel-plugin-transform-builtin-extend", {
"globals": ["Error", "Array"]
}],
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
Error I'm getting from circleCI:
yarn test v0.27.5
$ jest
FAIL src/utils/service-helper.test.js
● Test suite failed to run
ReferenceError: [BABEL] /home/circleci/repo/src/utils/service-helper.test.js: Unknown option: /home/circleci/repo/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
Any idea what is going on as the same configuration is working on another project
The error is unhelpful, but the issue is that your config has react in the preset list, but it can't find the babel-preset-react module in your node_modules, so instead it is loading the react module itself as if it were a preset. But since the "react" module isn't a preset, Babel throws.
Most likely, you've forgotten to list babel-preset-react in your package.json.
I built a site with wintersmith in November of 2013. It's live at http://powma.com
I'm coming back to it, but it's not building :-{
I don't mind getting my hands dirty, but I don't know where to start. I'm getting this error:
error Error loading plugin './node_modules/wintersmith-coffee/': Cannot find module './plugin'
Any suggestions?
Thanks!
Mike
UPDATE
Hey, this is because the coffeescript wasn't getting compiled.
I installed it globally, but that didn't help.
$ sudo npm install -g coffee-script
I manually compiled it and moved to other errors. Any suggestions for what's missing?
$ coffee -c plugin.coffee
Here's my config.json:
{
"locals":
{ "url": "http://localhost:8080"
, "title": "Powma"
, "subTitle": "Linking you to technology"
, "motto": "We build exceptions sites and applications to connect people to products, services, and each other."
, "owner": "Michael Cole"
, "profilePicture": "/static/img/profile-professional.jpg"
, "inlineSpriteMaxBytes" : 10000
},
"views": "./views",
"plugins":
[ "./node_modules/wintersmith-coffee/"
, "./node_modules/wintersmith-stylus/"
],
"require": {
"moment": "moment",
"_": "underscore",
"typogr": "typogr"
},
"jade": {
"pretty": true
},
"markdown": {
"smartLists": true,
"smartypants": true
},
"paginator": {
"perPage": 3
}
}
And package.json:
{
"name": "Powma-com",
"version": "0.1.1",
"private": true,
"engines": {
"node": "0.10.17"
},
"dependencies": {
"moment": "2.0.x",
"underscore": "1.5.x",
"typogr": "0.5.x",
"wintersmith": "2.0.x",
"wintersmith-stylus": "git://github.com/MichaelJCole/wintersmith-stylus.git#master",
"wintersmith-coffee": "0.2.x",
"express": "3.4.x",
"sendgrid": "~0.3.0-rc.1.7",
"express-validator": "~0.8.0",
"underscore-express": "0.0.4"
}
}
This is a new dev laptop I'm working with so that may be part of the problem.
I worked around the issue, but didn't fix it. Do I really need to manually compile the coffeescript?
Thanks!
I solved this issue by explicitly specifying plugin.coffee in the config.json file.
{
...other stuff...
"plugins":
[ "./node_modules/wintersmith-coffee/plugin.coffee"
, "./node_modules/wintersmith-stylus/plugin.coffee"
],
...more stuff...
}
It looks like you're missing wintersmith-coffee in node_modules; make sure you have it installed locally with npm install wintersmith-coffee. You can also try removing it from config.json if you're not using it anywhere.
It would also be helpful to see both your config.json and package.json. Also make sure you run an npm install and npm update to make sure you have everything referenced in package.json installed and updated.
Update
Not having CoffeeScript installed could have been the issue. After installing that globally, I'm not sure if all of your shell sessions will pick up the command and use it without being restarted. With a new shell session, see if you can build the site. You can also try testing Wintersmith in isolation of your site. Try generating a sample site with wintersmith new somepath and see if you can run wintersmith build there. That would be a good start for narrowing down your issues between your site and your workstation setup.