Develop Reference

does not provide an export named 'BrowserQRCodeReader'

I am using zxing-js/library library for qr code reading. I am facing a strange issue. The code for the qr scanning works in stackblitz online sample code, but not in my local environment.
I am getting this error in local environment on run time. The compilation proceeds successfully.
Uncaught SyntaxError: The requested module '/node_modules/#zxing/library/esm5/index.js' does not provide an export named 'BrowserQRCodeReader'
stackblitz link
github link

It seems like the zxing-js/library has issues with bundling.
I can reproduce the error by running npm run build, followed by npm run start.
Looks like some bundling would be required for you to get this working in the browser. See this post for more info
In the meantime, you can use npm run start:dev, and you will be able to do local development as expected.
Thanks #passle_ from the #open-wc team for helping with this.

In addition to jlengrands answer, npm start will start the owc-dev-server which does a minimal amount of work; it'll only resolve the bare modules.
The QR code library that you're trying to use uses commonjs, it'll need a little magic to be transformed so the browser can understand that code. The webpack-dev-server can do this for you, which you can run with npm run start:dev.

Easy IDEA sharing of JS code between different JS projects?

I want to share common JS code between different JS projects in a very easy way.
I thought about creating a Bower component (see: LINK) or a private NPM component (see: LINK).
However, I want it to be used in a very IDE friendly way. A such, that when we update the Common code (project) we don't need to first publish the changed Common code.
Let me explain what I mean by how we do this in Java with Eclipse (we use mostly IntelliJ with Python and React JS currently): In a Java project we include Common Java code through a maven dependency, and also open the Common Java code as a project in Eclipse. Eclipse is then smart enough to see that it will include a direct link to the Common code project, instead of including the Common code as jar such that you don't need to first deploy the Common code project to the private repo when making changes to it.
We aren't experts in JS code yet, so how can we realise this same kind of friendly IDE usage with JS ?

I solved it by using npm-link:
1) Used npm-link as explained here: LINK
2) Solved the babel problem as explained here: LINK
In my case, my babel config looks like:
options: {
presets: ['babel-preset-es2015', 'babel-preset-react'].map(require.resolve),
plugins: ['babel-plugin-transform-react-jsx-img-import'].map(require.resolve)
}
Works pretty wel. I looked at npm local-dependencies, but it didn't work with the current npm version. Currently it does as they fix it. But I always have to run "npm start" just like other sync npm modules. Neither do I want to use local dependencies as several developers put the shared code at different places, which make it fragil.

Visual Studio 2017: js file causes many typescript errors

