I'm trying to follow Tic-Tac-Toe tutorial on React in my local environment. However, when I run npm start, I get a syntax error around <>.
How to reproduce
In the middle of the tutorial, under "At this point your code should look something like this:", click Fork in the upper right corner of the example code with the numbers from 1 to 9 written in a table.
Click the button in the upper left corner of the Code Sandbox, navigate to File, then Export to Zip, and download the code example as a Zip file.
Unzip the downloaded Zip file, and execute npm install and npm start in that order in the project root directory.
The following error message is displayed.
./src/App.js
Syntax error: Unexpected token (3:5)
1 | export default function Board() {
2 | return (
> 3 | <>
| ^
4 | <div className="board-row">
5 | <button className="square">1</button>
6 | <button className="square">2</button>
Question
How can I resolve this error? Although I can continue the tutorial online, I would prefer to continue it in a local environment where I can get assistance from lsp, formatters, etc.
Version Information
Node.js: v18.12.1
npm: 8.19.2
npm view react version on the project root: 18.2.0
If you can't use Fragment Short syntax "<></>" use the longhand version OR make sure you have the extensions required for react in your Editor/IDE. There are more here that help with other items like formatting.
import React from "react";
export default function Square() {
return (
<React.Fragment>
<button className="square">X</button>
</React.Fragment>
);
}
The LSP for JavaScript should be setup by default. For Typescript it doesn't setup one, rather consuming the tsserver directly.
Related
I am unable to use the BokehJS library in my Angular app (https://docs.bokeh.org/en/latest/docs/dev_guide/bokehjs.html).
I get the following error as soon as I try to call the library from my app :
ERROR in ./node_modules/#bokeh/bokehjs/build/js/lib/index.js 3:9
Module parse failed: Unexpected token (3:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { version } from "./version";
| export { index } from "./embed";
> export * as embed from "./embed";
| export * as protocol from "./protocol";
| export * as _testing from "./testing";
Here is a detailed step-by-step method to reproduce the issue on a "fresh" computer (I tried it on two different machines, they both get the exact same error at the end):
install nodejs : https://nodejs.org/en/
install angular-cli : npm install -g #angular/cli
initialize a new angular project in the current directory : ng new angular10BokehJSexample
enter the new project directory : cd angular10BokehJSexample
(optional) check that the example angular app works : npm start and open your browser on URL http://localhost:4200
install BokehJS : npm install #bokeh/bokehjs
open your favorite text editor and change the file src/app/app.module.ts. Add the following line with the other imports at the top : import * as Bokeh from '#bokeh/bokehjs'
(optional) if you start the server at this stage, it should still work fine, meaning that BokehJS can be imported successfully (that was not the case with an old version of Angular)
still in the file src/app/app.module.ts, change the class decalaration at the end of the file to make it look like this :
export class AppModule {
private testBokeh(){
var item = JSON.parse("just a test");
Bokeh.embed.embed_item(item);
}
}
(note: this is just a stub, the code does not work. I’ve put together a more complex code that is supposed to work, but this is sufficient to reproduce my issue)
run npm start again, it cannot compile due to the error mentionned at the beginning of this question.
Any idea regarding what I am doing wrong ? I am not a frontend developer, so I am definitely out of my comfort zone here. Any help would be greatly appreciated.
I am fairly new to React and have no experience with webpack and am struggling with the following issue:
I created a new React application with npx create-react-app (which to my understanding uses webpack under the hood) and installed a third-party library with with npm install. So far so good, I am able to use the library and everything runs as expected.
Unfortunately, the library has some limitations and I would like to tweak one of its functions to suit my needs. The original function looks something like this:
project_root/node_modules/third-party-library/modules/export/tweakableFunction.js:
import {someFunction} from "../utils/configUtils";
export const tweakableFunction = (a, b) => {
return someFunction(a, b);
}
project_root/node_modules/third-party-library/modules/export/index.js:
"use strict";
export {tweakableFunction } from "./tweakableFunction";
In my project, I would like to replicate tweakableFunction and add some functionality to it:
project_root/src/tweakedFunction/tweakedFunction.js:
import {someFunction} from "third-party-library/modules/utils/configUtils";
export const tweakedFunction = (a, b) => {
//... do some stuff the original library can't do ...
return someFunction(a, b);
}
project_root/src/tweakedFunction/index.js:
"use strict";
export {tweakedFunction } from "./tweakedFunction";
Unfortunately, when I run my project I get the following error in project_root/node_modules/third-party-library/modules/some_dir/somefile.js:
SyntaxError: [...] Unexpected token
...
> 21 | someFunction: (props) => <SomeComponent {...props} />,
| ^
...
Do I have to create a webpack / Babel config in my root project for this to work? Is what I am trying to achieve even feasible?
First of all, modifying anything inside node_modules folder is not a good idea, since npm update will overwrite anything you change in there. Also, those changes will be available only in your local instance of a project, you wouldn't be able to use them anywhere else. Consider making a public commit if other people may benefit from your tweak or fork this library into your personal repo and add your changes to said repo.
And the error you are seeing happened because you should wrap return statement with React component in parenthesis.
someFunction: (props) => return (<SomeComponent {...props} />);
If after that error is still popping up, you are trying to use JSX syntax inside common JS file
Because node_modules files won't be handled with babel
Files get compiled with babel while you are importing javascript files, but in create-react-app default WebPack config the node_modules has been excluded, so while you are importing the exact file, an error has been thrown, as the <div> JSX syntax is not native js syntax.
the turn => <Som to => return (<Som is an absolute wrong, while using the former format the component will be returned directly, the return keyword is not required.
but sure one thing, do not edit code in node_modules.
I made first-app with create-react-app where a component makes use of some material-ui components, and it is working fine when started with npm start.
From this application I extracted that nice-component component in a new nice-component folder, with its package.json, the component is in a .js file that export default the component class - in Visual Studio Code I can succesfully navigate to its sources, so I would guess the setup / folder configuration is correct.
In final-app application, a new application still made with create-react-app I added nice-component as a local dependency (file:../nice-component), but when I run npm start I get:
SyntaxError: C:\...\other-package.js: Unexpected token (83:8)
81 | const { classes } = this.props;
82 | return (
> 83 | <Grid container className={classes.root} style={{margin:30}}>
| ^
I can't figure out why that happens, it seems that local dependencies do not bring in their own (transitive) dependencies, but I successfully used a similar approach months ago in another project - where though I didnt use react-scripts, but set up babel, webpack, etc by myself.
I even tried adding all of material-ui dependencies in final-app (although I don't think I shouldn't), but yet it doesn't work.
The issue Unexpected token '<' is because of missing the babel preset.
you can simply install the babel dependency using node as follows
npm install babel-preset-react
Thank you
I have a website hosted on Firebase hosting. I would like to add material theming to it(Buttons, Textfields, etc...). So, I ran the command npm install --save #material/textfield. I then extracted the folder called #material to my styles directory so that the structure looked like this:
Root
|
+---index.html
+---scripts/
+---app.js
+---styles/
+---main.css
+---#material/
+---……
I can reference css files from my main.css by adding #import "#material/textfield/dist/mdc.textfield.css"; to the start of my stylesheet. This correctly changes the styling of the button. However, when I go to do the same thing for js, it doesn't work.
According to Material Design's Github Repo, I should just be able to add
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
to the top of my script. However, when I deploy the code, and look at the console, the following error is returned: Uncaught SyntaxError: Unexpected token {. I have tried to require() the files, and change the path to import {MDCRipple} from '../styles/#material/ripple/dist/mdc.ripple.js';. This throws the same error. If I do: import * as MDCRipple from '../styles/#material/ripple/dist/mdc.ripple.js';, the same error is also thrown(except instead of the "{" character, it does not expect the "*" character).
This was supposed to be an easy conversion for my site, but it has given my tons of headaches. What am I doing wrong?
BTW: I know that the files the import statement is using exist. Also, isn't Node.js server-side?
Download latest version of node: https://nodejs.org/en/
Version 8.11.2 LTS will work.
The --experimental-modules flag can be used to enable features for ES2015 import. More information:
https://github.com/nodejs/node/blob/master/doc/api/esm.md
I'm new to WebStorm, and fairly new to Node development. I am working on an existing project, and want to have code completion for my node_modules. More specifically, I'm using Chai and WebStorm doesn't seem to find the .have member of my expect.to statement.
This is my code, simplified:
var expect = require('chai').expect;
import {Customer} from '../../app/model/Customer.js';
describe('...', function() {
it('...', function() {
var customer = new Customer();
expect(customer).to.have.property('name');
});
});
I get squiggly lines under the have call, and WebStorm tells me Unresolved variable have.
If I F12 on the to, WebStorm takes me to another node module, shelljs, but I haven't imported that one.
Is this because WebStorm can't resolve everything in javascript?
I've enabled Coding Assistance for NodeJS as per the docs, but that made no difference.
Problem is caused by weird dynamic way these chai methods are defined. As a workaround I can suggest using chai.d.ts:
Open "Settings | Languages & Frameworks | JavaScript | Libraries"
Click "Download..." button and select "TypeScript community stubs"
Find "chai" and click "Download and Install".
See http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/, 'Using TypeScript community stubs (TypeScript definition files)' for more information
WebStorm 2020.1
TypeScript definitions can also be added directly via package.json:
Open the project's package.json
Position the cursor on the package (within the dependencies section)
Press alt+enter (or click the light bulb)
Choose Install '#types/name' (where name is the dependency)
For example:
In WebStorm 2019.3, here are the steps I follow to force Code Completion (including auto-import) to work for a custom, self-published NPM package that contains pure ES6 modules only:
Ensure that the project, itself, has a package.json file at the root of the project, and that package.json includes the desire package in the "dependency" object. For example:
{
"name": "testproject",
"version": "1.0.0",
"dependencies": {
"#yourname/yourpackage": "latest"
}
}
In WebStorm, select File > Invalidate Caches / Restart...
To enable auto-import for package contents, ensure that the JavaScript file in which the package is being used has AT LEAST ONE export statement. For example, in the following code, an export is present, so Code Completion auto-imports the package function isNil():
export function init () {
isNil
}
By comparison, the following code does not contain an export statement, so isNil() is not automatically imported:
function init () {
isNil
}
For me, all three of the preceding steps are necessary for Code Completion to work for my own NPM packages (with pure ES6 modules) in WebStorm.