Develop Reference

Jest encountered an unexpected token - React with jest and enzyme

tsconfig.json
{
"extends": "./node_modules/pcf-scripts/tsconfig_base.json",
"compilerOptions": {
"typeRoots": ["node_modules/#types"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"sourceMap": true
},
"include": ["./ConsumptionSummaryComponent/src", "ConsumptionSummaryComponent/globals.d.ts"],
"exclude": ["./node_modules/pcf-scripts/./node_modules"]
}
.babelrc file
{
"env": {
"test": {
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
}
}
Package.json
{
"name": "pcf-project",
"version": "1.0.0",
"description": "Project containing your PowerApps Component Framework (PCF) control.",
"scripts": {
"build": "pcf-scripts build",
"clean": "pcf-scripts clean",
"rebuild": "pcf-scripts rebuild",
"start": "pcf-scripts start",
"test": "jest",
"test:watch": "jest --watch"
},
"jest": {
"roots": [
"<rootDir>/ConsumptionSummaryComponent/src"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "ts-jest",
"^.+\\.jsx$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"testEnvironment": "node",
"setupFiles": [
"<rootDir>/ConsumptionSummaryComponent/src/setupEnzyme.ts"
],
"globals": {
"ts-jest": {
"tsConfig": "tsconfig.json",
"babelConfig": "<rootDir>/ConsumptionSummaryComponent/.babelrc",
"diagnostics": {
"ignoreCodes": [
"TS1149"
]
}
}
},
"collectCoverage": true,
"coverageReporters": ["lcov"],
"coverageDirectory": "test-coverage",
"collectCoverageFrom": [
"<rootDir>/ConsumptionSummaryComponent/src/components/**/*.{ts,tsx}",
"<rootDir>/ConsumptionSummaryComponent/src/services/**/*.{ts,tsx}"
],
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
},
"moduleNameMapper": {
"ts-jest": "<rootDir>/node_modules/ts-jest",
"office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/",
"#uifabric/fluent-theme/lib/": "#uifabric/fluent-theme/lib-commonjs/",
"#uifabric/styling/lib/": "#uifabric/styling/lib-commonjs/",
"expose-loader\\?jQuery\\!jquery": "<rootDir>/ConsumptionSummaryComponent/src/blank-mock",
"^style-loader.*$": "<rootDir>/ConsumptionSummaryComponent/src/blank-mock",
"^.*.svg$": "<rootDir>/src/blank-mock.js"
},
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"dependencies": {
"#apollo/react-hooks": "^3.1.3",
"#common-pcf/sdk": "file:../sdk/common-pcf-sdk-1.0.0.tgz",
"#microsoft/applicationinsights-web": "^2.3.1",
"#types/node": "^10.12.18",
"#types/powerapps-component-framework": "^1.2.0",
"#uifabric/icons": "^7.3.2",
"apollo-boost": "^0.4.7",
"cra-template-typescript": "^1.0.0",
"enzyme": "^3.11.0",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.2",
"office-ui-fabric-react": "^7.84.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#graphql-codegen/introspection": "1.12.1",
"#graphql-codegen/typescript": "1.12.1",
"#graphql-codegen/typescript-operations": "1.12.1",
"#graphql-codegen/typescript-react-apollo": "1.12.1",
"#types/enzyme": "3.10.5",
"#types/enzyme-adapter-react-16": "1.0.6",
"#types/jest": "^25.1.1",
"#types/react": "^16.9.19",
"#types/react-dom": "^16.9.5",
"babel-jest": "^25.1.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "3.4.4",
"jest": "^25.1.0",
"pcf-scripts": "^1",
"pcf-start": "^1",
"source-map-loader": "^0.2.4",
"ts-jest": "25.1.0",
"ts-loader": "^6.2.1"
}
}
SetupEnzyme.ts
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
testcase
import * as React from "react";
import { shallow } from "enzyme";
import { DataModel } from "../../utils/DataModel";
import { styles } from "../../utils/style";
import { Enums } from "../../utils/enums";
import SummaryComponent from "../SummaryComponent";
const testProp: DataModel.ProductGroupSummaryViewModel = {
consumptionText: "300 Subscriptions . 200 Active . $500 ACR",
iconName: Enums.ProductTypeLogo.azureLogo,
iconStyle: styles.AzureIcon,
productGroupName: Enums.ProductTypeName.azureProductTypeName,
isEnabled:true,
order: 1
};
it("Should render the Summary component for the test Product Group Summary", () => {
const result = shallow(<SummaryComponent {...testProp} />);
expect(result).toMatchSnapshot();
});
Error
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\DemandResponse\CSM-RCMND-DIGI-DigExp-UXWidgets\CSM-RCMND-DIGI-DigExp-UXWidgets\msp_RecommendationComponentSolution\ConsumptionSummaryComponent\ConsumptionSummaryComponent\src\setupEnzyme.ts:1
import { configure } from 'enzyme';
^^^^^^
SyntaxError: Cannot use import statement outside a module
It is working in other system but not in my system. Every thing is latest in my system.
Kindly help me with the issue

missing preset and no need for enzymeSetup to be ts file
would take the jest configuration to stand alone file to make life easier :)
jest.config.js
module.exports = {
collectCoverageFrom: [
'<rootDir>/src/**/*.ts',
'<rootDir>/src/**/*.tsx',
],
moduleDirectories: ['node_modules', 'src'],
testPathIgnorePatterns: ['<rootDir>/test/setup/'],
setupFilesAfterEnv: ['<rootDir>/test/setup/setupEnzyme.js'],
transform: {
'\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
testRegex: 'test/.*\\.test\\.tsx?$',
preset: 'ts-jest',
moduleFileExtensions: ['ts', 'tsx', 'js'],
moduleNameMapper: {
'\\.(png)$': '<rootDir>/test/setup/fileMock.js',
'\\.(css|less)$': '<rootDir>/test/setup/fileMock.js',
},
};
collect coverage only for ts and tsx files.
transform all js and jsx files via babel-jest
apply preset ts-jest for ts and tsx files
mock styles and images with plain empty js file.
setupEnzyme.js
require('#babel/polyfill');
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });

What is bundling my rollup project when it's a dependency of another project

I'm trying to create a React Website using 2 projects:
React-kit to store a list a components
React-app who run the React server (and have React-kit as dependency)
I mostly followed this tutorial to build my React-kit using Rollup (and babel).
I put React-Kit as dependency into my React-App using private github repository: (I added all my building files (rollup, babel and webpack for both projects) at the end of the questions if needed.)
package.json
{
/* ... */
"dependencies": {
"react-kit": "github:myUser/react-Kit",
/* ... */
}
}
First at all it's working fine on local, and it's a big question for me? Who did the job for it ?
During my research I notice:
dist/ is not present in React-Kit github repository (but src/ is here)
dist/ is present on my local React-App/node_modules/react-kit/ (with only package*.json, not src/)
When I do my npm i on React-App the React-kit is downloaded (that part i understand ^^) then bundled by his rollup config file.
How my react-kit has been bundled ? Who did the call the start rollup when I did my npm i on React-App ??
Second I tying to deploy the React-App project on production using Jenkins, but in this case
my react-kit/dist is not here and React-App/node_modules/react-kit only have package*.json (so my react-app build fail because react-kit cannot be imported).
What's going on here ? I trying with both env (dev and prod) on both local and AWS but it's always the same things.
I think I'm missing something here..
React-kit
rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '#svgr/rollup'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'
export default {
input: 'src/lib/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
},
{
file: pkg.module,
format: 'es',
sourcemap: true,
},
],
plugins: [
external({
// includeDependencies: true,
}),
postcss({
plugins: [],
minimize: true,
sourceMap: 'inline',
}),
url(),
svgr(),
resolve(),
babel({
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-class-properties',
'transform-react-remove-prop-types',
],
exclude: 'node_modules/**',
}),
commonjs(),
// terser(), // Activate to minimify
],
}
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
}
],
"#babel/preset-react"
],
"env": {
"test": {
"presets": [
[
"react-app"
]
]
}
},
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties"
]
}
package.json
{
"name": "react-kit",
"version": "0.1.0",
"description": "React components dictionary for Projects",
"author": "",
"license": "ISC",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"scripts": {
"dev": "run-p build:watch start",
"start": "styleguidist server --open",
"styleguide:build": "styleguidist build",
"build": "rollup -c",
"build:watch": "rollup -c -w",
"test": "jest",
"test:coverage": "jest --coverage --forceExit --colors",
"lint": "esw --ext .jsx --ext .js --color",
"lint:fix": "npm run lint --fix",
"prepare": "npm run build",
"prerelease": "npm run lint:fix && npm run test:coverage && npm run build",
"release": "npm publish",
"predeploy": "npm run styleguide:build",
"deploy": "gh-pages -d styleguide"
},
"dependencies": {
"formik": "^1.5.8"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/plugin-proposal-object-rest-spread": "^7.5.4",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"#svgr/rollup": "^4.3.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-react-app": "^9.0.0",
"cross-env": "^5.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.0.1",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jest": "^22.7.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"eslint-watch": "^5.1.2",
"gh-pages": "^2.0.1",
"jasmine-expect": "^4.0.2",
"jest": "^24.8.0",
"jest-pnp-resolver": "^1.2.1",
"jest-resolve": "^24.8.0",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-styleguidist": "^9.1.11",
"react-test-renderer": "^16.8.6",
"rollup": "^1.16.7",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-terser": "^5.1.1",
"rollup-plugin-url": "^2.2.2",
"webpack": "^4.35.3",
"webpack-blocks": "^2.0.1"
},
"files": [
"dist"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts",
"!src/**/index.js"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom",
"<rootDir>/scripts/enzymeConfig.js"
],
"testMatch": [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/scripts/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/scripts/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
}
React-App
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV || 'development';
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new Dotenv({
path: `.env.${env !== 'development' ? env : ''}`,
})
],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
}
}
module.exports = config;
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
};
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
},
"#babel/preset-react'"
],
],
"plugins": [
["#babel/transform-runtime"]
]
}

