I'm totally new to React...how do I convert a .jsx file to .js?
I tried to use Babel via CLI but the command doesn't even work:
babel --plugins transform-react-jsx board.jsx
I also tried replacing "babel" for "npx" in the above command, but it always retuns "Path must be a string. Received undefined".
I ran the code in the folder and also trying to pass the path, but none worked.
Does anyone have a tutorial, working example or can help me to make this work?
Link with .jsx file I want to compile:
https://github.com/atlassian/react-beautiful-dnd/tree/master/stories/src/board
I don’t think that main point of stackoverflow is to provide how to guides which could be googled in 5 seconds on google. But here you have a link https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75
Related
I'm using react with ViteJS and Vitest for testing. I have set up the config for vitest and the test setup file too as you can see in the screenshots below.
vite.config.js
src/test/setup.ts
src/app/App.tsx
src/app/App.spec.js
here's the error I'm getting:
I found a lot of sources on similar issues about the topic but nothing I tried worked. I also followed the documentation for the vite config and a lot of articles too. Everyone is saying the same thing but I'm still getting this error for some reason.
I used the same config with jest and it worked fine. But in this situation, I got stuck and then tried to rename the filename to .tsx or .jsx instead of .ts or .js. After that, I re-ran the test file and everything started working.
I think you forgot to add #testing-library to vite.config.js alias object.
This might be obvious to most people but in my case the issue was that the test file also has to end in ".jsx" when trying to test a ".jsx" file.
App.test.jsx worked for App.jsx
I have inherited a bit of a legacy project with JSX. I am in the process of converting the JSX into TSX.
Currently while importing JSX and JS files in TSX. I get an error Cannot find module 'config/abc_module' or its corresponding type declarations..
I understand the types are missing as it is a JS file. I have added JSDoc types, but nothing seems to help. What would be the best way to add types in JSX files to use them in TSX.
I have quite a few files in JS, and some I cannot even convert due to specific reasons. I have searched a lot and read quite a few articles, but can't seem to find any specific way forward. Any help would be appreciated. Thanks in advance.
make a global.d.ts file in your root directory where all your code files are
in file write lines:
declare module 'path/to/your/js/or/jsx'
now these js/jsx files will resolve as modules to import in your typescript code! enjoy!
Edit: also make sure your tsconfig.json is configured to let you mix ts/js
You can probably just change the extensions from .js or .jsx -> .tsx. TypeScript is supposed to be a superset of JavaScript.
Also see this previous question
I am currently looking into React, React-habitat, and Webpack.
My question is does Webpack also bundle the index.html file where I reference the bundle or is this kept separate? Is it possible to exclude this without specifically stating this in the Webpack config file?
this is the current structure am envisioning.
https://imgur.com/a/98or9
I know that all the dependencies found in my entry file for Webpack are bundled. The reason I would like to know this is because I am doing some research on how a CMS can be built around the three topics I mentioned above. I need to know if the index.html file is also bundled or not because I would like to edit the original index file(if it is not bundled) instead of repackaging everything for every change.
Hope someone understands what am looking for.
I'm using Angular, and as you know, there is Angular "1" (the old version) and Angular 2 (the newest) which include typescript.
This is my problem I've encountered today:
I'm doing an application using angular, so I've created the project folder (project-frontend) and installed locally grunt, with bower I've downloaded the packages for angular.
I've created the gruntfile.js and configured it with these tasks:
"grunt-contrib-concat": "^1.0.1"
"grunt-ng-annotate": "^2.0.2"
"grunt-contrib-uglify": "^2.0.2"
And with many others, like cssmin, htmlmin etc etc, but the problems occours with these tasks, or, precisely with uglify.
The problem is that if I concat all angular js files (angular.js, angular-rout.js, angular-resource.js ...) and I uglify everything, then, when i deploy my war in a Tomcat, i get this error:
TypeError: b is undefined
So, what i think that cause the problem is uglify, because I've tried to run the same tasks for another old project, which was having uglify 1.0.1 and everything works, I've also controlled that if I just run concat and ngAnnotate, the final angular files (the one from this project, and the one from the last) are pratically identical.
I don't know if this has to do something with typescript (seeing the error I thinked about that) because I assumed that typescript have been inserted into angular since 2.0.0 versions, and I'm currently working with a 1.5.8 version (I also tried 1.2.9).
I controlled my application code with jshint (it's the first task that i run) and there are no errors prompted in the terminal.
I've also tried to re-configure the tasks taking as example the old project Gruntfile.js file.
I don't know what to do anymore, I'm blocked with this problem and I don't know how to move further, some advices?
Ok, now that i've found the error, as i writed in the comments under my question, i figured out that concatenating js files like this:
src: 'bower_components/**/*.js'
Which should concatenate all js files inside folders and subfolders in my bower_components directory, simply don't know why but breaks angular final files, if i write
src: ['bower_components/angular/*.js',
'bower_components/angular-route/*.js',
'bower_components/angular-resource/*.js']
Which points directly to all files that need to be concatenated, everything works in my application with angular concatenated and uglified file
I don't know why there's this issue, beacuse if i print in terminal under my project-frontend folder this command:
echo bower_components/**/*.js
I can see this output:
bower_components/angular/angular.js bower_components/angular-resource/angular-resource.js bower_components/angular-route/angular-route.js
By the way this seems to be a solution to this type of problem, I hope this helps somebody in the future
I am new to meteor + angular and i am learning this from http://www.angular-meteor.com/
When i reach 3-way data binding section and create folder called collections in socially folder and create file called parties.ts it is giving me error i write following two lines in that file.
import {Mongo} from 'meteor/mongo';
export let Parties = new Mongo.Collection('parties');
here is the error log.
C:\<user>\AppData\Local\.meteor\packages\meteor-tool\1.3.2_4\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\fibers\future.js:245
throw(ex);
^
Error: A method named '/parties/insert' is already defined
at packages/ddp-server/livedata_server.js:1548:15
at Function._.each._.forEach (packages/underscore/underscore.js:113:1)
at Server.methods (packages/ddp-server/livedata_server.js:1544:7)
at packages/allow-deny/allow-deny.js:191:24
at [object Object].CollectionPrototype._defineMutationMethods (packages/allow-deny/allow-deny.js:190:5)
at new Mongo.Collection (packages/mongo/collection.js:226:8)
at meteorInstall.collections.parties.js (collections/parties.ts:2:22)
at fileEvaluate (packages/modules-runtime/.npm/package/node_modules/install/install.js:141:1)
at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:75:1)
at collections/parties.ts:2:54
Exited with code: 8
Your application is crashing. Waiting for file change.
I hope i will get help from this community. Thanks.
I had the same problem and successfully fixed it. I was also using Atom with the Atom TypeScript plugin, which was automatically compiling the TypeScript files to JavaScript separate from Meteor and creating unnecessary files.
Here are the steps that I took to fix the problem:
Check your tsconfig.json file and make sure it has these lines (add or change them if necessary):
"buildOnSave": false,
"compileOnSave": false,
Close and restart Atom to make sure the Atom TypeScript plugin uses the new settings and stops automatically compiling TypeScript to JavaScript on save.
Delete all *.js and *.map files in your "client", "server", and "both" directories.
Stop your Meteor instance if it is currently running (probably "ctrl-c" or "command-c", depending on your OS).
Run "meteor reset" on the command line.
Run "meteor" on the command line to recompile your TypeScript files and restart Meteor.
After that, everything worked fine for me.
Problem could be sometime type script might not be compiled properly into js. Try deleting js file in that folder , edit your typescript file and save. Next recompilation should remove this error.
I have the same error. Did you ever figure it out?
I ended up solving my issue and I had to add "compileOnSave": false" to my tsconfig file. I'm using Atom and it was automatically compiling.