One of my go-to tools is ts-node for running individual files.
I'm currently attempting to execute files like ts-node ./page/home.tsx, but I'm encountering issues within my Next.js project.
export const WidgetList = createWidget<ButtonListProps>(WidgetListProps)
^
TypeError: (0 , Widget_1.createWidget) is not a function
When I look at my tsconfig.json file, I've had to make some modifications from the default settings for a Next.js project.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
// "module": "esnext",
"module": "CommonJS",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
// "jsx": "preserve",
"jsx": "react",
"incremental": true,
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Keeping module uncommented results in a "Cannot use import statement outside a module" error, while uncommenting jsx leads to a jsx error.
Update
The app works perfectly with all imports.
I'm puzzled as to why Node is struggling to track this import.
To address this, I created a new tsconfig.node.json:
{
"compilerOptions": {
"strictNullChecks": true,
"module": "NodeNext",
"jsx": "react",
"esModuleInterop": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
}
When trying to run any file in the project using:
ts-node --project ./tsconfig.node.json ./components/widget/Widget.tsx
I continue to encounter the same type of error.