CODEWITHSUNDEEP
reactjstypescriptviteinversifyjsswc-compiler
Mehdi Charife
Mehdi Charife

Reputation: 1024

vite: pre-transform error: Expression expected after inversify's @injectable

I'm trying to integrate inversify.js 6.0.2 with a Vite 5.2.0, React 18.2.0, Typescript 5.2.2 project. I followed the steps outlined in the readme file of the project github repository, but ended up having an obscure error message to which I failed to find any corresponding solution on the internet.

According to the error message:

4:01:38 PM [vite] Pre-transform error: 
  × Expression expected
   ╭─[/home/mehdi/generic-project-ui/src/service/AttributeServiceImpl.ts:1:1]
 1 │ import { injectable } from "inversify";
 2 │ 
 3 │ @injectable()
   · ─
 4 │ export class AttributeServiceImpl implements AttributeService {
 5 │ 
 6 │     public async createAttribute(attribute: Attribute) {
   ╰────

The error seems to originate from the following file AttributeServiceImpl.ts:

import { injectable} from "inversify";

@injectable()
export class AttributeServiceImpl implements AttributeService {

   public async createAttribute(attribute: Attribute) {
       return attribute;
   }
}

This is my tsconfig.json, which already contains the compiler options required by inversify:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"],
    "target": "es5",
    "lib": ["es6"],
    "module": "commonjs",

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

My vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

The tsconfig.node.json, which also seems to contain an entry for compiler options. Unfortunately, I have already tried putting the same options required by inversify in this file, but the same error messsage persisted:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": ["vite.config.ts"]
}

Upvotes: 3

Views: 2050

Answers (1)

FluffyBike
FluffyBike

Reputation: 2352

I just had this issue, I'm using inversify.js 6.0.2 with a Vite 5.2.11, React 18.3.1, Typescript 5.4.5. I had forgotten to add tsDecorators: true for the react plugin in the vite.config.ts file like so:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react({ tsDecorators: true })], // <-- add `tsDecorators: true` here
});

After setting tsDecorators: true the issue disappeared.

Upvotes: 1

Related Questions