I need to make a Vue.js site with a JavaScript Ink interpreter. The only one that seems to be production-ready is Ink.js. There are two ways to import it. One is in its TypeScript format, but my Vue setup does not use TypeScript. I could add it, maybe, although I'm not sure I want to. If I import the TypeScript libraries from Yarn, no matter which object I import, it shows up with a value of undefined in my code.
Then there is a pure es5 script available, that seems to be a transpiled version of the first one, but when I try to import that one, I get this error, I think from Babel:
Uncaught SyntaxError: Unexpected token '!'
cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Ink.vue?vue&type=script&lang=js&:39 Uncaught SyntaxError: Unexpected token '!'
at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Ink.vue?vue&type=script&lang=js& (app.js:962)
My guess is that Babel is set up for es6 or es7 and the pure is5 file brings up some unexpected syntax. I tried to change babel.config.js, but I've found no option that's kept Vue.js from complaining. What am I doing wrong?
After many failed attempts, I went around the problem in the following way: I imported the Story object directly from the library:
import { Story } from '../../node_modules/inkjs/engine/Story';
// ...
let story = new Story(storyText);
I know it's not what the documentation recommends, but it works. And it seems everything else that needs to be imported is, because when I try to read story.currentChoices I get an array of Choice objects that are in turn perfectly readable.
So this works for me. If anyone else runs into this problem, I'm not saying it's the right solution, I'm just saying that's what I finally ended up doing.
Related
I am kinda new to React Native. I get this warning which is really annoying and spamming the console every other second or so.
EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
How do I debug this? The call stack says MeasurementProvider, but there is no removeListener anywhere in our code. Does this warning come from a third-party module?
For some reason, I only get this warning in 1 redux slice out of many which use the exact same code structure for deleting state items... Everything works as it should besides that warning popping up so I simply removed the warning using the code below in App.js
import {LogBox} from "react-native";
LogBox.ignoreLogs([
"EventEmitter.removeListener('appStateDidChange', ...)"
])
It's no long-term solution but it'll only show the warning in your dev console this way :)
Here is an image of the top lines of a simple(ish) app.js (not using the bluetooth stuff yet - all commented out)
So no biggie as app seems to work regardless, but I'm interested in why I get it and what can be done to remove it.
Some previous questions seem related to the use of something called Jest (no idea what that is - I suppose I should look it up?)
Jest Testing React Native cannot use import statement outside of a module
Putting it here for benefit of others who may come across it.
I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.
So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>
Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
#click="stuff"
md-label="Notifications"
md-icon="message">
</md-bottom-bar-item>
<md-bottom-bar-item
id="settingsRoute"
to="/Settings"
#click="stuff"
md-label="Options"
md-icon="settings">
</md-bottom-bar-item>
These are tabs to a notifications list, and the settings page for my app.
The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :
[Vue warn]: Missing required prop: "to"
found in
---> <MdButton> at src/components/MdButton/MdButton.vue
<MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
<NavBar> at src\components\NavBar.vue
<App> at src\App.vue
<Root>
I got the same error without the #click='stuff' by the way, nothing to do with it.... I guess...
Is it about Vue-Material#1.0.0 (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.
For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :
<md-bottom-bar md-sync-route>
<!-- stuff -->
</md-bottom-bar>
Not a critical problem, but damn, why Vue.js, why ??? ^^'
And, what a troll :
Ok, this is interesting.
As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :
+ vue#2.5.11
updated 1 package in 0.626s
Now everything works fine (router, to, etc...).
But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?
And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^
If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...
It will also happen in 1.0.0-beta-8, but there seems to be a commit to fix
https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752
I've tried reading several blog posts but TypeScript modules still have me totally confused. In particular, I have used 3 different modules (all installed via npm) and each seems to show totally different behaviour:
(1) I can import and use Angular 2 from npm like this in my .ts:
import {bootstrap, Component, Directive, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
Then in my html I have:
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
This has the following results:
The TypeScript compiler knows to look for the angular2.d.ts file under node_modules, even though I just said "angular2/angular2"
The TypeScript compiler adds "var angular2_1 = require('angular2/angular2'); to the output JavaScript
The browser does not attempt to load the angular 2 JavaScript again despite the presence of the require, it somehow knows it's already loaded it via "angular2.dev.js" in the script tag
(2) The npm D3 module does not have a typescript definition, but I can download the one from DefinitelyTyped and then use it by putting:
/// <reference path="../../typings/tsd.d.ts" />
at the top of my .ts. and
<script src="../node_modules/d3/d3.js"></script>
in my html. It seems that being an old-style module it doesn't need an import statement, and as long as I leave it here the output JavaScript works fine. If I do try to use an import statement immediately after the reference line:
import * as d3 from 'd3';
then as with Angular2 it now adds:
var d3 = require('d3');
to the output JavaScript. However, unlike with the Angular case it doesn't realise it's already loaded the JavaScript via the script tag, and so the browser tries and fails to load a file simply called "d3" from the same directory as the html file, which fails.
(3) The npm Phaser module does include a .d.ts file, in a "typescript" subdirectory of the npm module. This is an old style module ("declare module Phaser"), so it seems I need not use "import.." syntax but instead just:
/// <reference path="../node_modules/phaser/typescript/phaser.d.ts"/>
at the top of my .ts file, as with the D3 example. The TypeScript compiler is happy, but unlike with the D3 example, under some circumstances (I haven't worked out quite what yet, doesn't seem to always happen) it outputs:
var phaser_1 = require('phaser');
in the JavaScript even when I haven't used an import statement. I'm not even using commonjs/requirejs in my phaser project, so "require" isn't even defined, causing failure.
And for completeness, unlike with either the Angular or D3 example, if I try putting an import statement after the reference line:
import * as Phaser from 'Phaser';
even the TypeScript compiler isn't happy. Perhaps in the D3 example the TypeScript compiler is treating the tsd.json or typings folder from DefinitelyTyped in special way, or maybe there is some other reason the import compiles for D3 but not for Phaser.
I have all sorts of questions:
1) What determines whether the TypeScript compiler includes a "require(...)" line in the output JavaScript?
2) Under what circumstances does the TypeScript compiler know where to find an external module in "npm_modules" when using "import", with or without needing a reference line at the top of the file?
3) Under what circumstances does the TypeScript compiler know where to find an ambient module in "typings" when using "import", with or without a "reference" line at the top of the file?
4) Under what circumstances does the TypeScript compiler know where to find an ambient module in "npm_modules" when using "import", with or without a "reference" line at the top of the file??
5) Maybe a commonjs/requirejs question rather than a typescript question, but if the TypeScript compiler does output a "require" line in the JavaScript, what do you do if the source of the JavaScript module is not set up with ES6 module exports?
1 ) I can import and use Angular 2 from npm like this in my .ts:
This is because
angular2 ships with its .d.ts file
The browser doesn't attempt to read require because of magic in angular2.dev.js
The npm D3 module fails && the phaser module fails at runtime
They don't have the magic you get from angular2.dev.js. Use something like webpack or browserify to provide this magic.
Unlike with either the Angular or D3 example, if I try putting an import statement after the reference line: import * as Phaser from 'Phaser';
This is because of how Phaser definition is declared. Apprarently it is missing declare module "Phaser" which is what is provided with d3 see here and angular.