We Keep Coding

How connect SciChart to Nuxt

I need how coonect SciChart to Nuxt.js
i did
npm init nuxt-app "scichart"
npm install scichart
and i catch error
packeg.json
{
"name": "scichart",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"buildsci": "webpack",
"startsci": "webpack-dev-server"
},
"dependencies": {
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"scichart": "^2.0.0"
},
"devDependencies": {
"copy-webpack-plugin": "^6.3.2",
"webpack": "^4.46.0 ",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}

There are now a number of samples on the SciChart.js Github showing how to setup SciChart in frameworks. These include:
Next.js
Nuxt.js
React
Vue.js
Blazor
Angular
Just Javascript (no framework)
Plus many more. The common problem with these frameworks is loading WebAssembly. SciChart.js uses WebAssembly to achieve really high performance 2D & 3D charts & graphs. Wasm file needs to be in the output folder when your project is built. This is different for every framework.
There is now a page on the SciChart.js Documentation showing how to load webassembly flawlessly without requiring Webpack or Copy plugins in package.json.
See the how-to article here: Creating a new SciChartSurface and loading Wasm
Deploying Wasm (WebAssembly) and Data Files with your app
If you receive an error message when running your app, you may not
have deployed the Wasm (WebAssembly) or data files correctly. Below
are some steps on how to resolve that.
Error: Could not load SciChart WebAssembly module. Check your build
process and ensure that your scichart2d.wasm, scichart2d.data and
scichart2d.js files are from the same version
Option 1: Package Wasm & Data Files with WebPack (or similar)
...
Option 2: Load Wasm from URL with SciChartSurface.configure() or
useWasmFromCDN()
...
We've packaged a helpful function that
automatically loads the latest & correct version of SciChart's Wasm &
Data files from CDN.
To use this, instead of calling
SciChartSurface.configure() passing in a URL, call
SciChartSurface.useWasmFromCDN().
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
export async function initSciChart() {
// Call this once before any SciChartSurface is shown.
// This is equivalent to calling SciChartSurface.configure() with the CDN URL (JSDelivr)
SciChartSurface.useWasmFromCDN();
}

SyntaxError: Cannot use import statement outside a module when start NodeJS from IntellijIDEA

I try to create hello world applications by react js. I created the NodeJS application in IntelliJ IDEA. Create a helloworld.js file. and add this code to this file
import React from 'react';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Added react-dom dependency to package.json. Made npm install command. Start Application
{
"name": "testjsapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react-dom": "^16.12.0"
}
}
Error:
"C:\Program Files\nodejs\node.exe" D:\projects\testjsapp\hello\helloworld.js
D:\projects\testjsapp\hello\helloworld.js:2
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
Process finished with exit code 1

You're trying to execute a React program in Node.js, but it is designed to run in a web browser. There is no DOM in Node.js for you to manipulate. That just isn't going to work.
Since the program you are running uses JSX, you'll need to transpile it before it will work there too.
Go back to the tutorial. The section on setting up a local development environment provides an approach to getting up and running or you can look at a selection of toolchains that you can choose from.

check your current version
node -v
Update you node version to latest 13.X
Update nodejs
And Execute to create React App
npx create-react-app my-app
cd my-app
npm start
reference To create react app
and cross check it your existing Application, If needed

If you want neither using create-react-app nor settings up webpack and other tools, I can suggest starting with a simple HTML page that includes links to babel-standalone and required libraries, see https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Hello(props) {
const [name, setName] = React.useState(props.name);
return (
<h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
Hello {name}
</h1>
);
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>
</html>
Create an empty project, add a new HTML file, paste the content above in it, then right-click the file and choose either Run or Debug from its right-click menu to open application in browser

Well i came across same problem, i realized I wasn't doing something right.
First once you already create a react app using react-create-app
And you closed the project or run another project folder, if you want to start that project again
Make sure the folder path is correct then simply type
npm start in the terminal
that will solve the problem.

replace your line
import React from 'react';
with this one
const React = require("react")

I had this problem because I imported a Module from the client client to the server folder. Although the module was not used, it seems this kind of import is forbidden,

Already the Folder Called Src inside your Reactapp --> Goto that Src Directory and Replace App.js with your code then go back to ReactApp Directory and Run the code npm start ..It works for me..

For me, it worked when I passed an argument to transpile imports on the fly like below -
// transpile imports on the fly
require("#babel/register")({
ignore: [/(node_modules)/],
presets: ["#babel/preset-env", "#babel/preset-react"],
});
Also, I had a babel.config.js in the same folder as that of package.json for the server-side.
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-async-to-generator",
"#babel/transform-arrow-functions",
"#babel/proposal-object-rest-spread",
"#babel/proposal-class-properties",
],
};

