How to use React-Table without Node.js? - javascript

I'm new to React and I'm looking to use react-table in my Django app without Node.js. I've embedded the react-table library in my app with a standard unpkg link but when I go to use its functions in .js files I get errors like app.js:39 Uncaught ReferenceError: useTable is not defined. All of the tutorials import useTable through import { useTable } from 'react-table' but this is not possible when you are just trying to implement this cleint-side in the browser. How would I use react-table without Node.js and its import functions?

You could you npm packages as script tags using unpkg.
<script src="https://unpkg.com/browse/react-table#latest/react-table.min.js" />
Source react table docs https://react-table.tanstack.com/docs/installation

Related

Cannot load a component library in the application created with create-sigle-spa

I have a component library made in React and i use Rollup to build the library.
I created a test application using 'create-single-spa' with Typescript.
When I import my component library into the application the following error happens:
Uncaught Error: application '#org/test' died in status
LOADING_SOURCE_CODE: Error loading http://localhost:8500/org-test.js
(SystemJS Error#3 https://git.io/JvFET#3) at
HTMLScriptElement. (system.js:640)
The import test done on the root file:
Testing using an application created with 'create-react-app' the library import normally works.

"Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ReactJS

Today I decided to try to learn React, but whenever I try to import the two modules below:
import React from "react"
import ReactDOM from "react-dom"
I get the error:
Uncaught SyntaxError: Cannot use import statement outside a module
Here's the steps I've taken to try to create my React program:
Install NodeJS
Add NodeJS to environmental variables
Create new folder for my program
Create HTML, CSS, and JS files in my folder
Why am I getting this error, and how can I fix it?
I assume this is your first time working with React? I see that you have installed NodeJs, which is great!
I recommend that you get started with a complete React app such as Create React App.
https://create-react-app.dev/
I am also new to react and using visual studio2022 to write the react code in MVC project. I created login page exactly same as https://github.com/narendra315/yt-210911-react-login-page/blob/master/src/LoginComponent2.js
and was getting same error as
Uncaught SyntaxError: Cannot use import statement outside a module
fixed it by removing the import as well as export line at the end. I replaced the export line with
ReactDOM.render(<LoginComponent />, document.getElementById('content'));
where LoginComponent is my class and content is id of my Index.cshtml page
This fixed my issue.
You need to add this to your package.json and it should work. If you are going to use es6 import statements you need to tell node you are using modules inside of your package.json like this.
"type": "module",

Trying to add mark.js into the svelte

I am beginner with javascript's world and svelte. And I am trying to import an external library into the svelte app that can highlight words.
However, I am running out the ideas. For example, I am trying to utilize:
import { Mark } from './mark.js';
But it shows the following error:
'Mark' is not exported by src\routes\mark.js, imported by src\routes\page.svelte
In my react app import Mark from 'mark.js'; works fine after installing with yarn

why can't I use import/export code in JSX files visual studio

I have a React app with dozens of files and I don't use any import / export statements. I have a _references.js file that helps intellisense reference components to each other.
I'm looking for a WYSIWYG component to use in my app but all examples show import statements like this:
import { Editor } from 'react-draft-wysiwyg';
When I type this in my JSX file I get:
JSX illegal import declaration
Do I have to configure Visual Studio (2015) differently in order to use this? What is the deal with this syntax and what are the rules around using it?
I am using react for .net so I assume this is what prevents imports from working... but if that is true, then what is the workaround?

Importing css files from node modules in meteor

I am using the froala editor in meteor and react. The froala editor requires you to import css files. https://www.froala.com/wysiwyg-editor/docs/framework-plugins/react When i import for example
import 'froala-editor/css/froala_style.min.css';
The server crashes and gives me an error
SyntaxError: Unexpected token .
It seems to be parsing the file as javascript.
I am using meteor version 1.5.2.
What is the correct way to import css files from node modules in meteor 1.5.2?
You can use the #import syntax in your main style sheet to import the css instead of doing it in the component.

Categories

Resources