Develop Reference

Vuejs - Unbound breakpoint Some of your breakpoints could not be set in VSCODE

I'm trying to debug vuejs with vscode, I've tried a lot of tutorials/answers and could not make it work.
So I decided to ask a question here, maybe nowadays there's a right way to make it work.
I've created a project that it's identical with the one I want to debug, so I can post prints here.
The project structure is:
Here is the unbound breakpoint:
Sources Tab in chrome looks like:
More detailed chrome sources tab:
vue.config.js:
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
configureWebpack: {
devtool: "source-map"
},
transpileDependencies: true
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"**/src/*": "${webRoot}/src/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "vuejs: start",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
UPDATE
#A.D asked if I've tried to use keyword
debugger;
Here is the results:
Ps: I don't want to start writing debugger in my code...
But with that i could see that the debugger file is pointing to:
C:\Users\vinic\Desktop\test\test\js\webpack:\test\src\components\HelloWorld.vue
But the component src is actualy located in
C:\Users\vinic\Desktop\test\test\src\components\HelloWorld.vue
Why my breakpoints are not bounding?

Try to change webRoot param and leave as in the documentation, you need to include src after ${workspaceFolder}.
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
UPDATE:
After some research, i found this issue.
There is a change in this version that you used.
They changed the compiler and this affected the way to debugger.
You can use the "2.6.11" works in this version.
Note: This change affected later versions.

Appearently there are some problems with the webpack of vue versions above 2.6.11
Git hub Thread
Reddit Thread
After some discussions with #Tonielton Mota i noticed that, if I fully remove the property name from package.json and package-lock.json it works.
Here are the files that are working:
launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
package.json
{
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

How should we handle loading CSS files correctly in an Angular app?

The error
./node_modules/bootstrap/dist/css/bootstrap.css:8:0 - Error: Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
| */
> :root {
| --bs-blue: #0d6efd;
| --bs-indigo: #6610f2;
The question
I keep getting this error when I try to import bootstrap.css. Some solutions I have looked at involve adding a css loader in webpack.config.js but as I have installed my app using angular-cli, I'm unable to see it.
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ECS2": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ecs2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/popper.js/dist/popper.min.js"]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "ECS2:build:production"
},
"development": {
"browserTarget": "ECS2:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ECS2:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/popper.js/dist/popper.min.js"]
}
}
}
}
}
}
tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
package.json
{
"name": "ecs2",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.0.0",
"#angular/cdk": "^14.0.2",
"#angular/common": "^14.0.0",
"#angular/compiler": "^14.0.0",
"#angular/core": "^14.0.0",
"#angular/forms": "^14.0.0",
"#angular/material": "^14.0.2",
"#angular/platform-browser": "^14.0.0",
"#angular/platform-browser-dynamic": "^14.0.0",
"#angular/router": "^14.0.0",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.1",
"#angular/cli": "~14.0.1",
"#angular/compiler-cli": "^14.0.0",
"#types/jasmine": "~4.0.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"style-loader": "^3.3.1",
"typescript": "~4.7.2"
}
}
I'm importing bootstrap like this:
import { Component} from '#angular/core';
import '../../node_modules/bootstrap/dist/css/bootstrap.css';
import '../styles.css';
import { Inject, enableProdMode, NgModule } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { BrowserModule } from '#angular/platform-browser';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css', '../styles.css']
})
export class AppComponent {
...
}
Attempted Solutions
Tried installing other version of bootstrap, same error
Currently trying custom-webpack builder, but not sure if that will work.

In Angular application, you should not load CSS files like you mentioned in AppComponent File.
You have correctly added bootstrap files in angular.json and this will be suffice to include it in the angular project.
Please remove the import from Appcomponent file and try to build it. I have built several angular applications without any issues ( created via Angular CLI ).
Please let us know the outcome.

How import fetch with VSCode? [duplicate]