From the NPM documentation, i understand that prepare is called with npm install without argument on a local environment.
Your prepare script calls build script then build script calls rollup command

Vue.js - Invalid CSS after

I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}

How to remove eslint Parsing error on ES6 export statement

npm v3.10.10 node v6.11.0 eslint v4.2.0
You can pull the repo here. Just npm install then npm run lint
I'm trying to use the following export statement (comment works, but is ugly):
containers/index.js
export MainContainer from './Main/MainContainer'
// export { default as MainContainer } from './Main/MainContainer'
config/routes.js
import React from 'react'
import { Route, HashRouter, browserHistory } from 'react-router-dom'
import { MainContainer } from '../containers'
const routes = (
<HashRouter history={browserHistory}>
<Route path="/" component={MainContainer} />
</HashRouter>
)
export default routes
I installed the following package:
npm install babel-eslint#next --save-dev
.eslintrc
{
parser: "babel-eslint",
en: {
es6: true,
browser: true
},
extends: ["eslint:recommended", "plugin:react/recommended", "standard"],
plugins: [
"react"
]
}
.eslintrc.json
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"off",
"always"
]
}
}
However even with that installed I still get the error about the MainContainer when I npm run lint
package.json
"scripts": {
"start": "webpack-dev-server",
"production": "webpack -p",
"lint": "eslint app/.; exit 0",
"fix": "eslint --fix app/.; exit 0"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.0-alpha.13",
"babel-loader": "^7.1.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.2.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
}
folder structure

