No input was found in config file tsconfig.json - json

Through npm I have downloaded angular2-highcharts for my application. I just noticed that Visual Studio Code gives me an error in the tsconfig.json file of the package:
file: 'file:///c%3A/pdws-view-v2/node_modules/angular2-highcharts/tsconfig.json'
severity: 'Error'
message: 'No inputs were found in config file 'c:/pdws-view-v2/node_modules/angular2-highcharts/tsconfig.json'. Specified 'include' paths were '["src/**/*"]' and 'exclude' paths were '["examples","index.d.ts","node_modules","dist"]'.'
at: '1,1'
source: 'ts'
I don't really know why I'm getting this error or how to fix it.
Here's the file:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"outDir": "dist",
"declarationDir": "dist",
"declaration": true
},
"compileOnSave": true,
"include": [
"src/**/*"
],
"exclude": [
"examples",
"index.d.ts",
"node_modules",
"dist"
],
"angularCompilerOptions": {
"genDir": "dist/",
"strictMetadataEmit": true,
"skipTemplateCodegen": true
}
}
Any ideas? Thanks!

The TS compiler want's to have a .ts file in the directory where your tsconfig.json is located.
Create an empty file.ts in the same directory and the error should go away.

Generally, if it's an issue with a library, you should:
Search the library's issue tracker for similar issues
If none are found, create one in accordance with the issue template they provide, giving as much detail as you can about the environment you are compiling in (especially TypeScript, tslint and npm version, and your editor and OS).
That said, their issue template specifically asks that you check here for angular2-highcharts first, so do wait and see if anyone else answers with a known solution for your case.
You can't really fix it locally because it's in the package's source, so next time you npm install or npm update, your changes will be obliterated.
Of course, if you debug locally and find a solution, I'm sure they would welcome a pull request.
Practically speaking, it sounds like the relative path to the source is incorrect, but it would be astonishing for this to get published. So it might be a bug in VSCode or your linter reporting.
This also assumes you have the most up to date version of the package (#latest or even #next).

In my case, I forgot to do this:
COPY src/ ./src/
It will copy my src folder. Then after copying, I can now run:
RUN yarn install --ignore-engines RUN yarn tsc

Related

Typescript compile error relating to JSON [duplicate]

I am using Angular (version 2) with TypeScript (version 1.6) and when I compile the code I get these errors:
Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(1,25): Error TS2304: Cannot find name 'MapConstructor'.
node_modules/angular2/src/core/facade/collection.d.ts(2,25): Error TS2304: Cannot find name 'SetConstructor'.
node_modules/angular2/src/core/facade/collection.d.ts(4,27): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(4,39): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(7,9): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(8,30): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(11,43): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(12,27): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(14,23): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(15,25): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/collection.d.ts(94,41): Error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/core/facade/collection.d.ts(95,22): Error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/core/facade/collection.d.ts(96,25): Error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/core/facade/lang.d.ts(1,22): Error TS2304: Cannot find name 'BrowserNodeGlobal'.
node_modules/angular2/src/core/facade/lang.d.ts(33,59): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/facade/promise.d.ts(1,10): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(3,14): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(8,32): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(9,38): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(10,35): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(10,93): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(11,34): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(12,32): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(12,149): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/facade/promise.d.ts(13,43): Error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/element_injector.d.ts(72,32): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/element_injector.d.ts(74,17): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/element_injector.d.ts(78,184): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/element_injector.d.ts(83,182): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/element_injector.d.ts(107,37): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/proto_view_factory.d.ts(27,146): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(52,144): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(76,79): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(77,73): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(94,31): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(97,18): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(100,24): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(103,142): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/view.d.ts(104,160): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/render/api.d.ts(281,74): Error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/zone/ng_zone.d.ts(1,37): Error TS2304: Cannot find name 'Zone'.
This is the code:
import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
#Component({
selector: 'my-app',
template: '<input type="text" [(ng-model)]="title" /><h1>{{title}}</h1>',
directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
title :string;
constructor() {
this.title = 'hello angular 2';
}
}
bootstrap(AppComponent);
There is a work-around mentioned in the changelog for 2.0.0-beta.6 (2016-02-11) (listed under breaking changes):
If you use --target=es5, you will need to add a line somewhere in your application (for example, at the top of the .ts file where you call bootstrap):
///<reference path="node_modules/angular2/typings/browser.d.ts"/>
(Note that if your file is not in the same directory as node_modules, you'll need to add one or more ../ to the start of that path.)
make sure you have the correct reference path, i needed to add ../ to the start to get this working.
ES6 features like promises aren't defined when targeting ES5. There are other libraries, but core-js is the javascript library that the Angular team uses. It contains polyfills for ES6.
Angular 2 has changed a lot since this question was asked. Type declarations are much easier to use in Typescript 2.0.
npm install -g typescript
For ES6 features in Angular 2, you don't need Typings. Just use typescript 2.0 or higher and install #types/core-js with npm:
npm install --save-dev #types/core-js
Then, add the TypeRoots and Types attributes to your tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [
"../node_modules/#types"
],
"types" : [
"core-js"
]
},
"exclude": [
"node_modules"
]
}
This is much easier than using Typings, as explained in other answers. See Microsoft's blog post for more info: Typescript: The Future of Declaration Files
A known issue: https://github.com/angular/angular/issues/4902
Core reason: the .d.ts file implicitly included by TypeScript varies with the compile target, so one needs to have more ambient declarations when targeting es5 even if things are actually present in the runtimes (e.g. chrome). More on lib.d.ts
For those following the Angular2 tutorial on angular.io just to be explicit, here is an expansion of mvdluit's answer of exactly where to put the code:
Your main.ts should look like this:
/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
// Add all operators to Observable
import 'rxjs/Rx'
bootstrap(AppComponent);
Note that you leave in the /// forward slashes, don't remove them.
ref: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1
I was able to fix this with the following command
typings install es6-promise es6-collections --ambient
Note that you need typings to make the above command work, if you do not have it run the following command to install it
npm install -g typings
UPDATE
typings update doesn't read --ambient it became --global also for some people you need to install the definitions of the above libraries, just use the following command
typings install dt~es6-promise dt~es6-collections --global --save
Thanks to #bgerth for pointing this out.
When having Typescript >= 2 the "lib" option in tsconfig.json will do the job. No need for Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html
{
"compilerOptions": {
"target": "es5",
"lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
}
}
For Angular 2.0.0-rc.0 adding node_modules/angular2/typings/browser.d.ts won't work. First add typings.json file to your solution, with this content:
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
And then update the package.json file to include this postinstall:
"scripts": {
"postinstall": "typings install"
},
Now run npm install
Also now you should ignore typings folder in your tsconfig.json file as well:
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
Update
Now AngularJS 2.0 is using core-js instead of es6-shim. Follow its quick start typings.json file for more info.
you can add the code at the beginning of .ts files.
/// <reference path="../typings/index.d.ts" />
I was getting this on Angular 2 rc1. Turns out some names changed with typings v1 vs the old 0.x. The browser.d.ts files became index.d.ts.
After running typings install locate your startup file (where you bootstrap) and add:
/// <reference path="../typings/index.d.ts" /> (or without the ../ if your startup file is in the same folder as the typings folder)
Adding index.d.ts to the files list in tsconfig.json did not work for some reason.
Also, the es6-shim package was not needed.
I was able to fix this by installing the typings module.
npm install -g typings
typings install
(Using ng 2.0.0-rc.1)
I had the same problem and I solved it using the lib option in tsconfig.json. As said by basarat in his answer, a .d.ts file is implicitly included by TypeScript depending on the compile targetoption but this behaviour can be changed with the lib option.
You can specify additional definition files to be included without changing the targeted JS version. For examples this is part of my current compilerOptions for Typescript#2.1 and it adds support for es2015 features without installing anything else:
"compilerOptions": {
"experimentalDecorators": true,
"lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
"module": "commonjs",
"moduleResolution": "node",
"noLib": false,
"target": "es5",
"types": ["node"]
}
For the complete list of available options check the official doc.
Note also that I added "types": ["node"] and installed npm install #types/node to support require('some-module') in my code.
typings install dt~es6-shim --save --global
and add the correct path to index.d.ts
///<reference path="../typings/index.d.ts"/>
Tried on #angular-2.0.0-rc3
If npm install -g typings typings install still does not help, delete node_modules and typings folders before executing this command.
This is that think how everyone is trying to do something different. I believe these systems still far from the final version.
In my case, I updated from rc.0 to rc.5 this error appeared.
My fixed was change the tsconfig.json.
{
"compilerOptions": {
"target": "es6", <-- It was es5
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "../wwwroot/app"
},
"compileOnSave": true,
"exclude": [
"../node_modules",
"../typings/main"
]
}
add typing.d.ts in main folder of the application and over there declare the varible which you want to use every time
declare var System: any;
declare var require: any;
after declaring this in typing.d.ts, error for require will not come in the application..
I am new to Angular but for me the solution was found by simply importing Input. Can't take credit for this one, found it on another board. This is a simple fix if you're having the same problem but if your issues are more complex I'd read the stuff above.
Mukesh:
you have to import input like this at top of child component
import { Directive, Component, OnInit, Input } from '#angular/core';
I found this very helpful doc at Angular 2's website. It finally let me get things working properly, whereas the other answers here, to install typings, failed me with various errors. (But helped lead me in the right direction.)
Instead of including es6-promise and es6-collections, it includes core-js, which did the trick for me... no conflicts with Angular2's core ts definitions. Additionally the document explained how to set up all this to happen automatically when installing NPM, and how to modify your typings.json file.
I was getting this error after merging my dev branch to my current branch. I spent sometime to fix the issue. As you can see in the below image, there is no problem in the codes at all.
So the only fix worked for me is that Restarting the VSCode
Angular 2 RC1 renamed the node_modules/angular2 directory to node_modules/angular.
If you're using a gulpfile to copy files to an output directory you probably still have node_modules/angular sitting in there which may be getting picked up by the compiler and confusing the hell out of itself.
So (carefully) wipe out what you have in node_modules that is for the beta versions, and also delete any old typings and re-run typings install.
Do import the below statement in your JS file.
import 'rxjs/add/operator/map';
The accepted answer doesn't provide a viable fix, and most of the other ones suggest the "triple-slashes" workaround which is not viable anymore, since the browser.d.ts has been removed by the Angular2 latest RC's and thus is not available anymore.
I strongly suggest to install the typings module as suggested by a couple solutions here, yet it's not necessary to do it manually or globally - there's an effective way to do that for your project only and within VS2015 interface. Here's what you need to do:
add typings in the project's package.json file.
add a script block in the package.json file to execute/update typings after each NPM action.
add a typings.json file in the project's root folder containing a reference to core-js (overall better than es6-shim atm).
That's it.
You can also take a look to this other SO thread and/or read this post on my blog for additional details.
Good call, #VahidN, I found I needed
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
In my tsconfig too, to stop errors from es6-shim itself
This could be because you are missing an import.
Example:
ERROR in src/app/products/product-list.component.ts:15:15 - error
TS2304: Cannot find name 'IProduct'.
Make sure you are adding the import at the top of the file:
import { IProduct } from './product';
...
export class ProductListComponent {
pageTitle: string = 'product list!';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string = 'cart';
products: IProduct[] = ... //cannot find name error
Now you must import them manually.
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';
this.http.post(url, JSON.stringify(json), {headers: headers, timeout: 1000})
.retry(2)
.timeout(10000, new Error('Time out.'))
.delay(10)
.map((res) => res.json())
.subscribe(
(data) => resolve(data.json()),
(err) => reject(err)
);
Update tsconfig.json, change
"target": "es5"
to
"target": "es6"

How to solve kartik\dialog\Dialog not found in yii2?

I can run controller in development correctly but I facing error kartik\dialog\Dialog not found in production
like thise picture
Why this thing happen?
How I can check it? in Vendor folder maybe.
and How to solve it?
Here is my composer.json
{
"name": "vendor/myweb",
"description": "Description of project myweb.",
"authors": [
{
"name": "Administrator",
"email": "developer1#myweb.com"
}
],
"require": {
"kartik-v/yii2-dialog": "*"
}
}
Thanks in advance.
Check in vendor for this, if it does not exist, go to point 2.
Add this line to require section in project-directory/composer.json file
"kartik-v/yii2-dialog": "*"
Then run in project directory command:
composer update
I hope you found the answer by now !
IF NOT:
I have struggled with this problem long enough to feel desperate :)
here's what I ended up doing:
1- install Dialog using composer : composer.phar require kartik-v/yii2-export "*
if it gives these errores :
Problem 1
- kartik-v/yii2-dialog dev-master requires bower-asset/bootstrap3-dialog ~1.34 -> no matching package found.
- kartik-v/yii2-dialog v1.0.1 requires bower-asset/bootstrap3-dialog ~1.34 -> no matching package found.
- kartik-v/yii2-dialog v1.0.0 requires bower-asset/bootstrap3-dialog ~1.34 -> no matching package found.
- kartik-v/yii2-dialog 1.0.x-dev requires bower-asset/bootstrap3-dialog ~1.34 -> no matching package found.
- Installation request for kartik-v/yii2-dialog #dev -> satisfiable by kartik-v/yii2-dialog[dev-master, 1.0.x-dev, v1.0.0, v1.0.1].
You need to run this command: composer global require "fxp/composer-asset-plugin:^1.2.0"
it rebuild dependencies and set jquery libraries to match with the ones required by Kartik Dialog. Good luck

