How to properly use ES6 Modules syntax in Typescript files (NextJS)?

Question

The problem seems circular:

package.json does NOT have type: "module". In this case I get this error when using modules in my typescript files:

An error occured while running the seed command:
/Users/me/code/me/prisma-learning/graphql-nextjs/prisma/seed.ts:1
import { PrismaClient } from '@prisma/client';
^^^^^^

So I add type: "module" in package.json and this is now the error:

An error occured while running the seed command:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for 
/Users/me/code/me/prisma-learning/graphql-nextjs/prisma/seed.ts

I just want to use ES6 modules in my TS files. The code is from an official Prisma boilerplate project: https://github.com/prisma/prisma-examples/tree/latest/typescript/graphql-nextjs

tromgy · Accepted Answer · 2021-09-26 12:18:05Z

3

If you look in the package.json for this particual example, you'll see that they have a compiler option specified for ts-node:

    "ts-node": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\"",

But for the "seed" command doesn't run it with this option.

So you can just replace:

"prisma": {
    "seed": "ts-node prisma/seed.ts"
  }

with

"prisma": {
    "seed": "npm run ts-node prisma/seed.ts"
  }

and then run npx prisma db seed as documented.

answered Sep 26, 2021 at 12:18

tromgy

5,9134 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FaSh · Accepted Answer · 2021-09-26 12:03:47Z

0

It seems that you haven't configured your NextJs project to support typescript:

If you use node seed.ts to run seeder, You need to have ts-node package or compile this file to a regular JS file (using tsc or webpack)
If you use seed.ts file in a page or api of your project, check if you have a tsconfig.json file and typescript is installed as a dev dependency.

If none of them helps, please give more information about your project environments and configurations.

answered Sep 26, 2021 at 12:03

FaSh

1199 bronze badges

Collectives™ on Stack Overflow

How to properly use ES6 Modules syntax in Typescript files (NextJS)?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related