Figured it out! I needed to edit my .eslintrc.json file, not the .eslintrc
https://github.com/babel/babel-eslint/issues/6
{
...
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
...
}

ESLint imports/modules are treated as undefined

I'm using Webpack with Polymer, importing a component like so:
import '#polymer/polymer/polymer-element.html';
class AppShell extends Polymer.Element {
static get is() { return 'app-shell'; }
}
I left out the rest of the component here. The import is working as expected in my app, but when I am running ESLint, I get the following error message:
50:27 error 'Polymer' is not defined no-undef
This is my package.json, where I'm defining my ESLint settings. Anyone have an idea why ESLint is not picking up the import properly?
{
"name": "client-meeting-tracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node utils/webserver.js",
"lint": "eslint --ext .html,.js */**",
"build": "node utils/build.js"
},
"dependencies": {
"#startup-boilerplate/inkling": "*",
"auth0-lock": "^10.7.3",
"lodash": "^4.6.1",
"moment": "^2.17.1"
},
"devDependencies": {
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"eslint": "^3.16.0",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-import": "^2.2.0",
"file-loader": "^0.8.4",
"fs-extra": "^0.30.0",
"polymer-cli": "^0.17.0",
"wc-loader": "*",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
},
"eslintConfig": {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"plugins": [
"html"
]
}
}

Polymer is defined as a global, so I would configure Polymer as a global in your package.json:
"eslintConfig": {
"globals": {
"Polymer": true
}
}