This question already has answers here:
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 1 year ago.
I am a total newbie to JS. I would like to use fetch with VSCode but totally unable to import it.
When I use: import fetch from "node-fetch";
I have the following error:
(node:19856) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
c:\Users\myname\Documents\myproject\my_fetch_program.js:6
import fetch from "node-fetch";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
[Done] exited with code=1 in 0.325 seconds
import fetch from "node_modules/node-fetch"; does not work either ...
I don't understand this error, because, in package.json, the type is already set to module...
node_modules/node-fetch/package.json
{
"_from": "node-fetch",
"_id": "node-fetch#3.0.0",
"_inBundle": false,
"_integrity": "sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==",
"_location": "/node-fetch",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "node-fetch",
"name": "node-fetch",
"escapedName": "node-fetch",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz",
"_shasum": "79da7146a520036f2c5f644e4a26095f17e411ea",
"_spec": "node-fetch",
"_where": "C:\\Users\\myname\\Documents\\myproject",
"author": {
"name": "David Frank"
},
"bugs": {
"url": "https://github.com/node-fetch/node-fetch/issues"
},
"bundleDependencies": false,
"dependencies": {
"data-uri-to-buffer": "^3.0.1",
"fetch-blob": "^3.1.2"
},
"deprecated": false,
"description": "A light-weight module that brings Fetch API to node.js",
"devDependencies": {
"abort-controller": "^3.0.0",
"abortcontroller-polyfill": "^1.7.1",
"busboy": "^0.3.1",
"c8": "^7.7.2",
"chai": "^4.3.4",
"chai-as-promised": "^7.1.1",
"chai-iterator": "^3.0.2",
"chai-string": "^1.5.0",
"coveralls": "^3.1.0",
"delay": "^5.0.0",
"form-data": "^4.0.0",
"formdata-node": "^3.5.4",
"mocha": "^8.3.2",
"p-timeout": "^5.0.0",
"tsd": "^0.14.0",
"xo": "^0.39.1"
},
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"files": [
"src",
"#types/index.d.ts"
],
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/node-fetch"
},
"homepage": "https://github.com/node-fetch/node-fetch",
"keywords": [
"fetch",
"http",
"promise",
"request",
"curl",
"wget",
"xhr",
"whatwg"
],
"license": "MIT",
"main": "./src/index.js",
"name": "node-fetch",
"repository": {
"type": "git",
"url": "git+https://github.com/node-fetch/node-fetch.git"
},
"runkitExampleFilename": "example.js",
"scripts": {
"coverage": "c8 report --reporter=text-lcov | coveralls",
"lint": "xo",
"test": "mocha",
"test-types": "tsd"
},
"sideEffects": false,
"tsd": {
"cwd": "#types",
"compilerOptions": {
"esModuleInterop": true
}
},
"type": "module",
"types": "./#types/index.d.ts",
"version": "3.0.0",
"xo": {
"envs": [
"node",
"browser"
],
"ignores": [
"example.js"
],
"rules": {
"complexity": 0,
"import/extensions": 0,
"import/no-useless-path-segments": 0,
"import/no-anonymous-default-export": 0,
"import/no-named-as-default": 0,
"unicorn/import-index": 0,
"unicorn/no-array-reduce": 0,
"unicorn/prefer-node-protocol": 0,
"unicorn/numeric-separators-style": 0,
"unicorn/explicit-length-check": 0,
"capitalized-comments": 0,
"#typescript-eslint/member-ordering": 0
},
"overrides": [
{
"files": "test/**/*.js",
"envs": [
"node",
"mocha"
],
"rules": {
"max-nested-callbacks": 0,
"no-unused-expressions": 0,
"no-warning-comments": 0,
"new-cap": 0,
"guard-for-in": 0,
"unicorn/no-array-for-each": 0,
"unicorn/prevent-abbreviations": 0,
"promise/prefer-await-to-then": 0,
"ava/no-import-test-files": 0
}
}
]
}
}
EDIT
Version of Node: v14.17.0

The advice the warning message is giving refers to the package.json of your code as opposed to the package.json for the fetch library. If you don't already have a package.json at the root of your project (that is ./package.json instead of ./node_modules/node-fetch/package.json) you will need to create one. If you already have a ./package.json file or once you have created one you just need to add the line:
"type": "module"
This will allow you to use the ES6 import statements. Full documentation is available if you would like to read further.