I saw this issue when I wanted to debug my React app in IntelliJ which you do by running a JavaScript configuration in debug mode by e.g. right-click app.js > debug.
However, debugging doesn't work if your app isn't running already via npm start in terminal or right-click -> run on app.js.
So it's a two step process (in case of debugging), without step 1, syntax error message.

How to deploy websites that include npm-downloaded packages to surge / gh-pages?

I'm quite new to the deployment part of websites with npm packages in it. and I'm trying to temporarily host my website to surge.sh in order to share & test it. It's a simple html website with paper.js scripts in it. By just launching the index.html in chrome it works. When deploying to surge I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)
Is there an extra action that I have to go through when deploying sites with node packages in it (in my case paper.js)? E.g. building the site first, like for react apps? Or is it a problem with how I'm using paper.js in the script?
Here's a bit of my code:
// package.json
{
"name": "leaf_generator",
"version": "1.0.0",
"description": "testing paperjs",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mark tension",
"license": "ISC",
"dependencies": {
"focus-visible": "^4.1.5",
"mathjs": "^6.0.2",
"p5": "^0.8.0",
"paper": "^0.12.1",
"underscore": "^1.9.1"
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
From index.html I import paper.js and my paper.js script like this:
<script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
<script type="text/javascript" src="js/leaf_generator.js"></script>
And these are the first lines of the .js paper script from where the error is thrown:
$(document).ready(function() {
paper.setup("myCanvas");
with (paper) {
""""""""" paper.js code """"""""""""
}
Thanks!

The quick answer is that Surge.sh ignores the node_modules directory by default. If node_modules is in your .gitignore file (as it probably should be), they will also not be available on GitHub Pages. You’re right that as typically a build tool or static site generator will take all your dependencies and bundle them into build files.
Building on the comments, a couple of options of how you could fix your problem quickly:
Option 1: Use the unpkg service for your npm dependencies for now
One option is to use something like Unpackage, which will give you a pre-built and hosted version of your dependencies, directly from npm:
<script type="text/javascript" src="https://unpkg.com/paper#0.12.3/dist/paper-full.js"></script>
I prefer to link to a specific version, but you do also have the option of always using the latest version from npm by linking to https://unpkg.com/paper
Option 2: Un-ignore the node_modules folder on Surge
Alternatively, you can decide to publish your node_modules folder to Surge by adding a Surge ignore file and restoring that folder: https://surge.sh/help/ignoring-files-and-directories
Inside the folder you are deploying, create a fill called .surgeignore, and add:
!node_modules/
Option 3: Set up a build tool
As mentioned in the comments, you can set up Webpack or a similar tool to package Paper.js and your other JavaScript together, but that might be more than you need to bother with depending on where you’re at with your project.

Jest unit test failing with `ReferenceError` from NPM package module

I'm getting failed tests after installing an NPM package (one of my own packages).
Specifically, I'm getting ReferenceError: cc is not defined, with the stack trace leading back to one of the exports in my NPM package.
cc is an object from a game framework (Cocos2d-x) that is included in my project locally.
The game framework is not included in my NPM package, but the package does reference the object with the assumption that whatever project has the package installed will also have the game framework already included. So essentially, Cocos2d-x is a peer dependency, but is not listed as one since it's not an NPM package itself.
The code I'm testing in my project does not make any reference to the game framework. And the methods that I'm importing from my NPM package do not make any reference to the game framework. I'm importing these methods using destructuring (e.g. import { helper1 } from 'my-package').
With that said, I wouldn't expect it to be an issue. But Jest doesn't like the fact that cc is referenced from an entirely different export on my NPM package (one that is not being imported into the file being tested). In other words, helper2 is causing Jest to fail because it does reference cc, but helper2 isn't being imported.
How should I go about fixing this error so that the tests pass?

I tried to recreate an environment similar to yours and I haven't been able to reproduce this error:
/so
foo/
index.js
package.json
answer.test.js
package.json
Here's the content of ./package.json:
(As you can see it has foo as a dependency)
{
"name": "so",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"test": "jest"
},
"devDependencies": {
"jest": "^24.1.0"
},
"dependencies": {
"foo": "./foo"
}
}
Here's the content of ./foo/package.json:
{
"name": "foo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
And here's ./foo/index.js:
(As you can see helper2 references a global variable that is not defined.)
module.exports = {
helper1: () => 42,
helper2: () => cc
};
Now the test file:
const {helper1} = require('foo');
test('helper1 returns the answer', () => {
expect(helper1()).toBe(42);
});
When I run the test (yarn test), the test passes with no errors or warnings. So it doesn't seem that Jest is bothered by having a method referencing a global object that is not in scope.
Perhaps you could leverage Jest configuration options:
globals
A set of global variables that need to be available in all test environments.
setupFiles
A list of paths to modules that run some code to configure or set up the testing environment. Each setupFile will be run once per test file. Since every test runs in its own environment, these scripts will be executed in the testing environment immediately before executing the test code itself.

In my specific case, the problem was in one of my exports from the NPM package that looks something like this:
// NOTE: cc is undefined, with assumption that any project installing the NPM package will have
// the required game framework
class BackgroundLayer extends cc.Node {}
export default BackgroundLayer;
The solution was to simply add globals to my project's Jest config, like so:
"jest": {
"globals": {
"cc": {
"Node": null
}
}
}
What is still not clear to me at this point is if this is to be expected. In other words, if Jest should be failing a unit test that has nothing to do with a non-imported export.

did you try to create a lite version ?
Lite version
there was a discussion on that in the cocos2d forum

How can I export a React Component as an NPM package to use in separate projects?

I have created a React component inside a project that I'd like to use in multiple projects. At the moment, I only care about doing this locally and for development. The React Component is rendered into the root div, the project uses webpack and babel to transpile JSX, ES6 and some ES7 features into a bundle.
I thought it would be simple to export this component such that I can simply run npm install MyComponent and begin using it in a fresh project. However, I find it isn't so straight forward. In particular, I've been reading for hours and hours and only seem to be getting more confused.
If my end goal is to keep developing 'MyComponent' in its containing project, while using 'MyComponent' in any number of other local projects, what are my options? The first thing I did was change the main key of my package.json to /src/components/MyComponent and run npm pack. This produces a tgz file I can install via its absolute filepath in other projects. However, I found that the es6 and jsx was not being transpiled and so my client projects would be unable to parse MyComponent. I then used webpack to transpile into lib/MyComponent, but when I have import MyComponent from './path/to/MyComponent-1.0.0.tgz I'd only see {} (an empty object) in the console.
Searching for solutions to my problem turn up many different approaches pulling together NPM, Grunt, Gulp, Babel, Webpack, etc.. And I am worried it will be many many more hours (days?) before I can grind that down to something understandable.
Given my requirements, what is the simplest solution I can implement to 1) compile down my React Component to the simplest to import module 2) import it into any local projects 3) continue to develop the package in the original host project and have changes easily propagate to client projects.

In general, if you're going to begin creating React components as separated packages (which is a great pattern, for all the reasons you've already mentioned) - you're going to need to get at least a bit familiar with webpack and babel. There's a ton to learn here, but let me try to point you in the right direction:
// webpack.config.js
/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
const ENVIRONMENT = process.env.NODE_ENV
const PRODUCTION = ENVIRONMENT === 'production'
const SOURCEMAP = !PRODUCTION || process.env.SOURCEMAP
const library = 'your-lib-name' // << RENAME THIS <<
const filename = PRODUCTION ? `${library}.min.js` : `${library}.js`
const plugins = []
if (PRODUCTION) {
plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENVIRONMENT),
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: { comments: false, semicolons: false },
sourceMap: SOURCEMAP,
})
)
}
module.exports = {
devtool: SOURCEMAP ? 'source-map' : 'none',
entry: `${__dirname}/path/to/your/component.js`, // << RENAME THIS <<
externals: {
'react': 'react',
'react-dom': 'react-dom',
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}],
},
output: {
filename,
library,
path: `${__dirname}/lib`,
libraryTarget: 'umd',
umdNamedDefine: true,
},
plugins,
}
I know that looks like a bunch - but it handles the majority of what you're going to want. In specific:
If you specify NODE_ENV=production when building, this will uglify/minify your package, and do some other trimming which you may want later.
Building with this script will output a sourcemap, which you can use with dev tools to inspect your minified code in the debugger window, among other things.
This marks react and react-dom as externals - which means they won't get bundled up and packaged inside your bundle. This is great - because it means you won't get 2+ copies of react's filesize just because you've imported your own component!
To use it, though, you now need some package.json love.
package.json
{
"name": "Your Name",
"version": "0.0.1",
"description": "This is my awesome react package!",
"main": "path/to/your/component.js",
"author": "Your Name",
"license": "MIT",
"repository": { /* Your Repo Info Here */ },
"dependencies": {
"any-packages-you-need-included-in-builds": "^1.0.0"
},
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"prop-types": "^15.5.10",
"react-dom": "^15.6.1",
"webpack": "^3.0.0"
},
"scripts": {
"build": "yarn prebuild && NODE_ENV=production webpack",
"prebuild": "mkdir -p ./lib && rm -rf ./lib/*"
}
}
Obviously, you can have a lot more here if you need it - such as other babel-plugin-* plugins that you use in your transpilation, other packages, etc.But this set will let your webpack build run. Note that the scripts here assume you're using yarn - so that you can run yarn build, and that you're on a posix system, for mkdir to work. If you're on windows or not using yarn, just update the scripts accordingly.
The rest is just learning to publish your package to npm or another package repository. Primarily, that's just setting the version number in package.json to something new (npm version) and then publishing (npm publish). You will have to have an npm account for this, of course - and be logged in (npm login).
Once you've published to npm you can just yarn add your-package-name.
Remember, though - we marked react and react-dom as external - so in the consuming package, you'll need to make sure they're available as window.React and window.ReactDOM - or you'll need to include the component directly from node_modules/your-package-name/path/to/your/component.js

You don't need to npm pack a package to use it. If you make your component into a git repo and put it on Github, you can use NPM to install it directly from Github by using npm install alex/mycomponent where alex is your github username and mycomponent is the repo name. Re-running that command will re-install from Github, in case you make changes to the repo.
Once you're happy with the component, you can upload it to the NPM registry to install like any other package (npm install name). Using Github at first makes it a bit easier to develop.
Webpack might not compile things from node_modules by default. Usually, packages are pre-compiled before being published anyway, but you should be able to configure webpack to build your 'packaged' component, along with the rest of your app. Maybe this will help: https://stackoverflow.com/a/38008149/7486612

In order to push react libraries into NPM, you may need some boilerplate which will install and convert many things for you (and you can still use your current react module as the main source, just follow the guides at the end of my answer, then you will surely get all the ideas)
Or you can also refer to my previous answer to a similar question:
Issue with publishing to npm
=====
I've also pushed several react libraries successfully into NPM:
https://www.npmjs.com/~thinhvo0108
=====
Your github repositories' folder structure should also look like mine:
https://github.com/thinhvo0108/react-paypal-express-checkout
=====
Useful tutorial below here:
(boilerplate source) https://github.com/juliancwirko/react-npm-boilerplate
(author's article) http://julian.io/creating-react-npm-packages-with-es2015/

Start by looking at existing component library, eg Material UI.
Specifically check out npm scripts they have (see package.json):
"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
"build:es2015modules": "cross-env NODE_ENV=production BABEL_ENV=modules babel ./src/index.js --out-file ./build/index.es.js",
"build:copy-files": "babel-node ./scripts/copy-files.js",
"build:umd:dev": "webpack --config scripts/umd.webpack.config.js",
"build:umd:prod": "cross-env NODE_ENV=production webpack --config scripts/umd.webpack.config.js",
"build": "npm run build:es2015 && npm run build:es2015modules && npm run build:copy-files && npm run build:umd:dev && npm run build:umd:prod",
That's example of very involved and high quality component library, that makes sure that regardless of your build pipeline you'll be able to use it.
Setting up build process with webpack might be cumbersome, but don't concentrate on that too much from the begining, and cover cases that are most straight forward to you.
Also check out https://storybook.js.org/ while working on your components.