Please see the edit below
I have used the following package as a base for my VS Project ->
https://github.com/AngularClass/angular2-webpack-starter
Everything worked nicely in Visual Studio code, I then tried to convert it to a Visual Studio 2017 Project (node.js web)
Now some problems appeared
VS seems to install TypeScript definitions into a special folder C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types
Additionally I included #types/node in my package.json which resulted in the appropriate node_modules folder.
now VS complains with error code TS4090 (Conflicting defintions for 'node').
Is there a possibility apart from deleting the folder in \AppData to tell VS which #types it should use?
The whole integration of TypeScript isn't really clear to me...
Does MSBuild recognize an existing tsconfig.json? or would I have to configure it in in the project-file as seen here?
EDIT
I just noticed that I was actually editing a .js file.
As soon as I changed the extension to .ts every warning and error vanished.
I also got many typescript errors (like TS2307, can't find module '#angular/core') before changing the extension from .js to .ts
The file just did an import (from node)
import * as fs from 'fs';
Could anyone explain why I got this errors?
Why a JS files causes 200+ typescript errors (some don't even seem related to the import from above)?
EDIT2
the errors which occur are
TS2403 - Subsequent Variable declarations must have the same type.
TS2300 - Duplicate identifier 'PropertyKey'
TS4090 - Conflicting definitions for 'node' found (paraphrasing: found in ./node_modules and C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types
All the errors are caused by d.ts files in C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types or C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\CommonExtensions\Microsoft\TypeScript\lib.es6.d.ts
like Bowden Kelly noted, this seems the cause for this problems seems to be the definition files MS put in here C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types, as soon as I install my own definition files in ./node_modules VS finds both definitions (if present) when editing JS files.
So the solution would either be:
doing it the MS Way
somehow exclude MS Directory

This is a BUG related in https://github.com/Microsoft/TypeScript/issues/14565
I was able to eliminate the errors by enabling

For JavaScript, try to uncheck/disable the "new JavaScript language service" under Tools > Options > Text Editor > JavaScript/TypeScript > Language Service. This seemed to help me when I opened random JavaScript files and the error window would go crazy.
Regarding the Angular 2 errors (cannot find module #angular/core), if there is a tsconfig.json in the project directory both Visual Studio and the TS compiler will use that. If you close an reopen the solution everything on the TypeScript tab of project properties should be disabled.
Once you know tsconfig.json is working, if you are using TS 2.x the compiler should find and use the types that come with angular 2 under node_modules/#angular/core/index.d.ts, unless you have a setting in tsconfig that overrides this like types: [].
I have still not been able to figure out 100% what is going on in Visual Studio Errors window since I still get sporadic unjustified errors (I know this because I can still compile). I do know that the Visual Studio TypeScript Language Service is what controls errors and intellisense in the Visual Studio IDE and it is tied to a specific version of TypeScript (2.1 in VS 2017). The errors have always caused problems in both VS 2015 and now VS 2017 also. I think it comes down to the inner workings of the extremely undocumented TypeScript Virtual Projects, for which I have still not found a purpose.
These links are useful reading:
http://blog.angular-university.io/typescript-2-type-system-how-do-type-definitions-work-in-npm-when-to-use-types-and-why-what-are-compiler-opt-in-types/
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types
https://github.com/Microsoft/TypeScript/issues/14540

The definition files installed to C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types are used for giving JavaScript IntelliSense only. If you have TypeScript in your project or a project configured with a tsconfig.json, you need to fetch your own .d.ts files and store them in your project. Luckily this project comes with all the .d.ts files you need already in the package.json a simple npm install should do the trick.
I can tell you that the conflicting definitions with 'node' are likely due to having 2 copies of the node.d.ts file. If you manually installed one yourself, on top of the one included in the projects package.json, then you'll get those errors.
I'm not certain about the TS errors you are getting in your JavaScript file. Can you show me an example of one of the errors and a snippet of the code causing it?
Also you probably don't want integration with MSBuild as this project is already setup to run with npm scripts + webpack. You should check out this plugin: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner
Finally I don't think you want to be inside a Node.js web project. For this project, you are probably best off just opening the folder in VS. To do that just use File > Open > Folder... and navigate to your root folder. This will give you all the editing tools you need without any MSBuild or VS project structure. Considering this project wasn't designed to take advantage of any of those features, it'll probably be easier just to ignore them for now.
Please let me know what other issues you run into.

FYI, this has been fixed in Visual Studio 17.2 🙂

Typeahead using NPM and MVC Core in Visual Studio 2015

I've entered the brave new world of MVC core and using NPM to get various JavaScript packages. However, I've hit a problem which I'm not entirely sure what the best option to solve is. Just to set the scene, I've got a gulpfile which is copying JS from various NPM packages in my project (such as jQuery and bootstrap etc...) to the 'wwwroot/lib' folder.
I now want to add a typeahead 'autocomplete' search box to a particular view, so I added typeahead to the package.json file and updated my gulpfile to copy the additional *.js files to 'wwwroot/lib'. All fine so far, the problem is when I debug my project and open that particular page I get an error where the typeahead.js file has some code at the beginning:-
require('xtend')
I wasn't aware of this command in JavaScript, but a quick search on the internet reveals this is part of JS when run on 'node' or node.js?
I have not used 'node' before (yes, ignoring the fact I'm using NPM to get packages - I only ended up doing that due to a Visual Studio bug in how Bower works) so the question is how do I now get (this particular) typeahead to run within a browser? So I figure options are:-
1) just manually download typeahead instead - but is that not defeating the point of having all these package managers in the first place?
2) start using Bower again (don't think the 'version' bug has been fixed yet)
3) use something to 'fake' the node 'require' commands so that it will work in browser
4) something else...
I've seen a few things that may solve this problem on the internet, but I didn't want to spend ages sorting out a fix which may be the complete wrong way of doing it. Has anyone any suggestions for the best route to follow?

Scratch that, I found another typeahead package on NPM called 'typeahead.js' instead of 'typeahead' and this is just standard JS no NODE stuff. Works perfectly in browser

Keep getting "tsc.exe" exited with code 1

As soon as I add a tsconfig.json file to my Visual Studio 2015 web solution I get the above error.
Also this stops the compiler from re-generating js files even when I set "compileOnSave": true.
When I double click the error it takes me into the Microsoft.Typescript.Targets file which contains a lot of issues such as Unknown Item Group "TypeScriptCompile". In the error list these appear as warnings but they are there whether I have a tsconfig.json file or not.
Is there any way of solving it or getting more information on what the problem is?

Install these 2 NuGet packages:
Microsoft.TypeScript.MSBuild and Microsoft.TypeScript.Compiler
It updates your project with MSBuild task definition and TS compiler and solves the compilation issue

For me installing TypeScript for Visual Studio fixed it, although TypeScript was already installed globally on my machine via npm

I am using a .NET Core 1.0 project and ran into the same situation of getting a tsc.exe return code of 1. My problem was an invalid tsconfig.json. However, msbuild does not provide those details.
The easiest way to find out is to enable detailed output in Visual Studio -> Tools -> Options -> Projects and Solutions -> Build and Run -> MSBuild project build output verbosity. Change this to Detailed. After compiling, find tsc.exe in the output window to see the actual error tsc was throwing.

I had this problem as well after using some standard Angular / Typescript tutorials. The solution was as simple as to update typescript in Visual Studio.
For some reason the default is now 1.8.4. and it does not allow you to automatically update it from Visual Studio Extensions and does not say it is out of date. You just download it from here and install newest version yourself. Download link may change in the future of course.
P.S. I think the problem was caused by the fact that some options that did not exist in older compiler were used.

This worked for TeamCity build server with Visual Studio 2015 when I had upgraded a project from Typescript 1.8 to 2.3
Install package Microsoft.TypeScript.MSBuild
Update *.csproj as follows
Upgrade TypeScriptToolsVersion to 2.3 (in this case)
Remove two lines of Import Project that referred to
Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets
Note
Removing the import elements is important as they are referring to TypeScript installed in the %PROGRAMFILES(X86)% folder.
Installing the package adds import elements that reference the packages folder - making your build more portable

I had same issue and what happened in my case is that the file .ts was in the project but it was not on file system. Something like this . So removed the file from project and everything started to work again.

Move all files within C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Typ‌​escript into some new folder (e.g. backup), then try again. This will cause MSBuild to select tsc.exe from within the appropriately versioned folder instead of using the one in the C:\Program Files (x86)\Microsoft SDKs\TypeScript.

Installing Microsoft.Typescript.MsBuild fixed the issue for me, but only if I installed the penultimate version. The current (stable) version is 2.0.6, and after I installed it, the issue persisted. When I reverted to 1.8.11, the issue went away.

I had the same issue. Fixed it by removing the following from the project file
<TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>

Double clicking on one of the .ts files inside of visual studio worked for me. It then came up with a dialog box asking if I wanted to update the project to the latest version of TS. After that the project built fine and the compile error was gone.

There is need to Re-Install/Upgrade, Typescript in your system.
As i was facing same issue and after installing Typescript again got resolved the error, as tsc.exe was missing in (C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1).

We are using npm and angular-cli outside VS to transpile our typescript. I ran into the problem described above on the only dev box that had the Web Essentials extension loaded. After trying installing, and then uninstalling the MS nugets and TypeScript extension described above to no avail, uninstalling Web Essentials finally did the trick.

I was facing same issue, and the reason was, 2 developers were working on same project so when he added new .ts files into project and some angular controllers. The project was rebuilding and running as expected however when another developer tried to take latest source code on his machine and on rebuilding he was getting same error "tsc.exe" exited with code 1.
So reason was the files created/added in source control was not showing added on
developer 2 solution. Please try to check if all the .ts, .js files are up to date on both developers solution.

I had the same issue on a solution using AngularJS but without the compiler (below 2.x so not needed). I simply removed the index.d.ts from script folder and it was ok (no NuGet packages necessary)

If youre are facing this problem when updating from bootstrap 3 to 4 just delete .ts file created inside the Scripts Folder then build again.