I am trying to learn Node and React and I ran into an interesting problem where - in the import statement like below, I need to explicitly type the file format (.jsx) otherwise, the compiler borks up and complains that it cannot find App.js file.
import App from './App.jsx';
Note - App is a jsx file and saved as App.jsx. I used create-react-app for boilerplate code.
Also, I found some more information on GitHub on the lines of "The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore."
https://github.com/facebook/create-react-app/issues/87
So, it looks like a non-issue as long as save it as .js and I have babel to compile ES6.. Thanks everyone!
Here your assumption is incorrect.
If I am right then you are assuming that if your file is .jsx, then you don't need to specify the file extension in the import statement to import .jsx file.
But its the other way round.
If you don't specify the extension of the file then compiler assumes that it is a .js file. So, there is nothing wrong with the behavior that you are seeing.
OR
If you don't want to include extensions in the import statement then just create .js files. Compiler will automatically detect the jsx written inside it. This is the easiest way to fool import statement.
Any javascript react snippets will not show up in a plain .js file only a .jsx file
I suggest that closing the running project on Browser
(ctrl + c / command + c on terminal to finish running project) and do
'yarn start' or 'npm start' again. then it would work!
React sometimes shows errors when you add new files like jsx, js, etc..
and I also had the same problem with you.
(I changed App.js to App.jsx and webppack error was occured).
In these case re-starting project would be the solution!
finally you don't need to specify file extension (like the other answers suggestion).
Related
I'm doing a startup server. Basically It has initial setup with express and nodemon dependencies. Unfortunately, I'm getting ERR_MODULE_NOT_FOUND when running yarn dev or npm run dev
Here is the code and file structure I have.
The issue is a missing file extension. The import needs to look like this:
import { sampleExport } from "../config/env.js";
// ^^^
import doesn't use the same algorithm that require used. Instead, it works according to the ECMAScript Modules specification, which requires a definite extension.
This is also explained in the node.js docs for ECMAScript modules:
A file extension must be provided when using the import keyword to resolve relative or absolute specifiers. Directory indexes (e.g. './startup/index.js') must also be fully specified.
This behavior matches how import behaves in browser environments, assuming a typically configured server.
You need to add .js extension
index.js:
import { SampleExport } from "../path/file.js"
In my opinion, it is better to use .env files together with some npm package or even a json file.
I have a project written in Typescript, and I'm using node-dev alongside ts-node in my local enviroment for development. I'm using child_process's fork method to instantiate a subprocess, like so:
fork(path.join(__dirname, './worker.ts'));
This works fine, and I can even set breakpoints in VS Code for the worker.
The problem is that when building (transpiling) my project, a MODULE_NOT_FOUND exception is thrown because worker.ts turned into worker.js. Initially, mi idea was to omit the file extension when forking (fork(path.join(__dirname, './worker'));), but if I do so, when running the project with node-dev, it throws a MODULE_NOT_FOUND because it can't resolve the file if the extension is not present.
Is there any workaround for this? Maybe an extra configuration option for node-dev?
I'm on Windows 10 using node v12.22.1
A simple solution I suggest would be to read in the current file type. The compiled files should end with ".js" while the source files end with ".ts". Using the path.extname methode in combination with __filename you can easily extract that file extension and simply concat it to your file name.
fork(path.join(__dirname, './worker' + path.extname(__filename)));
Im new to typescript. Im using a serverless solution from google (google cloud functions) that in the background is running Node.js with typescript. When I get an "runtime error" in the logs I see an error in a .js file, this makes sense since .ts code is compiled to .js but it makes debugging a lot harder as I write typescript code and not javascript code. In general I would like to see the line that produced the error in .ts and not in .js. Is this possible?
You will need a "source map" to map the JavaScript line numbers to TypeScript line numbers.
You can do this with the source-map-support node module. First install it in your project:
npm install source-map-support
Then add this to your TypeScript file (index.ts):
require('source-map-support').install()
Then, if you function crashes, the line numbers should show TypeScript source lines.
i try to learn TypeScript on Visual Studio Code. But i get an sim error that i don't understand beacuse of defining variable. I'm define as that:
let year:number = 2015
I get a syntax error on terminal beacuse i'm put a colon and write the variable type after the variable name.
How can i correct this error?
As the question is quite old,, but I am answering for other developers like me who stuck with same issue. Enhancement in #basarat's answer:
You need to
Compile .ts file
&
Run .js file
Example: You have created a typescript file HelloWorld.ts
When you want to compile do
tsc HelloWorld.ts
.js file will be generate. Then to run your code do the following
node HelloWorld.js
Voila!!
How can i correct this error?
Don't run .ts files directly.
Solution
Compile to js before running. e.g.
tsc srcfiles
More
Quickstart : https://basarat.gitbook.io/typescript/content/docs/quick/nodejs.html
I have jade watching my directory to auto compile the templates to html files.
I've entered the following into the command line: jade --watch templates.
This returns rendered templates/index.html and compiles the .jade file just fine at first.
But when I attempt to save the .jade file again, it does not compile, and returns this error in the command line:
TypeError: path must be a string
at Object.fs.lstat (fs.js:675:11)
at renderFile (/usr/local/lib/node_modules/jade/bin/jade.js:172:6)
at StatWatcher.<anonymous> (/usr/local/lib/node_modules/jade/bin/jade.js:119:11)
Not sure what "path" it's referring to. But in case it's the directory "templates", I've tried the same command with the directory in quotes.
This is apparently only an issue with the current jade version, 1.8.2. If you lock your dependency in your package.json to the previous version (like below), this issue goes away.
{
"name": "my-app",
"dependencies": {
"jade": "1.8.1"
}
}
I've gone ahead and submitted a new github issue, so hopefully this will get resolved.
Ive run into the same problem and unfortunately ive run into a real wall on finding any documentation on this
If you want to, i found an alternative which i find adequate:
Download the code from here: http://swarminglogic.com/jotting/2014_02_watchfile
Its a simple file watcher
Alias the code or whatever your preference is.
Run watchfile test.jade jade ./ --out /tmp in the right directory. This will run a jade compilation through watchfile every time your file changes.
Workaround i know but it works... Why does people always take for granted that you bundle everything when running node services? On searches for jade html TypeError: path must be a string i only come upon Express.js threads