[React-Native][Jest]SyntaxError: Unexpected token import

It seems babel transform works in my testcase code, but es6 syntax in node_modules does not.
Error
environment
npm 4.5
MacOS Sierra
jest config
{
"preset": "react-native",
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
}
}
babelrc
{
"env": {
"test": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"development": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"production": {
}
}
}
testcase
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import Index from '../index.ios.js';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});
package.json
{
"private": true,
"scripts": {
"web": "roadhog server",
"build-web": "cross-env NODE_ENV=production roadhog build",
"start": "react-native start",
"ios": "cross-env NODE_ENV=development node themes/theme.rn.config.js && react-native run-ios",
"android": "cross-env NODE_ENV=development node theme/theme.rn.config.js && react-native run-android",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint",
"test": "cross-env NODE_ENV=test jest --config .jest.config.json --no-cache"
},
"engines": {
"install-node": "6.9.2"
},
"theme": "./themes/theme.web.config.js",
"dependencies": {
"antd-mobile": "^1.0.8",
"babel-runtime": "^6.9.2",
"dva": "^1.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"rc-form": "^1.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-native": "0.42.3",
"react-native-chart": "^1.0.8-beta",
"react-native-gesture-password": "^0.2.0",
"react-native-scrollable-tab-view": "^0.7.4",
"react-native-smart-gesture-password": "^2.1.0",
"react-navigation": "^1.0.0-beta.7",
"recharts": "^0.21.2",
"socket.io-client": "^1.7.3"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^19.0.0",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-react-native": "^1.9.1",
"cross-env": "^4.0.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.13.3",
"jest": "^19.0.2",
"less-vars-to-js": "^1.1.2",
"postcss-pxtorem": "^4.0.0",
"react-test-renderer": "15.4.2",
"redbox-react": "^1.3.2",
"roadhog": "^0.6.0-beta1"
}
}
debug message
jest version = 19.0.2
test framework = jasmine2
config = {
"automock": false,
"bail": false,
"browser": false,
"cacheDirectory": "/var/folders/h3/bfmnzb_j3zg3pdffgps1w3vh0000gn/T/jest",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"expand": false,
"globals": {
"__DEV__": true
},
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"moduleNameMapper": [
[
"^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$",
"RelativeImageStub"
],
[
"^React$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react"
]
],
"modulePathIgnorePatterns": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/Libraries/react-native/",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/packager/"
],
"noStackTrace": false,
"notify": false,
"preset": "react-native",
"resetMocks": false,
"resetModules": false,
"roots": [
"/Users/erickim/Documents/Develop/react/glfm"
],
"snapshotSerializers": [],
"testEnvironment": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-environment-node/build/index.js",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testResultsProcessor": null,
"testURL": "about:blank",
"timers": "real",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
],
"useStderr": false,
"verbose": null,
"watch": false,
"setupFiles": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-polyfill/lib/index.js",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/jest/setup.js"
],
"transform": [
[
"^.+\\.js$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-jest/build/index.js"
]
],
"rootDir": "/Users/erickim/Documents/Develop/react/glfm",
"name": "005c8bf9b4d78dfa0bb0e32c0c55b0fb",
"testRunner": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-jasmine2/build/index.js",
"cache": false,
"watchman": true
}

I figured it out. By default jest doesn't transform ES6 js code from node_modules. In my case, the package react-navigation module need to be translated. So I added transformIgnorePatterns to my jest configuration and everything worked:
{
"preset": "react-native",
"setupFiles": ["./test/setup.js"],
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
}
https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

The problem is that node doesn't understand ES6 modules and JEST is node process, so using import inside your test throw this error. Instead of babel we specifically tell Webpack to transcompile ES6 modules.So, we can fix this error by telling babel that when we are in testing scenario please combile ES6 modules by using below babel configuration settings
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
you can download this babel plugin by npm
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
Hopefully this will fix your problem.

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
}
}