Importing angular-translate imports an empty object

I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.

Babel does not seem to transpile [duplicate]

I have this code:
"use strict";
import browserSync from "browser-sync";
import httpProxy from "http-proxy";
let proxy = httpProxy.createProxyServer({});
and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:
babel proxy.js --out-file proxified.js
The output file gets copied instead of compiled (I mean, it's the same as the source file).
What am I missing here?
Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:
npm install babel-preset-env
and run
babel --presets env proxy.js --out-file proxified.js
or create a .babelrc file containing
{
"presets": [
"env"
]
}
and run it just like you were before.
env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing
{
"presets": [
["env", { "targets": { "node": "true" } }],
]
}
to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.
Most of these answers are obsolete. #babel/preset-env and "#babel/preset-react are what you need (as of July 2019).
I had the same problem with a different cause:
The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.
I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.
First ensure you have the following node modules:
npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader
Next, add this to your Webpack config file (webpack.config.js) :
// webpack.config.js
...
module : {
loaders : [
{
test : /\.js$/,
loader : 'babel',
exclude : /node_modules/,
options : {
presets : [ 'es2015', 'stage-2' ] // stage-2 if required
}
}
]
}
...
References:
https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/issues/214
Good Luck!
As of 2020, Jan:
STEP 1: Install the Babel presets:
yarn add -D #babel/preset-env #babel/preset-react
STEP 2: Create a file: babelrc.js and add the presets:
module.exports = {
// ...
presets: ["#babel/preset-env", "#babel/preset-react"],
// ...
}
STEP 3:- Install the babel-loader:
yarn add -D babel-loader
STEP 4:- Add the loader config in your webpack.config.js:
{
//...
module: [
rules: [
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader')
]
]
//...
}
Good Luck...
npm install --save-dev babel-preset-node5
npm install --save-dev babel-preset-react
...and then creating a .babelrc with the presets:
{
"presets": [
"node5",
"react"
]
}
...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1
https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react
Same error, different cause:
Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.
Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.
fix your .babelrc
{
"presets": [
"react",
"ES2015"
]
}
In year 2018:
Install following packages if you haven't yet:
npm install babel-loader babel-preset-react
webpack.config.js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'] // <--- !`react` must be part of presets!
}
}
],
}
Ultimate solution
I wasted 3 days on this
import react from 'react' unexpected identifier
I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.
What worked? Two words: npm start. That's right.
run the
npm start
command in the terminal to launch a local server
...
(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)
I found that info on this neat page. It's in Polish but feel free to use Google translate on it.

