I've been trying to add tailwind to my full stack app where I am playing around with socket.io. However, in setting it up I get this error in tailwind.config.js and postcss.config.js which blocks tailwind from working.
When copying over my tsconfig.json into a repo which is just the client and not server folder this export is recognised, suggesting to me that this is an issue with an automatic import looking in the wrong path when there are multiple folders that contain tsconfig.json files?
client/tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": "client",
"paths": {
"#/components/*": ["client/components/*"],
"#/containers/*": ["client/containers/*"],
"#/pages/*": ["client/pages/*"],
"#/types": ["client/types"]
},
"typeRoots": ["client/node_modules/#types"],
"types": ["node"]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
The full repo - https://github.com/puyanwei/socketio-chat-app
Things I have done to try and resolve this issue;
Deleted node_modules and package.lock/yarn lock and reinstalled the packages with yarn and npm
Changed baseUrl to /client and .
Restarted VS Code
Uninstalled and reinstalled node
Added paths to typeRoots key/value pair in tsconfig.json
Added "types: ["node"] to tsconfig.json
Added #types/node to package.json but it doesn't seem to apply the types
Any help would be appreciated, thanks!
Related
I am trying to start a typescript node project and I've installed some dependencies (typescript, eslint, mongoose and graphql). However, when I run
ts-node-dev --respawn --transpile-only src/index.ts
I get the error
Must use import to load ES Module: server/src/index.ts
My index.ts file is simply:
console.log('Hello world!');
and my tsconfig.json file is:
{
"compilerOptions": {
"outDir": "./build",
"lib": ["ES2021", "ESNext.AsyncIterable"],
"target": "ES2021",
"module": "ESNext",
"esModuleInterop": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": true,
"strictPropertyInitialization": false,
"strict": true
},
"include": ["./src/**/*"]
}
I have set type to module in package.json.
Try to put this config, may fix your problem:
"module": "commonjs"
But check the complete discuss about this problem in ts-node-dev github https://github.com/wclr/ts-node-dev/issues/265
There another options to try.
I have a project with the following ts config. However when I run the nodejs server and use zeromq, I get Typescript errors in node_modules\zeromq\lib\index.js where export.Context (line 755) doesn't exists and zmqVersion() (line 19) is not a function. I do have ts set to ignore nodejs modules.
When I look at the ts files npx tsc --listFiles zeromq and other node_mods are not listed. So I am not sure why I am getting ts errors in zeromq. It's the only module that I am having issues with.
I do have #types/zeromq installed, but I still see these errors in the js file.
Reproducing:
tsconfig file:
{
"compilerOptions": {
"outDir": "./distTemp/",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"suppressImplicitAnyIndexErrors": true,
"checkJs": false, // <-I added this to try
"allowJs": true, // <-I added this to try
"skipLibCheck": true, // <-I added this to try
"skipDefaultLibCheck": true, // <-I added this to try
"types": ["zeromq"] // <-I added this to try
},
"ts-node": {
"esm": true
},
"lib": ["esnext"],
"paths": [
"global.d.ts"
],
"include": ["./src", "./server.ts"],
"exclude": ["./node_modules", "./build", "./dist", "./src/**/*.js", "./src/**/*.jsx"]
}
"I added this to try" are the lines I added to try and fix this issue. I run the code with
node -r ts-node/register server.ts --development
This has been really frustrating. I like zeromq and have used it before in different languages - I am really annoyed at the ts functionality here. After all this is a JS file.
Also this wasn't always popping up. I did have this running at one point. But to my knowledge no packages were updated, so I am not sure what change caused this.
When attempting to compile typescript code with NodeJS using the following command:
npx ts-node src/server.ts
I receive the following error:
SyntaxError: Cannot use import statement outside a module
I followed the instructions suggested by the error:
Warning: To load an ES module, set "type": "module" in the
package.json or use the .mjs extension.
But upon following these, I still had no luck and another error was thrown instead.
Here is the content of my server.ts file.
import App from './app';
const app = new App();
app.listen(3080);
tsconfig.json contents:
{
"compileOnSave": false,
"compilerOptions": {
"target": "ES2017",
"lib": ["es2017"],
"typeRoots": ["node_modules/#types"],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"pretty": true,
"sourceMap": true,
"declaration": true,
"outDir": "./dist",
"allowJs": true,
"noEmit": false,
"esModuleInterop": true,
"resolveJsonModule": true,
"importHelpers": true,
"baseUrl": "src",
"skipLibCheck": true,
"paths": {
"#/*": ["*"],
}
},
"include": ["src/**/*.ts", "src/**/*.json", ".env"],
"exclude": ["node_modules"]
}
I'm not really sure what is causing this but would greatly appreciate some wisdom on the issue.
Ideally i'd like to load the app via the server.ts file, while maintaining TypeScript contents.
You may need "moduleResolution": "node" in the compilerOptions for ts to recognize these types of imports.
I am trying to run apollo-server and the code I have written is in TypeScript.
My code folder contains a tsconfig.json which looks like this:
{
"compilerOptions": {
"target": "esnext",
"lib": [
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"server"
]
}
The command I am running is below:
$ npx ts-node ./server/index.ts
If I remove the tsconfig.json (which of course I can't do), the command above works fine. I am not sure which configuration is actually causing the problem.
the setting you are searching is "module": "commonjs". As ts-node is executing your code in the nodejs environment you have to use its module system. If you need your config as default for your project you can create a second tsconfig tsconfig.node.json and target it with ts-node --project <tsconfig.json>
tsconfig.node.json:
{
"extends": "./",
"compilerOptions": {
"module": "commonjs",
},
}
I have a route which creates a new folder inside public directory which is a static content served with app.useStaticAssets.
The problem is that even if I added the public directory inside exclude array of both tsconfig.build.json and tsconfig.json, my server still reloads in development when a new folder is deleted or created inside public directory.
I'm missing something ?
UPDATE:
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"noImplicitAny": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true
},
"exclude": ["node_modules", "dist", "public"]
}
I mention that public folder is outside of the src folder. They are on the same level.
I was able to reproduce this and found out that this seems to be a common issue -> https://github.com/nestjs/nest/issues/3510
As propsed in the github issue, adding include as a workaround seems to fix the problem:
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"noImplicitAny": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true
},
"include": ["src"],
"exclude": ["node_modules", "dist", "public"]
}
If you want to completely disable hot reload temporarily, remove the --watch flag from your start:dev script.
Go into package.json
Find your "start:dev" script under "scripts"
Duplicate your "start:dev" script and rename it - I named it start:dev-noreload
Your script should look something like this:
"start:dev-noreload": "npm run prebuild && npm run kill:dev-process && npm run build:docker-postgres && env ENV=DEV nest start"
Run your app using
npm run start:dev-noreload
In order to get hot reload back, just run the way you normally do.
Either using npm start, or npm run start:dev.