Attempting to set up my react starter kit project to have CI on codeship, and the project works fine locally. I'm getting the following error ReferenceError: Unknown plugin "syntax-trailing-function-commas" specified.. when I'm attempting to run npm test on codeship.
My test command
mocha --require babel-register
How do I need to configure the codeship environment to get this to work?
package.json
...
"babel": {
"presets": [
"react",
"stage-0"
],
"plugins": [
"syntax-trailing-function-commas",
"transform-async-to-generator",
"transform-es2015-destructuring",
"transform-es2015-parameters",
"transform-es2015-duplicate-keys",
"transform-es2015-modules-commonjs",
"transform-exponentiation-operator",
"transform-runtime"
],
"env": {
"test": {
"plugins": [
"rewire"
]
}
}
},
"dependencies": {
"apollo-client": "^0.5.20",
"babel-polyfill": "6.16.0",
"babel-runtime": "6.18.0",
"bluebird": "3.4.6",
"body-parser": "1.15.2",
"braintree": "^1.46.0",
"classnames": "^2.2.5",
"cookie-parser": "1.4.3",
"core-js": "2.4.1",
"express": "4.14.0",
"express-graphql": "0.6.1",
"express-jwt": "5.1.0",
"fastclick": "1.0.6",
"fbjs": "0.8.6",
"front-matter": "2.1.1",
"graphql": "0.8.2",
"graphql-tag": "^1.1.2",
"history": "4.4.0",
"isomorphic-fetch": "^2.2.1",
"isomorphic-style-loader": "1.1.0",
"jsonwebtoken": "7.1.9",
"markdown-it": "8.1.0",
"moment": "^2.17.1",
"node-fetch": "1.6.3",
"normalize.css": "5.0.0",
"passport": "0.3.2",
"passport-auth0": "^0.6.0",
"passport-facebook": "2.1.1",
"pretty-error": "2.0.2",
"query-string": "4.2.3",
"react": "15.4.1",
"react-apollo": "^0.7.1",
"react-dom": "15.4.1",
"react-redux": "4.4.5",
"react-slick": "^0.14.5",
"react-stack-grid": "^0.1.1",
"redux": "3.6.0",
"redux-actions": "^1.1.0",
"redux-form": "^6.3.2",
"redux-logger": "2.7.4",
"redux-thunk": "2.1.0",
"serialize-javascript": "1.3.0",
"source-map-support": "0.4.6",
"speakingurl": "11.0.0",
"universal-router": "2.0.0",
"uploadcare-widget": "^2.10.2",
"whatwg-fetch": "2.0.1",
"xml2js": "^0.4.17"
},
"devDependencies": {
"assets-webpack-plugin": "^3.5.0",
"autoprefixer": "^6.5.3",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.8",
"babel-plugin-rewire": "^1.0.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-optimize": "^1.0.1",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.18.0",
"babel-template": "^6.16.0",
"babel-types": "^6.19.0",
"browser-sync": "^2.18.2",
"chai": "^3.5.0",
"css-loader": "^0.26.0",
"enzyme": "^2.6.0",
"eslint": "^3.10.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.7.1",
"extend": "^3.0.0",
"file-loader": "^0.9.0",
"gaze": "^1.1.2",
"git-repository": "^0.1.4",
"glob": "^7.1.1",
"json-loader": "^0.5.4",
"mkdirp": "^0.5.1",
"mocha": "^3.1.2",
"pixrem": "^3.0.2",
"pleeease-filters": "^3.0.0",
"postcss": "^5.2.5",
"postcss-calc": "^5.3.1",
"postcss-color-function": "^2.0.1",
"postcss-custom-media": "^5.0.1",
"postcss-custom-properties": "^5.0.1",
"postcss-custom-selectors": "^3.0.0",
"postcss-flexbugs-fixes": "^2.0.0",
"postcss-loader": "^1.1.1",
"postcss-media-minmax": "^2.1.2",
"postcss-nested": "^1.0.0",
"postcss-nesting": "^2.3.1",
"postcss-partial-import": "^2.1.0",
"postcss-pseudoelements": "^3.0.0",
"postcss-selector-matches": "^2.0.5",
"postcss-selector-not": "^2.0.0",
"postcss-url": "^5.1.2",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "15.4.0",
"react-deep-force-update": "^2.0.1",
"react-hot-loader": "^3.0.0-beta.6",
"redbox-react": "^1.3.3",
"redux-mock-store": "^1.2.1",
"rimraf": "^2.5.4",
"sinon": "^2.0.0-pre.3",
"stylelint": "^7.6.0",
"stylelint-config-standard": "^15.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-hot-middleware": "^2.13.2",
"webpack-middleware": "^1.5.1"
},
Related
I am trying to run an older BigCommerce site locally but none of the JavaScript is working on the local site. Console seems to indicate an issue with Babel.
This is what is in the error log:
Error: Module build failed: TypeError: /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/assets/js/theme/global/quick-search.js: Cannot read property 'has' of undefined
at resolvePath (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/importModule.js:22:24)
at importModule (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/importModule.js:36:53)
at memoized (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/memoize.js:62:23)
at /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/index.js:217:63
at arrayEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/forEach.js:38:10)
at /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/index.js:193:30
at arrayEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/forEach.js:38:10)
at /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/index.js:181:28
This is what is in the package.json file. I've changed the Stencil CLI to 6.3.0 as per BC's instructions but doesn't seem to be the issue this time.
"name": "bigcommerce-cornerstone",
"description": "The BigCommerce reference theme for the Stencil platform",
"version": "6.3.0",
"private": true,
"author": "BigCommerce",
"license": "MIT",
"dependencies": {
"#bigcommerce/stencil-utils": "^1.0.10",
"async": "^2.5.0",
"babel-polyfill": "^6.26.0",
"easyzoom": "^2.5.0",
"fastclick": "^1.0.6",
"foundation-sites": "^5.5.3",
"html5-history-api": "^4.2.7",
"jquery": "^2.2.4",
"jstree": "vakata/jstree",
"lazysizes": "3.0.0",
"lodash": "^4.17.4",
"nod-validate": "^2.0.12",
"pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
"slick-carousel": "^1.8.1",
"sweetalert2": "^6.10.1"
},
"devDependencies": {
"#bigcommerce/citadel": "^2.15.1",
"#babel/core": "^7.12.17",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.2.2",
"clean-webpack-plugin": "^0.1.17",
"core-js": "^2.5.0",
"es6-shim": "^0.35.3",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"grunt": "^1.0.1",
"grunt-eslint": "^20.0.0",
"grunt-karma": "^2.0.0",
"grunt-scss-lint": "^0.5.0",
"grunt-svgstore": "^1.0.0",
"jasmine-core": "^2.2.0",
"karma": "^1.7.0",
"karma-babel-preprocessor": "^7.0.0",
"karma-coverage": "^1.1.1",
"karma-es6-shim": "^1.0.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "0.3.7",
"karma-verbose-reporter": "0.0.6",
"karma-webpack": "^2.0.4",
"load-grunt-config": "^0.19.2",
"lodash-webpack-plugin": "^0.11.2",
"regenerator-runtime": "^0.11.0",
"time-grunt": "^1.2.2",
"uglify-js": "^3.0.28",
"webpack": "^3.6.0"
}
}
Running node version 12.22.2, npm 8.6.0, stencil cli 6.3.0
I think this is the same issue I got when a folder was named with special characters. Try deleting everything in your directory name after KBBC.
Change
KBBC+V1.4+(March+2020)-1.11.0
To
KBBC
You may also want to change the "name" value in config.json.
As of a few hours ago, I started getting strange errors on Vercel when trying to deploy my application, I am using NextJS. I have no idea what the error is, nor do I have any idea as to how this error started. I've even reverted back to code that was originally working with no luck. I will attach the error log along with my package.json.
"dependencies": {
"#africasokoni/react-flip-countdown": "^1.0.2",
"#ckeditor/ckeditor5-build-classic": "^28.0.0",
"#ckeditor/ckeditor5-react": "^3.0.2",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#react-google-maps/api": "^2.1.1",
"#slack/web-api": "^6.0.0",
"#stripe/react-stripe-js": "^1.4.0",
"#stripe/stripe-js": "^1.14.0",
"antd": "^4.16.2",
"axios": "^0.21.1",
"babel-plugin-styled-components": "^1.13.2",
"body-parser": "^1.19.0",
"bootstrap": "^5.1.0",
"browser-image-compression": "^1.0.15",
"child_process": "^1.0.2",
"clsx": "^1.1.1",
"compress-images": "^1.9.9",
"crypto": "^1.0.1",
"crypto-js": "^4.0.0",
"eslint": "^7.31.0",
"exceljs": "^4.2.1",
"expo-server-sdk": "^3.6.0",
"express": "^4.17.1",
"fast-geoip": "^1.1.13",
"firebase": "^9.0.0-beta.7",
"firebase-admin": "^9.8.0",
"gifsicle": "^5.2.0",
"gsap": "^3.7.0",
"image-size": "^1.0.0",
"jimp": "^0.16.1",
"jquery": "^3.6.0",
"mailgun-js": "^0.22.0",
"mdbreact": "^4.14.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.33",
"mongodb": "^3.6.9",
"mozjpeg": "^7.1.1",
"next": "^11.0.2",
"next-redux-wrapper": "^6.0.2",
"nookies": "^2.5.2",
"order-id": "^2.1.0",
"photoeditorsdk": "^5.11.5",
"pngquant-bin": "^6.0.0",
"postcss": "^8.2.15",
"postcss-cli": "^8.3.1",
"postcss-loader": "^5.2.0",
"pro-gallery": "^3.1.29",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-beta.6",
"react-devtools": "^4.14.0",
"react-dom": "^16.14.0",
"react-drag-sortable": "^1.0.6",
"react-dropzone": "^11.2.4",
"react-fast-compare": "^3.2.0",
"react-helmet": "^6.1.0",
"react-icons": "^4.1.0",
"react-image-gallery": "^1.2.6",
"react-lazyload": "^3.2.0",
"react-loadable": "^5.5.0",
"react-nestable": "^2.0.0",
"react-parallax": "^3.3.0",
"react-phone-input-2": "^2.14.0",
"react-player": "^2.9.0",
"react-polls": "^1.2.0",
"react-redux": "^7.2.2",
"react-social-icons": "^5.5.1",
"react-social-login-buttons": "^3.1.0",
"react-swipeable": "^6.0.1",
"react-tag-autocomplete": "^6.2.0",
"read-excel-file": "^5.1.0",
"redux": "^4.1.0",
"request-image-size": "^2.2.0",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.32.13",
"slack": "^11.0.2",
"socket.io": "^4.1.2",
"socket.io-client": "^4.1.2",
"stripe": "^8.148.0",
"styled-components": "^5.3.0",
"styled-jsx": "^3.4.4",
"tawkto-react": "^2.0.3",
"uuid": "^8.3.2"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"node-sass": "^5.0.0",
"styled-jsx-plugin-sass": "^1.0.0",
"typescript": "^4.1.3"
}
}
`"
I need to install a subdirectory of a remote repository as my node dependency.
According to this issue, it is possible to install subdirectories of GitHub repositories as dependencies with yarn 2.x.x https://github.com/yarnpkg/yarn/issues/4725
However, running yarn add https://github.com/mklueh/gridsome/tree/master/gridsome.git produces
Internal Error: Invalid descriptor (git+https://github.com/mklueh/gridsome/tree/master/gridsome.git)
at Module.x (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:435195)
at C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:30958
at Array.map (<anonymous>)
at M.execute (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:30866)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async M.validateAndExecute (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:660570)
at async Y.run (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:17:3854)
at async Y.runExit (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:17:4021)
at async h (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:285303)
at async r (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:283914)
This is the package.json of the submodule.
{
"version": "0.7.23",
"name": "gridsome",
"description": "A JAMstack framework for building blazing fast websites with Vue.js",
"homepage": "https://gridsome.org",
"repository": "https://github.com/gridsome/gridsome",
"bugs": "https://github.com/gridsome/gridsome/issues",
"license": "MIT",
"main": "index.js",
"browser": "app/index.js",
"bin": {
"gridsome": "./bin/gridsome.js"
},
"keywords": [
"vue",
"gridsome",
"static site generator",
"jamstack",
"website",
"blog"
],
"dependencies": {
"#babel/code-frame": "^7.5.5",
"#babel/core": "^7.0.0",
"#gridsome/cli": "^0.3.4",
"#hapi/joi": "^15.1.1",
"#sindresorhus/slugify": "^1.1.0",
"#vue/babel-preset-app": "^4.2.2",
"#vue/component-compiler-utils": "^2.5.2",
"address": "^1.1.0",
"auto-bind": "^2.0.0",
"autoprefixer": "^9.4.7",
"babel-loader": "8.0.5",
"cache-loader": "^2.0.1",
"camelcase": "^5.0.0",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"chalk": "^2.4.2",
"chokidar": "^3.4.2",
"color-string": "^1.5.3",
"columnify": "^1.5.4",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.6.4",
"css-loader": "^2.1.0",
"devcert": "^1.1.0",
"dotenv": "^6.2.0",
"enhanced-resolve": "4.1.1",
"eventemitter3": "^3.1.0",
"express": "^4.16.4",
"express-graphql": "^0.12.0",
"fastest-levenshtein": "^1.0.12",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0",
"fs-extra": "^7.0.1",
"globby": "^9.0.0",
"graphql": "^15.5.0",
"graphql-compose": "7.20.1",
"graphql-playground-middleware-express": "^1.7.12",
"hash-sum": "^1.0.2",
"hirestime": "^3.2.1",
"html-webpack-plugin": "^3.2.0",
"invariant": "^2.2.4",
"is-relative": "^1.0.0",
"is-url": "^1.2.4",
"jest-worker": "24.0.0",
"json-loader": "^0.5.7",
"loader-utils": "^1.2.3",
"lodash": "^4.17.11",
"lokijs": "^1.5.6",
"lru-cache": "^5.1.1",
"md5-file": "^4.0.0",
"mime-types": "^2.1.21",
"mini-css-extract-plugin": "^0.5.0",
"moment": "^2.24.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"p-map": "^2.0.0",
"path-to-regexp": "^2.2.1",
"physical-cpu-count": "^2.0.0",
"pnp-webpack-plugin": "^1.6.4",
"portfinder": "^1.0.20",
"postcss-loader": "^3.0.0",
"potrace": "^2.1.8",
"probe-image-size": "^4.0.0",
"resolve-from": "^5.0.0",
"sharp": "^0.28.1",
"slash": "^2.0.0",
"sockjs": "^0.3.19",
"sockjs-client": "^1.3.0",
"stack-trace": "^0.0.10",
"svgo": "^2.2.2",
"tapable": "2.0.0-beta.5",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.1",
"vue-meta": "^2.2.2",
"vue-router": "^3.1.3",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.3",
"webpack-chain": "^5.2.0",
"webpack-dev-middleware": "^3.5.2",
"webpack-hot-middleware": "^2.24.3",
"webpack-merge": "^4.2.1",
"yaml-loader": "^0.5.0"
},
"peerDependencies": {
"less-loader": "*",
"sass-loader": "*",
"stylus-loader": "*"
},
"peerDependenciesMeta": {
"sass-loader": {
"optional": true
},
"less-loader": {
"optional": true
},
"stylus-loader": {
"optional": true
}
},
"engines": {
"node": ">=8.3"
},
"contributors": [
{
"name": "Tommy Vedvik (#tomtev)"
},
{
"name": "Hans-Jørgen Vedvik (#hjvedvik)"
}
]
}
What is going wrong here? Does the remote repository need adjustments to work with yarn 2?
i have problem with package 'gantt.table' modules with angularjs1.6, i cant load all modules gantt like 'gantt.overlap',gantt.tooltips' ... i have the same problem.
always i have the same problem with all modules gantt
Help please
the error is:
Module 'gantt.table' is not available! You either misspelled the module name or forgot to load it
app.js
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import uiBootsrap from 'angular-ui-bootstrap';
import fullCalendar from 'fullcalendar'; // eslint-disable-line
import uiCalendar from 'angular-ui-calendar'; // eslint-disable-line
import uiTree from 'angular-ui-tree'; // eslint-disable-line
import smartTable from 'angular-smart-table';
import ngAnimate from 'angular-animate';
import ngSanitize from 'angular-sanitize';
import uiSelect from 'ui-select';
import moment from 'angular-moment';
import socketFactory from 'angular-socket-io'; // eslint-disable-line
import socketio from 'socket.io-client';
import Common from './common/common';
import Components from './components/components';
import Filters from './filters/filters';
import Services from './services/services';
import AppComponent from './app.component';
import AppConfig from './app.config';
import gantt from 'angular-gantt';
angular.module('dlp-portail', [
uiRouter,
uiBootsrap,
'ui.calendar',
'ui.tree',
'ui.tree-filter',
'gantt',
'gantt.table',
uiSelect,
smartTable,
ngAnimate,
ngSanitize,
'btford.socket-io',
AppConfig.name,
Common.name,
Components.name,
Filters.name,
Services.name,
moment,
])
the dependencies package.json file is:
{
"name": "ng6-starter",
"version": "0.0.1",
"description": "Starter for Angular + ES6 + (Webpack or JSPM)",
"main": "index.js",
"dependencies": {
"#angular/animations": "^6.1.9",
"angular": "1.6.1",
"angular-animate": "^1.6.1",
"angular-gantt": "^1.3.2",
"angular-moment": "^1.3.0",
"angular-resource": "1.6.1",
"angular-sanitize": "1.6.1",
"angular-smart-table": "2.1.11",
"angular-socket-io": "0.7.0",
"angular-ui-bootstrap": "1.3.3",
"angular-ui-calendar": "1.0.2",
"angular-ui-router": "0.3.2",
"angular-ui-tree": "2.22.6",
"crypto-js": "3.1.9-1",
"jquery": "3.1.1",
"lodash": "4.11.2",
"moment": "^2.22.2",
"moment-range": "^4.0.1",
"ui-select": "0.19.8"
},
"devDependencies": {
"angular-mocks": "1.6.1",
"ansi-regex": "2.1.1",
"babel-core": "6.26.3",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-register": "^6.8.0",
"bootstrap-styl": "^5.0.5",
"browser-sync": "^2.11.1",
"chai": "^3.4.0",
"chai-as-promised": "^5.3.0",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "0.18.0",
"css-modules-require-hook": "^4.0.0",
"del": "^2.2.1",
"dirty-chai": "^1.2.2",
"eslint": "^2.7.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-config-angular": "^0.5.0",
"eslint-plugin-angular": "^1.0.1",
"eslint-plugin-disable": "^0.3.0",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.5.3",
"eslint-plugin-react": "^5.0.1",
"eslint-plugin-require-jsdoc": "^1.0.4",
"file-loader": "^0.8.5",
"fs-walk": "0.0.1",
"fullcalendar": "^3.0.1",
"gulp": "^3.9.0",
"gulp-eslint": "^2.0.0",
"gulp-ng-config": "^1.3.1",
"gulp-rename": "^1.2.2",
"gulp-template": "^4.0.0",
"gulp-util": "^3.0.7",
"has-ansi": "^2.0.0",
"html-webpack-plugin": "^2.16.1",
"isparta-loader": "^2.0.0",
"karma": "^0.13.9",
"karma-chai": "^0.1.0",
"karma-chai-as-promised": "^0.1.2",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.0.0",
"karma-html-reporter": "^0.2.7",
"karma-mocha": "^1.0.1",
"karma-mocha-reporter": "^2.0.0",
"karma-sourcemap-loader": "^0.3.4",
"karma-webpack": "^1.5.1",
"merge": "^1.2.0",
"minimist": "^1.2.0",
"mocha": "^2.3.0",
"moment": "^2.15.1",
"ng-annotate-loader": "0.1.0",
"node-libs-browser": "^1.0.0",
"node-string-pad": "0.0.4",
"path": "^0.12.7",
"q": "^1.4.1",
"raw-loader": "^0.5.1",
"run-sequence": "^1.1.0",
"socket.io-client": "^1.4.6",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.0.0",
"supports-color": "^3.1.2",
"url-loader": "^0.5.7",
"webpack": "^1.9.5",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.6.0",
"yargs": "^4.8.1"
},
"scripts": {
"test": "karma start && eslint -c .eslintrc ."
},
"keywords": [
"angular",
"webpack",
"es6"
],
"repository": {
"type": "git",
"url": "https://github.com/angularclass/NG6-starter.git"
},
"author": "AngularClass",
"license": "Apache-2.0"
}
Why babel does not transform my classes?
Syntax error main.js (24,25)
IMAGE: IE11 transformed main.js file
Maybe my configuration is not right?
I try to add support of IE 11 by my app, but babel not work correctly.
I had also added polyfills.ts from angular.io documentation to support IE.
Here I'll show you my .babelrc, webpack.config.js package.json, tsconfig.json.
.babelrc
{
"presets": [
/*[
"env",
{
"uglify":true,
"targets":[
"> 4%",
"ie >= 10",
"safari >= 8"
]
}
]//It gives the same result*/
"es2015", "angular2", "stage-0"
],
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
"transform-es2015-classes",
"babel-plugin-transform-object-rest-spread",
"syntax-object-rest-spread",
"transform-class-constructor-call",
"syntax-class-constructor-call"
]
}`
webpack.config.js
module.exports = (env = {isProd: false}) => {
const config = {
context: srcDir,
entry: {
polyfills: './polyfills.ts',
vendor: './vendor.ts',
main: './main.ts',
styles: './styles.scss'
},
...
resolve: {
extensions: ['.js', '.ts'],
modules: ['node_modules']
},
module: {
loaders: [
],
rules: [
{
test: [/\.js$/],
include: [
path.resolve(__dirname,'src/')
],
exclude: [
/node_modules\/(?!cb-frontend\/).*!/
],
use: {
loader: 'babel-loader'
}
},
{
test: /\.ts$/,
include: [srcDir],
use: env.isProd ? '#ngtools/webpack' : [
{
loader: 'awesome-typescript-loader',
options: {configFileName: 'tsconfig.json'
}
}, 'angular2-template-loader'
]
},
.....
},
plugins: [
....
new webpack.optimize.CommonsChunkPlugin({
name: ['main', 'vendor', 'polyfills']
}),
....
new HtmlPlugin({
template: './index.html'
}),
....
],
....}
package.json
"dependencies": {
"#angular/animations": "5.1.0",
"#angular/cdk": "5.0.1",
"#angular/common": "5.1.0",
"#angular/compiler": "5.1.0",
"#angular/core": "5.1.0",
"#angular/forms": "5.1.0",
"#angular/http": "5.1.0",
"#angular/material": "5.0.1",
"#angular/platform-browser": "5.1.0",
"#angular/platform-browser-dynamic": "5.1.0",
"#angular/platform-server": "5.1.0",
"#angular/router": "5.1.0",
"angular-2-dropdown-multiselect": "1.5.4",
"bootstrap": "4.0.0-alpha.6",
"classlist.js": "1.1.20150312",
"es6-promise": "^4.2.2",
"es6-shim": "^0.35.3",
"gulp": "3.9.1",
"hammerjs": "2.0.8",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"ng2-select2": "1.0.0-beta.10",
"ngx-clipboard": "9.0.0",
"ngx-mydatepicker": "2.1.0",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.5",
"select2": "4.0.5",
"sonarqube-scanner": "2.0.2",
"systemjs": "0.19.39",
"zone.js": "0.8.18"
},
"devDependencies": {
"#angular/compiler-cli": "5.1.0",
"#ngtools/webpack": "1.9.0",
"#types/angular-resource": "1.5.6",
"#types/angular-route": "1.3.2",
"#types/angular-sanitize": "1.3.3",
"#types/jasmine": "2.5.36",
"#types/node": "7.0.31",
"angular2-template-loader": "0.6.2",
"autoprefixer": "7.1.1",
"awesome-typescript-loader": "3.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-object-rest-spread": "^6.3.13",
"babel-plugin-transform-class-properties": "^6.0.2",
"babel-plugin-transform-es2015-classes": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.14.0",
"babel-plugin-transform-es2015-template-literals": "^6.3.13",
"babel-plugin-transform-flow-strip-types": "^6.4.0",
"babel-plugin-transform-object-assign": "^6.3.13",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-class-constructor-call": "^6.0.2",
"babel-plugin-syntax-class-constructor-call": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-angular2": "^0.0.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-native-modules": "^6.9.4",
"babel-preset-es2015-rollup": "1.2.0",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.26.0",
"concurrently": "3.0.0",
"codelyzer": "3.0.1",
"copy-webpack-plugin": "4.0.1",
"core-js": "2.5.1",
"css-loader": "0.28.7",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.30.1",
"intl": "1.2.5",
"jasmine-core": "2.6.3",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-firefox-launcher": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"node-sass": "4.6.1",
"postcss-loader": "2.0.6",
"raw-loader": "0.5.1",
"sass-loader": "6.0.6",
"style-loader": "0.19.0",
"stylelint": "7.11.1",
"stylelint-config-standard": "16.0.0",
"tslint": "5.4.3",
"typedoc": "0.7.1",
"typescript": "2.5.3",
"uglifyjs-webpack-plugin": "1.0.1",
"web-animations-js": "2.3.1",
"webpack": "^3.8.1",
"webpack-chunk-hash": "^0.4.0",
"webpack-dev-server": "2.9.4",
"webpack-merge": "3.0.0"
}
}
tsconfig.json
{
"compilerOptions": {
"alwaysStrict": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"sourceMap": true,
"skipLibCheck": true,
"strictNullChecks": true,
"target": "es5",
"typeRoots": [
"./node_modules/#types"
],
"lib": ["es2015", "dom"] /* , "es2015.promise"*/
},
"exclude": [
"node_modules"
],
"angularCompilerOptions": {
"genDir": ".",
"entryModule": "./src/app/app.module#AppModule",
"skipMetadataEmit": true
}
}
--- UPDATE ---
Package.json: devDependencies
{
...
"#angular/compiler-cli": "5.1.0",
"#ngtools/webpack": "1.9.0",
"#types/angular-resource": "1.5.6",
"#types/angular-route": "1.3.2",
"#types/angular-sanitize": "1.3.3",
"#types/jasmine": "2.5.36",
"#types/keycloak-js": "2.5.4",
"#types/node": "7.0.31",
"angular2-template-loader": "0.6.2",
"autoprefixer": "7.1.1",
"awesome-typescript-loader": "3.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-register": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-angular2": "^0.0.2",
"babel-plugin-transform-runtime": "^6.23.0",
"uglifyjs-webpack-plugin": "1.0.1",
"web-animations-js": "2.3.1",
...
}