NPM does not publish dependencies

I have been fooling around with Node and npm Packages as CLI applications. I have a project with a package.json, all filled in correctly. When I run the application with different arguments via WebStorm, it all works fine. If I publish the npm package however... there are no dependencies... the npm site can't find one.. and when I install the CLI application, it fails running because yeah... the dependencies aren't pulled in...
This is my package.json
{
"name": "wmg",
"version": "0.0.8",
"description": "A Commandline Foolin around",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/Arvraepe/wmg.git"
},
"keywords": ["Stuff", "Foolin"],
"target": "main",
"preferGlobal": true,
"bin": {
"wmg": "wmg.js"
},
"author": "Arne Van Raepenbusch <arvraepe#gmail.com>",
"license": "ISC",
"devDependencies": {
"prompt": "^0.2.14",
"restify": "^3.0.3",
"underscore": "^1.8.3"
}
}
I tried running pakmanager deps, but that gave me this strange error
======================= WARNING =======================
Assuming browser mode by default is deprecated.
Include browserDependencies in your package.json
-- OR --
pakmanager -e browser build
In the next release of pakmanager, the node environment will be assumed as default
=======================================================
Targeted Environment: browser
[[[deps]]]
[ERROR] The following packages are `require`d, but not in the package, nor on npm:
wmg
pakmanager {}
======================= WARNING =======================
Assuming browser mode by default is deprecated.
Include browserDependencies in your package.json
-- OR --
pakmanager -e browser build
In the next release of pakmanager, the node environment will be assumed as default
=======================================================
Surely my package isn't supposed to be dependent on itself?
Can someone shed some more light on this?
I looked at your package, and as others have noted you have devDependencies listed but no dependencies. Typically devDependencies is for things like test frameworks, which you need to work on the package but not to use it. Both prompt and restify are used in your app and should be listed in a dependencies object instead of devDependencies.
Your package.json file contains no dependencies. Only devDependencies which npm assumes are required only for development (mocha for example) and are not required for installation.
If any of your devDependencies are actual user dependencies move them to dependencies.