Develop Reference

Unexpected token at `>` of a `<>`

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.

How to use make use of BokehJS in an Angular app?

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.

"ERROR in xx.js from UglifyJs Invalid assignment" when importing a module into another module

I cannot post exact code due to NDAs, so I will do my best.
Javascript is not my string suit, but I took it up for my team.
Background:
I built a module which basically will perform a very simple task and can be imported as a dependency in other projects and then added into the project by adding the tag.
I wanted to keep this as lightweight as possible and let the app which was adding it in do the heavy lifting and have the imports to run and compile Angular code.
Code for SimpleApp:
Everything seems to work fine except for places marked with /* Potential Issue */
Within the simple module, I have a few file:
simpleApp.js -- the main js file which does the work necessary
simpleApp.html -- the html of simpleApp.js
innerProvider.js -- a module.service which does some work when called from the simpleApp.js -- this import seems to be the issue causer.
All within the companySimpleApp package:
simpleApp.js:
import angular from "angular"
/* I believe this to be the issue */
import innerProviderModule from "./pathToFile/innerProvider /* Potential Issue */
/* Potential Issue */
angular.module('simpleApp', [innerProviderModule]).component('simpleComponent, {
controller: ['$scope, 'innerProvider', ..., function($scope, innerProvider, ...) {
/* does work */
}],
template: require("./simpleApp.html"),
bindings: {
bind1: '#',
bind2: '#'
}
simpleApp.html:
<div>
do stuff
call stuff
</div>
innerProvider.js:
import angular from "angular"
const innerProviderModule = angular.module('innerProvider', [])
.service('innerProvider', function (%http, ...) {
this.doWork = function (param1) {
retStmt = doSomething(param1)
return retStmt
}
});
export default innerProviderModule.name;
Everything here builds correctly and will do as is told. I am able to build this package as well as the one which uses it and have a working webpage with the simpleApp's services. However, this is when I host everything myself.
Code for Larger Service using SimpleApp:
In another project I have this listed as a dependency "simpleApp = 1.0" this may be different than expected due to my company's internal workings, but this works.
It appears in the node_module directory
I then have a module for the webpage which loads in simpleApp and has all of the other packages like angular, babel, uglify, webpack, etc:
/* Potential Issue */
import "companySimpleApp/simpleApp.js"
export default angular
.module("app", [otherDependencies, simpleApp])
.config(function ($stateProvider, $stuff){
someMappingsForUrls
});
...
<script src="../node_modules/companySimpleApp/simpleApp.js"></script>
...
and another html and js file which use the simpleApp
<div>
<simpleApp bind1='{{value}}'></simpleApp>
</div>
Error:
Now, everything will run fine on my localhost and I can fully use the larger service using SimpleApp site with the simpleApp. However, when I build this (npm run webpack) on the service using simpleApp, I get the following error even though everything seems to run fine on my localhost:
ERROR in bundle.js from UglifyJs
Invalid assignment [bundle.js:146461,67]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # webpack: `webpack -p`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
........
The code seems to build when I remove the import innerProviderModule from "./pathToFile/innerProvider from simpleApp.js but I then get an error saying that innerProvider is an unresolved reference or something along the line.
What I am asking is for some help on why I may be seeing this error when I import the innerProviderModule I built. Do I need to add webpack and all that to my simpleApp project even though it all seems to run fine physically on my localhost?
Any help or ideas is very much so appreciated. Thanks!
Bumping this as I posted it late at night.
Edit: It seems to not like "=>" in the innerProvider which I have

I built the package which uses the simpleApp with 'webpack -p' which was not done on simpleApp. So, what it looked like that happened was that the simpleApp was not minified or something and didnt like a few lines in the provider code (ie: "=>", "let", etc...)
So instead of having the simpleApp have more dependencies, I simply wrote code which would pass webpack -p.
You should also be able to just remove the "-p" flag
Hope this helps someone.

Why doesn't the Pod dependency manager detect the necessary modules for installation?

So this question is a follow up to my previous question:
How can different apps import from a shared components folder? react / react-native
So I've created my own npm module which I store all my components in. These components can be used by as many apps as I like. Because I will be making those components highly reusable.
But I still have stumbled upon a problem.
I have created a loading component which uses this library: #react-native-community/masked-view. This library needs to install a dependency inside /ios/Podfile. First I created this component inside one of the react-native projects.
yarn add #react-native-community/masked-view
..
success Saved 1 new dependency.
cd ios/
pod install
..
Installing RNCMaskedView (0.1.6)
Pod installation complete! There are 33 dependencies from the Podfile and 31 total pods installed.
'
So then I ran my code, and the Loading component works. Now I want to add this to the NPM module (that, again, I created myself) which will contain all my components.
So I go into /my-awesome-99-components/ which has its own package.json since it is a module which I will import in each project I'm working on.
In /my-awesome-99-components/
yarn add react react-native #react-native-community/masked-view
..
success Saved 1 new dependency.
// Created Loading.js - this is the loading component
yarn publish
..
In /react-native-project-1/
yarn add my-awesome-99-components
..
Done in 3.17s.
cd ios/
Pod install
..
This is where the problem comes up. Now the Podfile won't install the RNCMaskedView because apparently my module doesn't let the project know that it should install some packages inside the ios/Podfile.
Does anyone know why this happens, and what would be the best solution for this?
I appreciate all the help!

Have you tried adding a podspec file to your repo?
You can modify the podspec file from the masked-view package like
require 'json'
package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
Pod::Spec.new do |s|
s.name = "RNCMaskedView"
s.version = package['version']
s.summary = package['description']
s.authors = package['author']
s.platforms = { :ios => "9.0", :tvos => "9.0" }
s.source = { :git => "https://github.com/react-native-community/react-native-masked-view.git", :tag => "v#{s.version}" }
s.source_files = "node_modules/#react-native-community/masked-view/ios/**/*.{h,m}"
s.dependency 'React'
end
only change here would be the path of the source files

This is a typical issue with Podfile and overall React Native linking from dependencies with dependencies. react-navigation-stack had the same issue with #react-native-community/masked-view.
The only solution is to mark as #react-native-community/masked-view a peerDependency, so the user using your library knows that there might be another dependency needed, and install it separately. Your problem might be better answered by this answer.

Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

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