I’m working with a small expo project setup where I develop for both iOS/Android and Web. I recently wanted to add styled-components to the project and got everything up and running for Web and Mobile until I started working with a Theme Provider and the theme prop. I am 99% certain that I should have done everything correctly because it works for mobile but I get a JS exception in the web version.
I’ve created a type for the theme and I know it works because my IDE tells me when I try to add something wrong to the theme.
I’ve created a theme.ts and import it in the component where I’ve implemented the ThemeProvider. I know this works because when accessing prop.theme I get auto-completion and as I said it works on mobile.
const Container = styled.View`
background-color: ${props => props.theme.color.primary};
`
This is the error I get:
TypeError: Cannot read property ‘primary’ of undefined
I suspect it might have something to do with expo’s bundler and missing loaders or something? I don’t know. To my knowledge, I did everything as in the docs and suspect it is an issue with Expo Web and the ThemeProvider.
Those are the relevant packages I'm using:
"expo": "~39.0.2"
"styled-components": "^5.2.1"
"#babel/core": "~7.9.0"
I'm blocked by this because I need to decide whether to proceed with styled components or without them.
It turns out that when you import the ThemeProvider from "styled-components" and then work with "styled-components/native" that iOS and Android builds still work but web breaks...
This was my error. Use "styled-components/native" everywhere!
Stupid me
lol... same. One thing I recommend is creating a lint rule for proper import for anyone who wants to avoid repeating this issue
Related
I have tried a django/react app as well as a base react app made using the create-react-app command. Both end up breaking in one way or another. For instance, the align-items tag does nothing (tried center, right, left). On my django/react app I have a header that loads perfectly on chrome but all I see is a background color on edge.
Maybe you should try adding display:flex so that the align-items property works.And for different browser testing try the webkit rule so that it is stable across all browsers.
See if it helps. Thank You
I'm going to be honest, I went and reloaded the server (have not changed anything since my posting) and it's working completely fine now. I was looking for errors but I dont see any. To clarify, I was having issues with displaying CSS correctly in a react app. Even using the baseline create-react-app and using a align-items property would not function at all in Edge, but would in chrome. Thanks to all who tried to help; hopefully this was a weird one-off.
I'm using chart.js in my Aurelia application and it works fine.
I now want to add the chartjs-plugin-deferred plugin as well, and after having npm install:ed it and added it to aurelia.json's dependencies array I now get the following error:
Uncaught TypeError: Cannot read property 'helpers' of undefined
Pointing to the first couple of lines in the plugin code:
var Chart = window.Chart;
var helpers = Chart.helpers;
(Note that I don't even need to use the plugin (import 'chartjs-plugin-deferred'; for the error to appear; as soon as it's added to aurelia.json I get errors).
If I add a console.dir(window.Chart) before the lines that throw errors it is in fact not undefined, and if I try to use the plugin in my charts it actually works fine.
Can someone explain why this error occurs and if there's some way I can get rid of it? I feel uncomfortable shipping code that, while it works as it should, throws errors in the console.
I'm a huge fan of npm and imports etc but more often than not you run into issues such as these which imo is such a hassle and actually makes me miss the good old days of just piling script elements on top of each other.
Edit: I tried with a couple more plugins just to see if perhaps the deferred plugin was the issue here, but every other plugin I tried completely kills the build.
Does anyone have experience importing ChartJS and a ChartJS plugin into Aurelia successfully?
The issue at hand is that the library does not provide any meaningful way to jump in with a module loader and properly first fully load the dependency ChartJS before carrying on with the execution.
It would be the best if the library could wrap its code in a UMD compatible format to satisfy the most common formats at once, amongst those RequireJS, which is used for the Aurelia CLI.
I see you've created a Github Issue, including the libraries author as well. Good work, I've created a small PR to add the missing feature, which then also makes the example work, without throwing the missing helper error.
I'am trying to build an e-commerce website using turbogears. Initially I modified the tgapp-photos to make the items come on the page properly. But then I find it difficult to make cart from the scratch and hence thought to use stroller. However, when I'am plugging it in the config.py file, all of a sudden my app stops. And moreover it is not showing any error too, it just stops. Could someone please tell me what wrong am I doing.
Can I use satchless or shoppingCart in the turbogears framework?
Stroller is a pretty old project that is not maintained anymore. The reason why it was not working for you is that it was still pending some changes required to make it compatible with TG2.3+, it was compatible only with <=2.2. And so was looking for some Pylons imports.
To solve your problem I just released stroller 0.5.1 which is now compatible with TG2.3, please keep in mind that as it is a pretty old project it depends on ToscaWidgets1 and doesn't work with TW2 so you should:
Remove tw2.forms dependency from your project setup.py
Uninstall tw2.core and tw2.forms from your virtualenv (if they are available sprox will use tw2 and some forms in stroller won't work)
change base_config.prefer_toscawidgets2 in base_config.use_toscawidgets = True
Those are the required step to disable ToscaWidgets2 in your project and revert back to ToscaWidgets1 which is required by stroller.
So i have a Django project where I'm using Dajax and Dajaxice. The project runs well (being served locally using python manage.py runserver) but when I started it up again the next day (with no changes made to any files). The Dajaxice just stopped getting generated/parsed/served (I'm not sure what's wrong). This results in none of my Dajax methods in ajax.py getting called. Again, no settings or configuration or code was changed from a previously running instance of the project.
Here are the error messages various browsers show
Chrome
Resource interpreted as Script but transferred with MIME type application/octet-stream: "http://localhost:8000/modmap/static/dajaxice/dajaxice.core.js".
Firebug on Firefox
#onloading the html with dajaxice script
SyntaxError: syntax error
{% load url from future %}
#on trying to trigger a dajax function
ReferenceError: Dajaxice is not defined
Safari
#on loading page
SyntaxError: Unexpected token '%'
#on triggering method
ReferenceError: Can't find variable: Dajaxice
Interestingly enough, when I access the site through Chrome, whatever was working before the "disaster" works but if I write a new method in ajax.py and call it, it doesn't. I'm thinking that the new method doesn't get registered because the dajaxice.core.js script is not getting generated as it should each time. But on Firefox and Safari, none of the methods work. I also think that my static files are being served up fine because the dajax script gets loaded as it should.
I have read all the documentation and Q/A I could find but just can't seem to trace the source of my problem. I'd really appreciate if someone could point me in the right direction.
EDIT : collectstatic registered new functions too. Everything works on Chrome. Nothing works on Safari and Firefox. I'm starting to think this is a browser compatibility issue but I doubt myself when I think that without any change in the versions of anything, stuff used to seamlessly work on Safari and Firefox too.
Actually dajax and dajaxice are anymore improved so it is unwise to use them:
Should I use django-dajax or django-dajaxice?
In a word, No. I created these projects 4 years ago as a cool tool in
order to solve one specific problems I had at that time.
These days using these projects is a bad idea. (...) If you want to
use this project, you are probably wrong. You should stop couplig your
interface with your backend or... in the long term it will explode in
your face.
We are currently using requirejs/backbone for development and firebug for debugging. We are thinking of moving to Ember and using ember appkit.
I noticed that because of the new ES6 javascript modules, the application needs to be pre-compiled into a single javascript file app.js.
I am concerned that this will make it difficult to debug problems because you are dealing with a massive single file instead of small ones that we have at the moment and can easily find in firebug.
Has this been an issue for people, are there any good solutions?
As kingpin2k mentions, Ember App Kit has been effectively superseded by Ember-CLI. I would recommend looking into that. Depending on your needs and planning, Ember-CLI may or may not be suitable for your situation. Some people have successfully put Ember-CLI apps in production, but this is brand new technology, so caveat emptor.
Ember-CLI provides a build system based on Broccoli that will transpile ES6-modules, compact the output into a single Javascript file, and lots more. Ember-CLI is still under heavy development, but is already shaping up quite nicely. In my opinion, the clean code organization and fast Broccoli build are really quite awesome.
Modern browsers such as Firefox and Chrome come with an integrated debugger that will show you the original source when source maps are supplied. This will eventually be provided to the browser in Ember-CLI projects as well when you run the development server. However, this functionality is currently incomplete. It is possible to get some source map support in Ember-CLI now, have a look at this issue.
In the mean time, there are more ways to debug code of course, and I suspect that before proper source map support lands in Ember-CLI/Broccoli, liberal use of console logging and such may be sufficient. Running Ember-CLI's live-reload development server means that when you change and save a file in your project, the results will be shown almost instantaneously in the browser; the Broccoli build is blazing fast.
Keep in mind that minifying and combining all Javascript code into a single output file is a common approach in single page application frameworks such as Ember, Angular, and Backbone. Debugging these applications with breakpoints and such will happen more and more through the browser's debug tools in combination with source maps.
Update
By now the Ember core team actively recommends Ember-CLI. It is quite awesome.