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.
Related
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.
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.
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 trying to follow the official Angular docs to set up testing for an Angular project - https://angular.io/guide/testing#service-tests
I've downloaded the sample Angular project from the page above, using the first (top) link. I've done an npm install and when I run ng serve it builds fine.
When I run ng test using the CLI, I get the message:
ERROR in Entry module not found: Error: Cant' resolve 'C:Code\testing\src\test.ts' in 'C:\Code\testing'
ERROR in error TS6053: File 'C:Code\testing\src\test.ts' not found.
I looked at this question - How to resolve test.ts when running ng test?, but in that case the file actually exists, but in the Angular example project it doesn't exist at all.
(When I first ran ng test I originally got a message about Jasmine Marbles being missing, which I resolved using:)
npm install jasmine-marbles --save
The documentation says:
You can fine-tune many options by editing the karma.conf.js and the
test.ts files in the src/ folder.
So I know the test.cs is some kind of configuration file, but how do I generate it? It doesn't exist in the Angular 'live example' project either. And how do I know that a test.cs I generate will work reliably with this project?
I used #joshbaeha's suggestion to ng new a new Angular 5 project and copied the test.ts file, which appears to be completely generic and not reliant on project structure or anything else. Everything is now working. Here it is:
test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '#angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '#angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
I don't know whether you can generate just the test.ts file or not, but as far as i know this file is automatically generated when you create a new angular project using angular-cli. So you can just create a new project using angular-cli then copy the src/test.ts file from that new project