I am trying to transpile my ES6 code via Babel, I am using the next/babel preset along with preset-env and I'm using the browsers: defaults target.
The NextJS preset comes with #babel/plugin-proposal-object-rest-spread in its plugins array, I'm wondering why I am getting an error when testing on edge that says Expected identifier, string or number, and when looking in the compiled JS for the error, I see it happens when {...t} occurs.
Here is my babel.config.js:
module.exports = {
presets: [
[
'next/babel',
{
'#babel/preset-env': {
targets: {
browsers: 'defaults'
},
useBuiltIns: 'usage'
}
}
]
],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
['styled-components', { ssr: true, displayName: true, preprocess: false }],
[
'module-resolver',
{
root: ['.', './src']
}
]
],
env: {
development: {
compact: false
}
}
};
Any help on this would be greatly appreciated!
In the end my problem was related to a package that was not being transpiled by babel. My solution was to use NextJS' next-transpile-modules plugin to get babel to transpile the package code into something that would work on the browsers I need.
Here's an example of my NextJS webpack config with the package I need transpiled specified:
const withTM = require('next-transpile-modules');
module.exports = withTM({
transpileModules: ['swipe-listener']
});
SCRIPT1028: Expected identifier, string or number error can occur in 2 situations.
(1) This error get trigger if you are using trailing comma after your last property in a JavaScript object.
Example:
var message = {
title: 'Login Unsuccessful',
};
(2) This error get trigger if you are using a JavaScript reserved word as a property name.
Example:
var message = {
class: 'error'
};
solution is to pass the class property value as a string. You will need to use bracket notation, however, to call the property in your script.
Reference:
ERROR : SCRIPT1028: Expected identifier, string or number
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'm using an arrow function and it's complaining about a parsing error:
Parsing Error: Unexpected token =
However my code is valid (please tell me if i'm mistaken). Additionally, i've set the .eslintrc settings to use es6 parsing:
.eslintrc
{
"parserOptions": {
"ecmaVersion": 6,
}
}
Here's my code:
class foo() {
// Doesn't like the line below
// even though it is valid:
namedFunction = () => {
}
}
There a way to resolve this error? This makes a huge different in terms of what the value of this from a particular function.
You're using class field (a.k.a. property initializer) syntax, which is not part of ECMAScript 2015 (ES6), nor ES2016 or 2017, and so unsupported by ESLint. It's currently a Stage 3 proposal. If you want to use it with ESLint, you'll need to use babel-eslint. That page describes how to use it, but the gist is:
Installation
$ npm install eslint babel-eslint --save-dev
# or
$ yarn add eslint babel-eslint -D
Note: babel-eslint requires babel/core#>=7.2.0 and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.
Setup
To use babel-eslint, "babel-eslint" must be specified as the parser in your ESLint configuration file (see here for more detailed information).
.eslintrc.js
module.exports = {
parser: "babel-eslint",
};
With the parser set, your configuration can be configured as described in the Configuring ESLint documentation.
In 2021 it seems that babel-eslint has been deprecated in favour of #babel/eslint-parser, according to the GitHub repo:
NOTE: babel-eslint is now #babel/eslint-parser and has moved into the Babel monorepo.
So to update the instructions from the other answers, you need to:
npm i eslint #babel/eslint-parser --save-dev
Then make sure you configure the parser key in .eslintrc:
{
"parser": "#babel/eslint-parser",
...
}
As an aside, as the OP doesn't mention the runtime, I'm running in Node 12 so I don't need babel to transpile my code but ESlint does need babel to lint the code (sounds weird but that's my understanding). So I also needed a basic babel config, babel.config.json:
{
"presets": [
[
"#babel/env",
{
"targets": {
"node": "12"
}
}
]
]
}
I had a very similar problem. The accepted answer is correct, as far as it goes, and very helpful. But I use a json version of the eslint config, not a javascript one, so once babel-eslint was installed using:
npm i eslint babel-eslint --save-dev
I had to change my json config. It looks like this now:
.eslintrc.json
{
"parserOptions": {
"es6": true,
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "babel-eslint",
"rules": {
"no-unused-vars": 0
},
"env": {
"browser": true,
"node": true
}
}
It seems that native support for Public class fields without the need for a babel parser is now finally supported in Eslint since eslint8 with setting ecmaVersion: 13.
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.