I'm trying to use the nativescript-ar plugin as outlined in this tutorial, but I'm using Vue instead of Angular. For whatever reason, I can't get the AR module view to render.
These are some ways I've tried to import the component:
import {
AR,
ARLoadedEventData,
ARNodeInteraction,
ARPlaneTappedEventData
} from "nativescript-ar";
import { Color } from "tns-core-modules/color";
export default {
components: {
// AR: () => require("nativescript-ar").AR
// AR: () => import("nativescript-ar").AR
AR
},
I'm also testing the app using tns preview rather than tns run ios - is that an issue in of itself? I feel like I've tried every combination of "hacks" so far to no avail...
Related
I'm beginning with Svelte and I would like to (more or less) reproduce Mapbox store locator tutorial with Svelte & rollup. (Starting from svelte REPL starter kit).
Everything's fine for loading a map and some markers, but as soon as I try to import this package https://github.com/mapbox/mapbox-gl-geocoder, nothing works anymore and I'm not familiar enough with Svelte to figure out how to setup rollup and fix it.
<script>
import { onMount, setContext } from 'svelte'
import mapbox from 'mapbox-gl/dist/mapbox-gl.js';
import MapboxGeocoder from '#mapbox/mapbox-gl-geocoder'; // <<--- Problem here
mapbox.accessToken = 'xxx';
let map;
let geocoder;
onMount(() => {
map = new mapbox.Map({,,,});
geocoder = new MapboxGeocoder({,,,});
});
</script>
terminal :
bundles src/main.js → public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'events'. You might need to include https://github.com/ionic-team/rollup-plugin-node-polyfills
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
events (imported by node_modules/#mapbox/mapbox-gl-geocoder/lib/index.js, events?commonjs-external)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
events (guessing 'events$1')
created public/build/bundle.js in 2s
browser console :
Uncaught ReferenceError: events$1 is not defined
at main.js:5
Then, I tried to add to my rollup config resolve and polyfills plugins, but have other errors.
rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import preprocess from 'svelte-preprocess';
import nodeResolve from '#rollup/plugin-node-resolve';
import nodePolyfills from 'rollup-plugin-node-polyfills';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
nodeResolve(),
nodePolyfills(),
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('bundle.css');
},
preprocess: preprocess()
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}
Gives me this
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/base-64/base64.js
163: }
164:
165: }(this));
^
to conclude: I'm a bit lost :D
thanks in advance
Nuxt.js latest version throws the following error while building or deploying the project that has Vuetify.
remote: > import installComponents from "!../node_modules/vuetify-loader/lib/runtime/installComponents.js"
Module parse failed: Identifier 'installComponents' has already been declared (53:7)
You may need an appropriate loader to handle this file type.
|
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VBtn } from 'vuetify/lib'
| import { VCard } from 'vuetify/lib'
It's hard to tell without a nuxt.config.js. But I had a problem like that. Earlier, I used a plugin to connect Vuetify. Then I installed the #nuxtjs/vuetify module, and the problem came up.
The problem is most likely related to treeShaking. #nuxtjs/vuetify turns on treeShaking only when the build happens. So you don't have a problem in dev mode, but there are problems with the build.
In my case the reason was that I forgot to remove VuetifyLoaderPlugin from the build section in nuxt.config.js.
transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],
Also I recommend enable treeShaking for the dev mode too. This will allow to use SASS variables in dev-mode. From #nuxtjs/vuetify version 2 it will always be enabled.
vuetify: {
customVariables: ['~/assets/variables.scss'], // need treeShake
treeShake: true,
},
Please remove buildModules inside nuxt.config.js, this is for those who are using Nuxt.js
{
buildModules: [
// Simple usage
'#nuxtjs/vuetify',
// With options
['#nuxtjs/vuetify', { /* module options */ }]
]
}
Add modules this one is for latest version
modules: [
'#nuxtjs/vuetify',
],
vuetify: {
//what ever options you may like
},
I want to import a React component from a jsx file in a template and render it in the template with ReactDOM. Later in production I would only want to ship react and all the dependencies of the component only when a site is loaded that has that component.
I have created a React component like this:
editor.jsx
import * as React from "react";
import {Editor} from "draft-js-plugins-editor";
const plugins = [];
export class EditorComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onChange(editorState) {
this.setState({
editorState,
});
}
render() {
return (<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>);
}
}
http://www.phoenixframework.org/docs/static-assets suggests the require syntax for accessing module exports. So I added the following to my template <script>const editor = require("web/static/js/editor").EditorComponent</script>. This does not work though, because the browser cannot interpret require (or brunch does not pick it up).
I configured brunch like so:
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/],
presets: ["es2015","react"]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js/editor.jsx": ["web/static/js/editor"]
}
},
I am a bit lost here. How can this be done?
One idea that pops to mind is to create a JS file and import it in the template you want with a <script> tag. In the same template create an empty <div id=editor>. Then, in the JS file import React and ReactDOM and the component you want and use something like this:
ReactDOM.render(
<Editor/>,
document.getElementById("editor")
)
However, I'm not sure I understand your problem correctly.
I am trying to implement D3 in an app I am building with Nuxt. I have successfully imported it into a view in the <script> section with import * as d3 from 'd3' however because the app is being rendered server-side D3's functionality doesn't work (i.e. d3.select(...)) due to the lack of browser. In the Nuxt plugin documentation it suggests a pattern for client-only external plugins:
module.exports = {
plugins: [
{ src: '~plugins/vue-notifications', ssr: false }
]
}
I attempted to implement the pattern in the nuxt.config.js of my project:
module.exports = {
head: {
title: 'My Demo App',
meta: [...],
link: [...]
},
loading: {...},
plugins: [
{ src: '~node_modules/d3/build/d3.js', ssr: false}
]
}
However D3 throws a ReferenceError while looking for document and Nuxt throws a SyntaxError in the console pointing to something in the plugins field of nuxt.config.js.
For reference, demo.vue:
<template>
<div class="demo-container"></div>
</template>
<script>
import * as d3 from 'd3';
d3.select('.demo-container');
</script>
Would someone be able to point to what I'm doing wrong?
For anyone coming to this page looking for a solution,
these suggestions from piyushchauhan2011 here on GitHub sent me in the right direction.
All I needed to do:
import d3 in my single-file component, and then
do any DOM manipulation with d3 only within mounted()
Before all this, I had to of course add d3 to my project with yarn add d3 (or npm install d3).
[Edit: removed link that no longer works. It wasn't that relevant anyway.]
I was getting an error:
Must use import to load ES Module: .../node_modules/d3/src/index.js require() of ES modules is not supported. require() of .../node_modules/d3/src/index.js from .../node_modules/vue-server-renderer/build.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/d3/package.json.
I solved it by reading this: https://github.com/nuxt/nuxt.js/issues/9223
which indicates you can add this to your nuxt.config.js file:
build: {
standalone: true,
}
This allowed the d3 import to work.
import * as d3 from "d3";
Here's a simple step-by-step tutorial:
Create a new NuxtJS project (Skip this step if you have an existing project)
npm init nuxt-app nuxtjs-d3js-example
Install D3JS
npm install d3
npm install #types/d3 --save-dev
Import D3JS and add a target
HTML:
<p id="d3-target"></p>
JavaScript:
import * as d3 from 'd3'
export default {
name: 'NuxtTutorial',
mounted: function() {
d3.select("#d3-target").text("This text is manipulated by d3.js")
},
}
Fix ES Module error (mentioned by #agm1984)
Error:
require() of ES Module /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/d3/src/index.js from /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of index.js in /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.
nuxt.config.js:
build: {
standalone: true,
}
A minimal project example can be found at: https://github.com/j3soon/nuxtjs-d3js-example, with each step detailed in the Git commit history.
I am playing around on an app with canjs 2.1.0 and stealjs 0.3.0:
I have stealconfig.js like below:
System.config({
map: {
"can/util/util": "can/util/jquery/jquery",
"jquery/jquery": "jquery"
},
paths: {
"jquery": "bower_components/jquery/dist/jquery.js",
"can/*": "bower_components/canjs/*.js",
"lodash": "bower_components/lodash/dist/lodash.js",
"bootstrap" : "bower_components/bootstrap/dist/js/bootstrap.js",
"bootstrap.css" : "bower_components/bootstrap/dist/css/bootstrap.csscss"
},
meta: {
jquery: {
exports: "jQuery",
deps: supportsUnknownElements ? undefined : ["can/lib/html5shiv.js"]
}
},
ext: {
mustache: "can/view/mustache/system"
}
});
And my main.js is:
import can from 'can/';
import $ from 'jquery';
import _ from 'lodash';
import LayoutController from 'apps/layout/layout';
can.route.ready();
new LayoutController(document.body, {});
layout .js loos like:
(function() {
'use strict';
var can = require('can/'),
layoutView = require('./view/layout.mustache!');
})();
But, I get these errors.
GET http://localhost:8080/bower_components/canjs/can.js 404 (Not Found)
GET http://localhost:8080/bower_components/canjs/view/mustache/system.js 404 (Not Found)
How can I solve this issue?
To use CanJS with the new Steal you need to be using the minor branch of CanJS. There hasn't been a tag release yet that supports the new version of Steal.
You can do this easily with bower, just like this (in your dependencies):
"canjs": "bitovi/canjs#minor"
Other comments:
1) When you're using CommonJS (as you are in layout.js) you don't need to wrap it in an self-calling function. That will be done by Steal.
2) The error suggests it cannot find the file. Are you certain you have ran "bower install" to install CanJS? Your configuration looks fine.