I followed documentation but I am not able to get snap.svg working in my Ionic2 project.
Install:
npm install snapsvg --save
npm install #types/snapsvg --save
Use:
import * as snapsvg from 'snapsvg';
var s = snapsvg.Snap(800,600);
Error:
Uncaught TypeError: Cannot read property 'on' of undefined
Any advices?
1) Install imports-loader and snap:
npm i imports-loader
npm i snapsvg
npm i #types/snapsvg
2) Create element in html template:
<svg width="200" height="200" id="svg"></svg>
3) Import it in your component:
import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';
4) Use it in your component:
ionViewDidEnter() {
let s = Snap("#svg");
let circle = s.circle(50, 50, 100);
...
}
Related
Currently working on a react app and I'm getting this error after installing metaplex.
My react-scripts version is 4.0.3
./node_modules/#metaplex-foundation/js-next/dist/esm/programs/token/gpaBuilders/TokenGpaBuilder.mjs
Can't import the named export 'ACCOUNT_SIZE' from non EcmaScript module (only default export is available)
I found out the solution in the git of metaplex here. I will leave you here the whole answer anyway.
Getting Started with Metaplex and CRA 5
This example sets up a new React app with Metaplex using "Create React App" (CRA) version 5 — i.e. using Webpack 5.
This example has been generated using the following steps:
Create a new project using the "Create React App" command.
npx create-react-app getting-started-react-cra5
cd getting-started-react-cra5
Install the Metaplex and the Solana SDKs.
npm install #metaplex-foundation/js #solana/web3.js
Install some polyfills.
npm install assert util crypto-browserify stream-browserify
Install and use react-app-rewired.
# Installs react-app-rewired.
npm install react-app-rewired
# Replaces "react-scripts" with "react-app-rewired" in package.json scripts.
sed -i '' 's/react-scripts /react-app-rewired /g' package.json
Override Webpack 5 configurations.
Create a new file to override Webpack 5 configurations.
touch config-overrides.js
Copy the following code inside the new config-overrides.js file.
const webpack = require("webpack");
module.exports = function override(webpackConfig) {
// Disable resolving ESM paths as fully specified.
// See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
webpackConfig.module.rules.push({
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
});
// Ignore source map warnings from node_modules.
// See: https://github.com/facebook/create-react-app/pull/11752
webpackConfig.ignoreWarnings = [/Failed to parse source map/];
// Polyfill Buffer.
webpackConfig.plugins.push(
new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
);
// Polyfill other modules.
webpackConfig.resolve.fallback = {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
assert: require.resolve("assert"),
fs: false,
process: false,
path: false,
zlib: false,
};
return webpackConfig;
};
Update your browser requirements.
Update the browserslist object of your package.json to include the following production requirements.
"browserslist": {
"production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
+ "chrome >= 67",
+ "edge >= 79",
+ "firefox >= 68",
+ "opera >= 54",
+ "safari >= 14"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
That's it!
You should not use #metaplex-foundation/js-next SDK, the actual repo is #metaplex-foundation/js, the name was changed and the updated repo is this, so try using #metaplex-foundation/js instead
The error:
C:\\Users\\RC\>npm install -g #angular/cli
node:internal/modules/cjs/loader:933
const err = new Error(message);
^
Error: Cannot find module './utils/unsupported.js'
Require stack:
- C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\cli.js
- C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js
\[90m at Function.Module.\_resolveFilename (node:internal/modules/cjs/loader:933:15)\[39m
\[90m at Function.Module.\_load (node:internal/modules/cjs/loader:778:27)\[39m
\[90m at Module.require (node:internal/modules/cjs/loader:1005:19)\[39m
\[90m at require (node:internal/modules/cjs/helpers:102:18)\[39m
at module.exports (C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\\[4mnpm\[24m\\lib\\cli.js:14:59)
at Object.\<anonymous\> (C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\\[4mnpm\[24m\\bin\\npm-cli.js:2:25)
\[90m at Module.\_compile (node:internal/modules/cjs/loader:1103:14)\[39m
\[90m at Object.Module.\_extensions..js (node:internal/modules/cjs/loader:1157:10)\[39m
\[90m at Module.load (node:internal/modules/cjs/loader:981:32)\[39m
\[90m at Function.Module.\_load (node:internal/modules/cjs/loader:822:12)\[39m {
code: \[32m'MODULE_NOT_FOUND'\[39m,
requireStack: \[
\[32m'C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\cli.js'\[39m,
\[32m'C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js'\[39m
\]
}
C:\\Users\\RC\>npm install -g #angular/cli
node:internal/modules/cjs/loader:933
const err = new Error(message);
^
Error: Cannot find module './utils/unsupported.js'
Require stack:
- C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\cli.js
- C:\\Users\\RC\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js
If you install Node.js, then also npm is installed. That might be the easiest to do.
You can download Node.js here:
https://nodejs.org/en/download/
VS Code then finds npm, no further setup is required.
After updating to babel 7 beta, looks like babel polyfill does not transpile before bundle. I updated all scoped packages like this one "#babel/polyfill": "7.0.0-beta.36". And changed imports for two files from import 'babel-polyfill' to import '#babel/polyfill'. How to use babel/pollyfill with babel env and babel 7. Should I use babel/polyfill when use useBuiltIns: 'usage', with targets?
.babelrc.js
const nodeEnv = process.env.NODE_ENV || 'development'
let presetEnvConfig, plugins
if (nodeEnv === 'test'){
presetEnvConfig = {targets: {node: 'current'}}
plugins = ['istanbul']
} else {
presetEnvConfig = {
targets: {
browsers: ['last 2 versions', 'ie >= 11']
},
modules: false
}
plugins = ['react-hot-loader/babel']
}
const config = {
presets: [
['#babel/preset-env', presetEnvConfig],
'#babel/react',
'#babel/stage-2'
],
plugins,
}
types.js
import keyMirror from '../../../utils/keyMirror'
export default keyMirror({
Unassign: null,
Reassign: null,
QuickAssignment: null,
}, 'TagAssignmentTypes')
index.js
<Assignment
assignee={assignee}
tagId={tagId && tagId.toString(16)}
assignmentType={assignmentTypes.Reassign}
onRequestClose={() => this.setState({isAssignmentInProgress: false})}
onChange={onChange}
/>
#babel/polyfill is a wrapper package which only includes imports of stable core-js features (in Babel 6 it also included proposals) and regenerator-runtime/runtime, needed by transpiled generators and async functions. This package doesn't make it possible to provide a smooth migration path from core-js#2 to core-js#3: for this reason, it was decided to deprecate #babel/polyfill in favor of separate inclusion of required parts of core-js and regenerator-runtime.
Instead of
import "#babel/polyfill";
you should use those 2 lines:
import "core-js/stable";
import "regenerator-runtime/runtime";
Don't forget install those dependencies directly!
npm i --save core-js regenerator-runtime
Change
#babel/stage-2 to #babel/preset-stage-2
The following worked for me, add
**.babelrc**
{
"presets": [
["#babel/env"]
]
}
**app.js**
import "core-js/stable";
import "regenerator-runtime/runtime";
*Install as pointed by gianmarco*
npm i --save core-js regenerator-runtime
Is it possiable to use ionic with ui-router.stateHelper
I want to use this for help me working with nested views:
the property children is what I'm looking for.
If its not possible, how can i do something similar, without defining each child state with name: parent.child?
after installing and import im getting the next error:
TypeError: Cannot read property '#' of undefined at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:62199:69)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:62194:9
at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21830:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21330:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20721:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20725:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20725:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20596:30)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14815:27
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29026:28) <ion-nav-view class="view-container" nav-view-transition="ios">
Ok This is working.. I had problem with the indjection.
this is the right way: (im using browserify)
npm install angular-ui-router.statehelper
then in the package.json
under browser:
"angular-ui-router-helper": "./node_modules/angular-ui-router.statehelper/statehelper.min.js"
and under browserify-shim
"browserify-shim": {
"angular": "angular",
"ionic": "ionic",
"angular-ui-router-helper": {
"exports": "angular.module('ui.router.stateHelper')"
}
},
and then in the index.js:
var rootModule = angular.module('AppName', ['ionic',require('angular-ui-router-helper').name]);
Then u can inject the stateHelperProvider to the config method :)
I am pretty new to React, I tried to follow the topic about pretranspile JSX:
https://facebook.github.io/react/docs/tooling-integration.html
My code [app.js] is very simple:
var React = require("react");
var ReactDOM = require("react-dom");
var Todo = React.createClass({
render: function() {
return <button>Add</button>;
}
});
ReactDOM.render(<Todo />, docuemtn.getElementById("div1"))
I first install:
npm install -g babel-cli
npm install react react-dom
Then try to use:
babel --watch ./app.js --out-dir ./
But it always says:
SyntaxError: ./app.jsx: Unexpected token (10:9)
8 | var Todo = React.createClass({
9 | render: function() {
> 10 | return <div>Hello {this.props.name}</div>;
| ^
11 | }
12 | });
13 |
I wonder how to solve this?
Babel 6 and up no longer has any native transforms for React. You have to add a preset like this
npm install babel-preset-react
And then run
babel --presets react --watch ./main.js --out-dir ./
Don't forget the --presets react part. After that it should work just fine.
install babel together with plugin to tranform react-jsx
npm install --save-dev babel-cli babel-preset-env babel-plugin-transform-react-jsx
run below command to compile jsx file
./node_modules/babel-cli/bin/babel.js --plugins transform-react-jsx test.jsx