I did npm install on the folder with the react content. I'm not using webpack or bundler I pretty much went off this tutorial for setup, because I only need React as components https://reactjs.net/getting-started/aspnet.html and get this error
$exception {"Error while loading \"~/Scripts/react/Components/Progression/ProgressionTable.js\": SyntaxError: Unexpected identifier\r\n at ProgressionTable.js:14:8 -> import Modal from 'react-bootstrap';"} React.Exceptions.ReactScriptLoadException
so essentially it's complaining about the 'import' statement and it always does this for any import. What do I do?
In short import is not supported JS by the browsers so you need to use webpack/babel-loader to turn those import statements into JS that still works.
You would have to use a browser based loader like Require.JS to get your existing code to work here, but your better off having a look at enabling module import loading via Webpack/Babel.
To sum it up, having the right tooling in place will prevent import statements in your compile JS code that the browser has no idea how to handle.
Related
I want to create a Browser-Application without SSR, with React and MUI. So I found a NextJS-Template here:
https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript
I want to disable SSR completely, let's say in the best case starting with _document.tsx, but at least the file _app.tsx and all following as for example _index.tsx should be rendered without SSR.
So, how to disable SSR "completely"?
While some might tell you to use plain React, others still use Next.js because of things like file-based routing, sane ESLint and TypeScript defaults, and fast compilation times (because of SWC). If you prefer the developer experience of Next.js over standalone React, but don't want/need SSR, then you have the option to use a static HTML export:
next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
The example template you linked to shouldn't need any additional code changes (running next export on it worked fine for me, it only threw a warning about a missing ESLint configuration which is easy to set up).
Just remove the getStaticProps, getStaticPaths and getServerSideProps from the pages you don't want to SSR and it will act like a normal react page.
So I have a project on vue 3, in with was requested to add metadata(og, and twitter), so has been a long week, due I never had to work with something like that before, and it seems there are only 2 options available as I can see, so I have chose to work with usevue/head plugin, however the SSR part was not clear in the documentation, assuming that you already know. So after a long research, testing, and watching tutorials, I found how to, the component rendering to head was the easy part and is done(in my main project not in this repository, because my project I still don't have the ssr part and it's what I'm trying to figure out).
However for the SSR I created a empty project(check repository here) where I just want to run the server together with the plugin example code from the documentation, however now I'm facing 2 issues:
For some reason the css coming from the components is not being "compile" by the server.
More important, when importing the usevue/head plugin into the project I got an error: "UnhandledPromiseRejectionWarning: ReferenceError: useHead is not defined"
I suppose is because now I have 2 "main" js files, one for the server, and one for the client side, so I'm guessing that I need to import somehow the plugin to the main.server one as well, which currently looks like that:
import App from './App.vue'
export default App;
While my client side one looks like:
import { createApp } from 'vue'
import App from './App.vue'
import { createHead } from '#vueuse/head'
const head = createHead();
createApp(App).use(head).mount('#app');
If I am guessing correctly, the question is, how do you include in general a third party plugin in a server side file, not to mention the router?
Thank you in advance for your help. Also if you can recommend something else, also is very welcome.
In Deno, to import a TypeScript module, does your own code file have to be TypeScript? Or does Deno auto convert TypeScript to javascript before the module gets imported?
I want all my code files to be EcmaScript modules (js or mjs, but not ts).
Unlike everyone else these days, I want to avoid using TypeScript in my own code. I dislike the rigidity of static types and Typescript is not part of the EcmaScript standard. EcmaScript alone has all I need to manage big projects. To me, TypeScript is an antiquated technology that has not been necessary since the advent of ES6 modules. The types of problems TypeScript addresses are problems I do not have.
You can write your own code with JavaScript.
Suppose you have or are using a TypeScript file/module numbers.ts:
export function isEven(n: number): boolean {
if (n % 2 != 0) {
return false
}
return true;
}
You can import and run it with an app.js JavaScript script:
import { isEven } from "./module.ts";
const one = isEven(1)
const two = isEven(2)
console.log(one)
console.log(two)
Deno does the TypeScript convertion to JavaScript internally. The process is the same when using standard or 3rd party libraries. The folks at the Deno project went even further by adding it as a goal:
https://deno.land/manual/introduction
Browser compatible: The subset of Deno programs which are written
completely in JavaScript and do not use the global Deno namespace (or
feature test for it), ought to also be able to be run in a modern web
browser without change.
Name resolution must be fully qualified. There's a whole lot more about referencing type definitions in this dedicated page for using TypeScript:
https://deno.land/manual/getting_started/typescript
Deno supports both JavaScript and TypeScript as first class languages
at runtime. This means it requires fully qualified module names,
including the extension (or a server providing the correct media type)
Example:
import { config } from "https://deno.land/x/dotenv/mod.ts";
Following my example above you can use the bundle command to generate a single JavaScript file with all the dependencies. Bundling it will take my app.js and module.ts files and create a new file app.bundle.js which is JavaScript.
https://deno.land/manual/tools/bundler
$ deno bundle app.js app.bundle.js
Bundling file:///home/pomatti/projects/deno-sandbox/app.js
Emitting bundle to "app.bundle.js"
3111 bytes emmited.
$ deno run app.bundle.js
false
true
It can even be loaded in the browser:
Bundles can also be loaded in the web browser. The bundle is a
self-contained ES module, and so the attribute of type must be set to
"module". For example:
<script type="module" src="website.bundle.js"></script>
As for ECMAScript modules I would like to point out that TypeScript implements it as well.
https://github.com/microsoft/TypeScript/issues/2242
https://www.staging-typescript.org/docs/handbook/modules.html
Starting with ECMAScript 2015, JavaScript has a concept of modules.
TypeScript shares this concept.
Now, the "static type" discussion falls out of scope of this forum so I won't touch it here, but I believe I covered everything else.
I am trying to add Cesium JS library to a React-Redux application and it keeps spitting out the error SyntaxError: Unexpected character '#'. I have tried multiple ways to do this and the same error occurs.
I am not sure why it is having an issue as the file the error is referring to was auto generated by npm install cesium. The problem file is node_modules\cesium\Source\Widgets\widgets.css. The CSS file contains a bunch of import CSS links that looks like #import url(./Viewer/Viewer.css);.
If anyone has any idea how to solve this error (commenting out that file just causes more errors) or maybe a method to add Cesium library to a React-Redux application that would be much appreciated.
Thanks
So I've created an empty Meteor app. One of the files, server/main.js , looks like this:
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
// code to run on server at startup
console.log('hello from the server');
});
I've tried commenting out the import statement above and the code still runs. So, are import statements, when importing meteor globals, only so it's more easy to see where the variable comes from? Does it make any difference, behaviorally, if I include that import statement or not?
The short answer: yes... and no.
From the Meteor Guide on importing Meteor globals: (emphasis mine)
For backwards compatibility Meteor 1.3 still provides Meteor’s global namespacing for the Meteor core package as well as for other Meteor packages you include in your application. You can also still directly call functions such as Meteor.publish, as in previous versions of Meteor, without first importing them. However, it is recommended best practice that you first load all the Meteor “pseudo-globals” using the import { Name } from 'meteor/package' syntax before using them. For instance:
import { Meteor } from 'meteor/meteor';
import { EJSON } from 'meteor/ejson';
It is, as they say, a best practice, as you saw that removing the import did not break your code. However, as you mentioned, there are some benefits:
You can tell which globals are being used within the file at a glance
Some IDEs can accurately link back to the exported objects in source files.
Those are the two I can think of off hand I find valuable in my every-day work with Meteor.