I'm reading the article Debugging ES6 in Visual Studio Code and find a syntax in launch.json file that I don't quite understand.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch App.js",
"program": "${workspaceRoot}/src/app.js",
"outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
}
}
"outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
What does the ** (two stars) represent? Also, does *.js match filname.js.map beside matching filename.js? I am not sure if this kind of pattern relates to regexr.
This is not a regex (because dot in ".js" does not look like it matches any character).
This is kind of fancy wildcard for a filename:
${workspaceRoot} - some environmental variable
/.compiled - exact name of folder (e.g. for generated code)
/** - any set of nested folders
/*.js - any file with js extension at path specified before
Also, does *.js match filname.js.map beside matching filename.js?
I assume that it does not, only filename.js.
the ** (double-glob) means that it will search in any number of subdirectories. For example,
a/**/b
will match
a/a/b
a/c/b
a/c/a/b
and so on.
I just want to make VS Code's debugger work with webpack-dev-server without ignoring my breakpoints.
Now, webpack-dev-server serves the bundled files from memory, while, if I understand this correctly, the VS Code debugger searches for them on disk (...or not?...)
As a result, whenever I set a breakpoint I get the dreaded
Breakpoint ignored because generated code not found (source map problem?)
Now, every related question I could find had to do with typescript mostly, and not with the fact that webpack-dev-server serves from memory. I am not using typescript. Seems that people are either not using webpack-dev-server, or I am missing something blatantly obvious, with my money on the latter.
This is my VS Code 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": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"trace": true
}
]
}
and these are the related lines from my webpack.config.js
devtool: 'cheap-module-source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
I have tried various modifications to the launch.json to no avail, so I am just pasting it in vanilla form.
Note that the output.path is only used when there is a production build and the files are spewed to disk.
Here is what the structure of the files is in the served page:
And here is the command I am running in development
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js"
},
Finally, here is a relevant chunk from the trace file
From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"30","url":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","startLine":0,"startColumn":0,"endLine":150,"endColumn":57,"executionContextId":2,"hash":"216099518F33D6091EC12795265804FB35669A30","executionContextAuxData":{"isDefault":true,"frameId":"18228.1"},"isLiveEdit":false,"sourceMapURL":"manifest.0ec68ebd5f0abf9b4cd4.js.map","hasSourceURL":false,"isModule":false,"length":5906}}
Paths.scriptParsed: could not resolve http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js to a file under webRoot: e:\Mitch\Workspace\Projects\project-name. It may be external or served directly from the server's memory (and that's OK).
SourceMaps.getMapForGeneratedPath: Finding SourceMap for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js by URI: manifest.0ec68ebd5f0abf9b4cd4.js.map and webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMaps.loadSourceMapContents: Downloading sourcemap file from http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js.map
To client: {"seq":0,"type":"event","event":"script","body":{"reason":"new","script":{"id":1,"source":{"name":"manifest.0ec68ebd5f0abf9b4cd4.js","path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","sourceReference":1001}}}}
To client: {"seq":0,"type":"event","event":"scriptLoaded","body":{"path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js"}}
SourceMap: creating for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js
SourceMap: sourceRoot:
SourceMap: sources: ["webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159"]
SourceMap: webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMap: no sourceRoot specified, using webRoot + script path dirname: e:\Mitch\Workspace\Projects\project-name\
SourceMap: mapping webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159 => webpack\bootstrap 7617f9bf7c8b0bc95159, via sourceMapPathOverrides entry - "webpack:///*": "*"
SourceMaps.scriptParsed: http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js was just loaded and has mapped sources: ["webpack\\bootstrap 7617f9bf7c8b0bc95159"]
From my experience (about 15 mins ago), if 'webpack.config.js' has a value for the context property, then that has to be accounted for for '.vscode/launch.json'.
For an example, if 'webpack.config.js' has the following:
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: './index.ts',
Then launch.json needs that context ('src') too:
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}/src",
"sourceMaps": true,
I just updated/fixed my repo so now TypeScript breakpoints should bind.
https://github.com/marckassay/VSCodeNewProject
For Webpack 4:
Install webpack-cli locally if you don't already have it installed (it has been pulled out of webpack).
Add the following VSCode debug configuration to your .vscode/launch.json (that's the file that VSCode opens when you click on the wheel icon in Debug view):
{
"type": "node",
"request": "launch",
"name": "build",
"program": "${workspaceFolder}/node_modules/.bin/webpack-cli",
"args": [
"--config",
"webpack.config.prod.js"
],
"autoAttachChildProcesses": true,
"stopOnEntry": true
}
stopOnEntry will make debugger stop in the very first (shebang) line of webpack.js, like this:
Old thread, but it still comes up in searches...
It feels like turning on "writing the generated code to disk" might be the solution here:
As per https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-, add this to webpack.config.js:
module.exports = {
//...
devServer: {
writeToDisk: true
}
};
If in case someone troubling with start-server-webpack-plugin of webpack:
I have recently stuck on the same issue and #MarkoBonaci's answer came to rescue. However, I stuck on another error which is produced by the webpack plugin: start-server-webpack-plugin.
Below is the error I got, when I launched by application via debugger of vscode:
cd /home/me/projects/villager-topics ; env "NODE_ENV=development"
/home/me/.nvm/versions/node/v11.6.0/bin/node --inspect-brk=33538
node_modules/.bin/webpack-cli --colors --progress --config
./webpack.dev.js Debugger listening on
ws://127.0.0.1:33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf For help,
see: https://nodejs.org/en/docs/inspector Debugger attached.
clean-webpack-plugin: /home/rajeev/projects/villager-topics/dist has
been removed. 10% building 1/1 modules 0 active webpack is watching
the files…
98% after emitting StartServerPluginStarting inspector on
127.0.0.1:33538 failed: address already in use
As you can see StartServerPlugin is using the same port 33538 which is already taken by the parent process. So we need to tell StartServerPlugin to use some other port for its inspection initialization. This, we can achieve through the initialization of StartServerPlugin.
new StartServerPlugin({
name: 'server.js',
nodeArgs: ['--inspect=5858'], // allow debugging),
})
Here in nodeArgs we are specifying the inspect port as 5858. After this configuration is saved and then relaunch the application through Debugger of vscode, you will successfully start the application.
I have an ASP.NET core project and I'm getting this error when I try to build it:
error TS18003: Build:No inputs were found in config file 'Z:/Projects/client/ZV/src/ZV/Scripts/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["../wwwroot/app","node_modules/*"]'.
1> The command exited with code 1.
1> Done executing task "VsTsc" -- FAILED.
This is my tsconfig.json file:
{
"compileOnSave": true,
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es5", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/app/",
"removeComments": false,
"sourceMap": true,
"target": "es6"
},
"exclude": [
"../wwwroot/app",
"node_modules/*"
]
}
Is this a bug or am I doing something wrong? I did recently upgrade Visual Studio 2015 to update 3. Has anyone encountered this before?
Add an empty typescript file to the typescript scripts folder (the location of your tsconfig file) to satisfy the typescript compiler.
You can also try to restart your code editor. That works well too.
This can occur because typescript server can't find any files described by the include array:
// tsconfig.json
{
//...
"include": [
"./src/"
],
}
If you're using VSCode, you can restart your TS server within your editor super easily to prompt it to re-evaluate the file like this:
Navigate to any .ts or .tsx file
Open the command palette (CMD + SHIFT + P on mac)
Run the TypeScript: Restart TS server command:
I'm not using TypeScript in this project at all so it's quite frustrating having to deal with this. I fixed this by adding a tsconfig.json and an empty file.ts file to the project root. The tsconfig.json contains this:
{
"compilerOptions": {
"allowJs": false,
"noEmit": true // Do not compile the JS (or TS) files in this project on build
},
"compileOnSave": false,
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
}
If you are using the vs code for editing then try restarting the editor.This scenario fixed my issue.I think it's the issue with editor cache.
I have all of my .ts files inside a src folder that is a sibling of my tsconfig.json. I was getting this error when my include looked like this (it was working before, some dependency upgrade caused the error showing up):
"include": [
"src/**/*"
],
changing it to this fixed the problem for me:
"include": [
"**/*"
],
In modern typescript config just set "allowJs" and no need to add any empty .ts file in include directories such as "src" (specified in include array)
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
...
},
"include": [
"src"
]
}
When you create the tsconfig.json file by tsc --init, then it comments the input and output file directory. So this is the root cause of the error.
To get around the problem, uncomment these two lines:
"outDir": "./",
"rootDir": "./",
Initially it would look like above after un-commenting.
But all my .ts scripts were inside src folder. So I have specified /src.
"outDir": "./scripts",
"rootDir": "./src",
Please note that you need to specify the location of your .ts scripts in rootDir.
I was getting this error:
No inputs were found in config file 'tsconfig.json'.
Specified include paths were '["**/*"]' and exclude paths '["**/*.spec.ts","app_/**/*.ts","**/*.d.ts","node_modules"]'.
I had a .tsconfig file, which read TS files from the ./src folder.
The issue here was that with the source folder not containing any .ts files and I was running tslint. I resolved issue by removing tslint task from my gulp file, as I don't have any .ts files to be compiled and linted.
Changing index.js to index.ts fixed this error for me. (I did not have any .ts files before this).
Note: remember to change anywhere you reference index.js to index.ts except of course, where you reference your main file. By convention this is probably in your lib or dist folders.
My tsconfig.json:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"inlineSourceMap": true,
"noImplicitAny": false
}
}
My outDir is ./dist so I reference my main in my package.json as "main": "dist/index.js"
"outDir"
Should be different from
"rootDir"
example
"outDir": "./dist",
"rootDir": "./src",
You need to have the root index.tsx or index.ts file for the tsc command to work.
I added the following in the root ( visual studio )
{
"compilerOptions": {
"allowJs": true,
"noEmit": true,
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
"include": [
"**/*"
],
"exclude": [
"assets",
"node_modules",
"bower_components",
"jspm_packages"
],
"typeAcquisition": {
"enable": true
}
}
The solution that worked for me was to add a ./ before each include path in the config file:
"include": ["./src/**/*.d.ts", "./src/**/*.js", "./src/**/*.svelte"]
Ok, in 2021, with a <project>/src/index.ts file, the following worked for me:
If VS Code complains with No inputs were found in config file... then change the include to…
"include": ["./src/**/*.ts"]
Found the above as a comment of How to Write Node.js Applications in Typescript
When using Visual Studio Code, building the project (i.e. pressing Ctrl + Shift + B), moves your .ts file into the .vscode folder (I don't know why it does this), then generates the TS18003 error.
What I did was move my .ts file out of the .vscode folder, back into the root folder and build the project again.
The project built successfully!
add .ts file location in 'include' tag then compile work fine. ex.
"include": [
"wwwroot/**/*" ]
My VSCode was giving me the squiggly line at the beginning of my tsconfig.json file, and had the same error, so
I made sure I had at least one .ts file in the folder specified in the "include" paths (one of the folders in the include path was empty and it was fine)
I simply closed the VSCode and opened it back up, and that fixed it. (sigh..)
My folder structure
tsconfig.json
package.json
bar/
myfile.ts
lib/
(no file)
My tsconfig.json
"compilerOptions": { ... },
"include": [
"bar/**/*",
"lib/**/*"
],
"exclude": [
".webpack/**/*",
".vscode/**/*"
]
If you don't want TypeScript compilation, disable it in your .csproj file, according to this post.
Just add the following line to your .csproj file:
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
I had to add the files item to the tsconfig.json file, like so:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
},
"files": [
"../MyFile.ts"
]
}
More details here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Btw, just had the same problem.
If you had my case, then you probably have the tsconfig.json not in the same directory as the .ts file.
(In my case I stupidly had next to launch.json and tasks.json inside the .vscode folder :P)
I had existing tsconfig files for 4 existing projects in my solution. After upgrading to vs2017 I experienced this problem. It was fixed by adding the (supposedly default) include and exclude sections to the files, as described by NicoJuicy.
For anyone experiencing the same error should try adding "node modules" to the exclude options
{
"compilerOptions": {
...
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"./out.d.ts",
"node_modules",
]
}
If you are using VSCode, and you have several folders opened then you need to open the one folder you are working on for it to go away.
Wrong Opening of Folder
Right Opening of Folder
I have a tsconfig.json file that doesn't apply to any .ts files. It's in a separate folder. Instead I only use it as a base for other tsconfig files via "extends": "../Configs/tsconfig.json". As soon as I renamed the base config file to something else e.g. base-tsconfig.json (and updated the extends statements) the error went away and the extending still worked.
I got the same error and in my case it was because vscode couldn't recognize .ts file.
It was seeing it as text file and I had to rename it to remove one letter and add it back to make it work.
I ran into this issue constantly while packing my projects into nugets via Visual Studio 2019. After looking for a solution for ages I seem to have solved this by following advice in this article
MSBuild & Typescript
especially part about <TypeScriptCompile /> where I included all my .ts resources with the Include operator and excluded others such as node_modules with the Remove operator. I then deleted the tsconfig.json file in each offending project and the nuget packages were generated and no more errors
I received this same error when I made a backup copy of the node_modules folder in the same directory. I was in the process of trying to solve a different build error when this occurred. I hope this scenario helps someone. Remove the backup folder and the build will complete.
I had the same error because I had this:
"include": [
"wwwroot/ts/*.ts"
],
"exclude": [
"node_modules",
"wwwroot"
]
The error appear because the folder wwwroot appear in include and exclude, you should quit one of them.
Make sure all your files has a correct name.
I'm trying to use the dynamic module loading feature in ES6 and it seems that it's not actually implemented yet. But there are substitutes like ES6 Module Loader Polyfill which supposedly should do the trick for the time being.
So I have a ES6 project transpiled to ES5 using Babel and Webpack, and it works fine on its own. But all of my code is merged into one bundle.js file which I would like to split into modules. And when I tried the mentioned Polyfill, it throws some error from within and the project won't even start.
index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined
And line 6 reads:
var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//';
Here's my package.js file:
{
"dependencies": {
"es6-module-loader": "^0.17.11",
"events": "^1.1.0",
"flux": "^2.1.1",
"fs": "0.0.2",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.4.0",
"react-tap-event-plugin": "^1.0.0",
},
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"html-webpack-plugin": "^2.16.1",
"react-hot-loader": "^1.3.0",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.13.0",
}
}
Can someone please point me to a working example of dynamic module loading with Webpack and Babel?
There's really three things at play here... dynamic importing, lazy loading, and code splitting/bundling. The System.import method, poly-filled with ES6 Module Loader will allow dynamic imports but not dynamic code splitting:
However, most transpilers do not support converting System.load calls to require.ensure so you have to do that directly if you want to make use of dynamic code splitting.
Dynamic code splitting is when you create child bundles within an entry point, which you can then dynamically lazy load. For this I would recommend using the promise-loader which is a bit more friendly than require.ensure:
import LoadEditor from 'promise?global,[name]!./editor.js';
...
if (page === 'editor') {
LoadEditor().then(Editor => {
// Use the Editor bundle...
})
}
Webpack will now break the editor.js module and all of it's dependencies into a separate bundle which can be loaded immediately or dynamically (as shown above). Lastly, depending on the size of the app, I think you should also consider splitting the vendor code out.
UPDATE
System.import was removed from the spec and replace by just import(). The new webpack docs have a page that discusses dynamic imports in webpack and the limitations of them.
I'm looking to configure a Build System in Sublime Text for TypeScript.
I'm currently using...
{
"cmd": ["tsc", "$file"],
"selector": "source.ts"
}
I'd also like to set the 'file_regex' property to handle error messages.
Anyone know what to set this to?
Use this on OS-X:
{
"cmd": ["tsc","$file"],
"file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
"selector": "source.ts",
"osx": {
"path": "/usr/local/bin:/opt/local/bin"
}
}
EDIT:
Here is the Sublime Build System created for Windows. Tested and working as expected. However you need to include tsc.cmd path in the windows environment, otherwise you should define the root to the Typescript command in the cmd section below:
{
"cmd": ["tsc","$file"],
"file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
"selector": "source.ts",
"windows": {
"cmd": ["tsc.cmd", "$file"]
}
}
There are two versions now. This one, or this one. Creating your own is easy, by referring to this document.