I have a Node JS web app that I've recently decided to add ReactJS to. I can use regular React, but using JSX throws an unexpected token < error as Babel doesn't seem to be transpiling it.
I have Babel 7 installed, and have been using it on this project for a while.
I added #babel/plugin-transform-react-jsx" and "#babel/plugin-syntax-jsx" to my package.json, and listed them in my .babelrc file.
I tried adding type='text/babel' to the script link but the file didn't even run then.
I know the React code is valid as it's just dummy-code I pulled directly off the React website to test that it's working.
I'm not sure what else I need to do to get Babel to transpile the JSX.
Related
In my express app I use Import and Export statements. I have the "type": "module" line in my package.json file. I can run the app using Node before bundling it with Webpack.
After I've bundled it into one JS file, Webpack converts the Imports to "require". Then I get the "ReferenceError: require is not defined" error when I try to run the bundled JS file using Node.I would like to use modules instead of converting my project to commonjs.
Webpack v.5
Node v.14
Express v.4
i have a fully working modularized apollo server on nextJS (based on this article https://www.apollographql.com/blog/modularizing-your-graphql-schema-code-d7f71d5ed5f2/ ) basically im doing an Array of my typedefs and merging the resolvers using the merge function from lodash... so far so good... this feed a function makeExecutableSchema and this schema is going to the server... and it works great...
the problem is im trying to move the server outside nextJS... and when i do try to create a new project and yarn init or npm init... install the dependencies, and try to copy paste all my schema files to the new npm init project ALL my imports are messed up, and i start getting all this errors like:
in nextJS i have (this one simply works in nextJS):
import { merge } from "lodash";
in the new node project it says merge couldnt be found in lodash...
or the module is commonJS and it cannot do named imports...
or if i do an import using require it says ReferenceError: require is not defined, i think this one should be due to node expecting to run this on a browser but i have no idea how to specify this wont run on a browser since it's simply a js file which intends to modularized the apollo schema...
i just dont understand why all the import sentences work just fine in Next but when im starting the apollo server in plain node every import is giving so many errors... i have fixed some by adding the extension at the end of the filename im importing (thing that was not necessary in nextJS) or by adding "/index" at the end of the package being imported...
Is there a way to make the imports behave like in Next??? but in a new nodeJS project?
Any help or orientation would be GREATLY appreciated
The answer was:
Use Babel, install with NPM or YARN
"#babel/core"
"#babel/node"
"#babel/preset-env"
add the .babelrc file to the root directory of the project:
{
"presets": ["#babel/preset-env"]
}
to run the main file use a script in package.json like:
"start": "nodemon --exec babel-node index.js"
and this will allow to execute modern JavaScript :D
I'm using WebStorm and a newbie to it. when I use import/export statements, it gives me an error of
Unexpected token import
but if I try with require/module.exports it works fine.
N.B- I've configured language version as ES6 from Languages and Frameworks.
This is not WebStorm but Node.js that fails. While import is a part of ES6, native support for ES6 modules in Node.js is very limited and requires special setup - see https://nodejs.org/api/esm.html#esm_enabling. So, you have to compile your code with Babel first. Usually transpiling is a part of build process (using Gulp, Grunt, WebPack, etc.). Or, you can transpile your code on-the-fly by passing -r babel-register to Node.js. Of course, you need creating appropriate .babelrc and install the required modules (npm install --save-dev babel-cli babel-preset-env)
This seems related to BABEL: Unknown option: base.Children, but the fixes provided there don't help my situation. Two days ago I had an Electron application that ran in development mode (via 'electron-forge start') and as a packaged application (starting the executable in the folder produced by 'electron-forge package'). The app continues to run in development, and it will execute in production, but Babel produces an error in the Web console:
Unknown option: base.Children. Check out http://...
This occurs on the first require statement calling for one of my JSX files (there's another thing: react-forge doesn't transpile the JSX, and I suspect I'm about to be told to RTFM over that matter). I can get the same error to pop up whenever I want; all I have to do is enter "require('somefile.jsx')" in the console, and it'll do the same thing. Investigation of the error reveals that the options manager's mergeOptions function is passed a copy of React at one point during the loop that's supposed to incorporate the presets and plugins. Again, this did not start happening after a change to the application code; I tried to update some packages in NPM, and the next build I did produced this error.
I've wiped the node_modules directory completely and run a fresh 'npm install' followed by 'electron-rebuild' and a repackaging of the app produces the same results. I've tried incorporating the .babelrc contents in package.json according to the docs at the Babel website. Again, dev works fine and production fails. Creating a compliant .compilerc produced similarly disparate results. How is my production app getting a React component where it should have the Babel options?
I just found the solution. It's a combination problem. React itself and the React preset for Babel both answer to 'react' as a preset name. If the plugin is missing but React is present, Babel will pull React and pass it to mergeOptions, producing the error described.
On the other side, if you've made the mistake of requiring a module (like the React preset) in your package.json under both dev dependencies and general dependencies, the packaging subprocess run by electron-forge will ignore the entry under general dependencies. Result: no preset, and instead of spitting out a "missing a preset" error, Babel just sucks up React itself and pretends it's found the preset it was told to look for.
I have installed version 15.2.1 of react, react-addons-shallow-compare, and react-dom. When I try to use react-virtualized, I get an error on the Chrome console saying
external "React.addons.shallowCompare":1Uncaught ReferenceError: React is not defined
Without using react-virtualized, React is working fine. Not sure why I am getting this error.
Never mind. Figured it out. I was using the UMD build of react-virtualized but with a non-UMD build of React and React.addons.shallowCompare. If you're using a bundler like Webpack, there likely isn't a global React variable.
In this case, you should use the CommonJS or ES6 builds of react-virtualized.