TypeScript: "Left side of comma operator is unused and has no side effects" error in development environment

Viewed 3713

Problem

When I'm trying to start my development environment with npm run dev:server I'm getting this error:

return new TSError(diagnosticText, diagnosticCodes);
           ^
TSError: ⨯ Unable to compile TypeScript:
src/routes/snippets.ts:6:26 - error TS2695: Left side of comma operator is unused and has no side effects.

6 exports.snippetRouter = (0, express_1.Router)();

and then server crashes. But when I run npm run build project compiles without any errors. I can then run node build/server.js and everything works as it should. I'm also not getting any errors or warnings in my editor.

I looked for similar errors but couldn't find anything matching my case.

Any ideas what can I try to fix that?

It's also worth mentioning that if I comment/delete app.use('/api/snippets', snippetRouter) line from server.ts and run npm run dev:server everything works correctly (except for the missing functionality of course).

Project

Project structure:

src
├── controllers
|   └── snippets.ts
├── middleware
│   ├── index.ts
|   └── asyncWrapper.ts
├── routes
|   └── snippets.ts
└── server.ts

controllers/snippets.ts

import { Request, Response, NextFunction } from 'express';
import { asyncWrapper } from '../middleware';

export const createSnippet = asyncWrapper(
  async (req: Request, res: Response, next: NextFunction): Promise<void> => {
    res.status(201).json({
      data: "test msg"
    });
  }
);

middleware/asyncWrapper.ts

import { Request, Response, NextFunction } from 'express';

type Foo = (req: Request, res: Response, next: NextFunction) => Promise<void>;

export const asyncWrapper =
  (foo: Foo) => (req: Request, res: Response, next: NextFunction) => {
    return Promise.resolve(foo(req, res, next)).catch(next);
  };

routes/snippets.ts

import { Router } from 'express';
import { createSnippet } from '../controllers/snippets';

export const snippetRouter = Router();

snippetRouter.route('/').post(createSnippet);

server.ts

import express from 'express';
import { snippetRouter } from './routes/snippets';

const app = express();
app.use('/api/snippets', snippetRouter);

app.listen(5000, () => {
  console.log('Server is working');
});

package.json

{
  "name": "snippet-hub",
  "version": "1.0.0",
  "description": "",
  "main": "src/server.ts",
  "scripts": {
    "init:client": "npm install --prefix=client",
    "init:server": "npm install",
    "init": "npm-run-all -n init:**",
    "dev:client": "npm start --prefix=client",
    "dev:server": "nodemon src/server.ts",
    "dev": "npm-run-all -n --parallel dev:**",
    "build:clear": "rm -rf build",
    "build:tsc": "tsc",
    "build": "npm-run-all -n build:**"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^16.9.2",
    "@types/validator": "^13.6.3",
    "nodemon": "^2.0.12",
    "npm-run-all": "^4.1.5",
    "ts-node": "^10.2.1",
    "typescript": "^4.4.3"
  },
  "dependencies": {
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "sequelize": "^6.6.5",
    "sqlite3": "^5.0.2",
    "umzug": "^3.0.0-beta.16"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}
1 Answers

I had same error, how I did to fix it was to import express and not destructure it then call the router from express. Adjusting file routes/snippets.ts to below fixed the issue

import express from 'express';
export const snippetRouter = express.Router();

snippetRouter.route('/').post(createSnippet);

Above solved the issue

Related