I'm trying to incorporate a React component for radio buttons in my iOS app that's written in React Native, however I get an error when trying to import the component using the method that the author specified.
I first installed the component in the root directory of the app's XCode project/source code using the following statement:
npm i -S react-native-radio-buttons
Everything looked like it went through fine, so I incorporated the code for the component into the JS file for the screen that would use it, but I get an error on the very first line (which contains the import statement).
The import statement goes like this:
import { RadioButtons } from 'react-native-radio-buttons'
And the error is:
Uncaught SyntaxError: Unexpected reserved word
As far as I can tell, that should be an acceptable way of doing things in ES6. If anyone could tell me why this would happen, I'd be grateful. Thanks in advance.
react-native-radio-buttons author here,
I assumed everybody was using Babel with ES6 features enabled. I should add that to the README.
Edit: instruction and example .babelrc added to 0.4.2
Please try add this .babelrc file to your project root, as the provided example does:
{
"whitelist": [
"es6.modules"
]
}
Are you using a tool to translate from ES6? "import" is not going to work. Have you tried:
var RadioButtons = require('react-native-radio-buttons');
instead?
Related
This is my first time using js so bear with me (I’m an experienced python programmer).
How am I supposed to use this repo in js: https://github.com/omerdn1/otter.ai-api
I installed the package with npm and created the setup script (and updated it to fit my login info), but I’m getting a SyntaxError: SyntaxError: Cannot use import statement outside a module at the first line import OtterApi from 'otter.ai-api';.
I looked at the similar SO questions (1 and 2) and the solution seems to be adding ”type”: “module” to the package.json file. But 1) I’m not sure if they actually me “module” or its a specific module name 2) I tried this with both “module” and “OtterApi” and I’m still getting the SyntaxError.
I’m totally lost. Don’t know how modules work in js. Would greatly appreciate your help. :)
Edit: I replaced the import with the following instead: const OtterApi = require('otter.ai-api')
This seems to work as the initial error is no longer there. However, I’m now getting a separate SyntaxError (which is may be unrelated to the first error?): SyntaxError: await is only valid in async functions and the top level bodies of modules.
This is from the following code:
const OtterApi = require(‘otter.ai-api’);
const otterApi = new OtterApi({
email: 'email#example.com', // Your otter.ai email
password: 'abc123!#', // Your otter.ai password
});
await otterApi.init() // Performs login
The error happens at the last line.
I used the setup code, but I replaced the import with the following instead: const OtterApi = require('otter.ai-api').
Apparently, you can’t use ES Modules in Node without jumping through some hoops (or maybe using the latest version?). So, the above resolves that issue.
I am working on converting a large application from JavaScript (Backbone and Angular 1) to TypeScript. When we convert a file that is used by other files we understand that we have to update the import statements in those other JavaScript files so that it imports the new TypeScript file correctly. Our syntax update in fake-file.js is as follows.
Before:
import OurService from 'our.service';
After:
import { OurService } from 'our.service';
I understand that this is an easy change but TypeScript is new to many developers and there have been problems with people missing some of these import statements or forgetting to change them all together resulting in some issues during runtime. I have looked into compiler options but I do not see any that would fix this issue but I could be misinterpreting them.
Question: Is there a way to configure the compiler (or a Visual Studio Code plugin) to throw a warning or an error to prevent this from happening?
I assume that I understood your requirement and possibly you need to adapt a linting process and consequently I would suggest the following tools (which I also use in my project):
Airbnb Javascript style guide (your import statement concern-https://github.com/airbnb/javascript#modules). These are a well-defined set of standards defined for any JS application (including ES).
ESLint. You can run ESLint from the terminal and configure it for your project that highlights warning/errors in your code. If this looks complicated, you can generate the tslint document for your entire project in the website itself. Click on rules configuration and configure the ES rules for your project. There are some import related rules too.
PS: Feel free to add your comments.
I am trying to get the components imported into a Nuxt project, following the steps here:
https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt does not have a main.js (everything is plugin based), so what I have done is create a "plugin" and then do the import code in there like so (Nuxt recommends this for other libraries too and works fine):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
Then in my config I do (removed other code in config):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
When I run npm run dev in my theme, it builds, but I get a warning:
WARNING Compiled with 1 warnings warning in
./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as
'system') was not found in 'fp-design-system'
Seems to have an issue with the generated system.js regarding the export (the command npm run build:system).
In my page on screen I get the following error when trying to use a component in the design system:
NuxtServerError Cannot find module
'fp-design-system/src/elements/TextStyle' from
'/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, I then get another message:
NuxtServerError render function or template not defined in component:
anonymous
Any idea what's happening here? It would be really great to get this working somehow.
At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.
Thanks.
Repository on GitHub:
Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)
As for your first error (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), the UMD built JS from vue-design-system does not export a "default" object. But you can simply workaround the issue by importing it as:
import * as system from 'fp-design-system'
instead of:
import system from 'fp-design-system'
Then another issue comes quickly as you noticed in your comments: "window is not defined", due again to the UMD built JS that expects window to be globally available, instead of the usual trick to use this (which equals window in a browser). Therefore as it is, the build is not comptible with SSR.
You could however slightly rework the built JS by replacing the first occurrence of window by this, but I am not sure if the result will still work.
Most probably you should better keep this module for client rendering only.
It seems Vue is looking for the ES6 pattern for importing module, which you should use for external javascript modules/files.
in ES6 it is
export default myModule
in ES5 it was
module.exports = myModule
Hope it will help.
I am trying to build my new portfolio with Angular 4 but came across few issues.
I first built it with normal html,css and js and worked fine.
I am using typed.js to create an animation at the beginning.
This are the steps that I followed:
1 - in node_modules created folder typed within typed.min.js
2 - angular-cli.json under scripts section "../node_modules/typed/typed.min.js"
3 - in typed component i imported as: import * as typed from
'../../../../node_modules/typed/typed.min.js'; (apparently not working today and the terminal is saying this ERROR in src/app/components/loading-section/loading-section.component.ts(2,24): error TS6143: Module '../../../../node_modules/typed/typed.min.js' was resolved to '/Users/matteosoresini/Development/Portfolio2017/node_modules/typed/typed.min.js', but '--allowJs' is not set. so if i change the path as the terminal says is working but doesn't really make sense but this is not the main issue.
4 - in ngInit i tried to implement the JS function and when run the project the terminal says typed is not a constructor, even if i move the function inside a script within the typed.component.html
can you please help me with this and clarify where to import external plugin?
Thanks
I was able to install typed.js via npm install typed.js --save.
I then tried to use import { Typed } from 'typed.js'; as shown in the typed.js documentation. That threw the not a constructor error.
I changed the import to import * as Typed from 'typed.js'; and it worked for me.
Types.js has no defined typescript types in DefinitelyTyped repo.
I not sure how it would behave with Angular since it does DOM changes outside angular. You can see and try https://github.com/kuflink/angular-typed but it is not production ready.
I am learning automation for work and currently a little stuck. So far stackoverflow has been a life saver :)
I am writing a test for selenium in visualstudio in javascript (nodes). I understand this is not a great combination but thats what work wants.
I have a test in the app.js file (see screenshot). It references a function in the functions.js file. I cannot get it to recognise the function though. I presume I need to reference the files containing the function. I have tried import 'import cellFromXLS from "functions.js";' and it does not work(Unexpected token import error).
Any ideas on what I can do? Anything fancy like modifying the package.json file to include all files with functions in them?
I am on the latest node.js and the latest drivers.
Also it seems intellisense does not work for javascript in visual studio. Is this right or anyway to fix it?
VisualStudio screenshot
Node doesn't support import natively just yet.
In your functions file you can do something like
function blah(){
console.log("I am blah")
}
function wah(){
console.log("Wah wah")
}
module.exports = {
blah,
wah
}
then in app.js you can do:
const functions = require('./functions.js')
functions.blah()
functions.wah()
The error already tells you what's wrong.
You need to use
const cellFromXLS = require("./functions.js");
instead of
import cellFromXLS from "functions.js"
if you want to use the import syntax, check out Babel