Develop Reference

Import maps + Stimulus: error in JS "Unknown Content-Type text/html"

I'm having a JS issue with my first Rails app, which I suspect is related to my using import maps instead of Webpack. I've searched and searched but haven't found any discussions of this.
It's a Rails 6 app with some JS via Stimulus, which I installed by adding importmap-rails and then stimulus-rails. It works fine locally, but in production on Heroku the JS doesn't work and I see errors like this in the browser console: Uncaught (in promise) Error: Unknown Content-Type "text/html; charset=utf-8" doFetch https://plainreading.herokuapp.com/assets/es-module-shims-424762490b07cc7f9a37745e8b53356bca11997a8e313f47d780e29009df7e8e.js:580
I'm wondering if it's because I removed Webpack from my app, using How to completely remove webpack and all its dependencies from Rails App. I removed it because I was getting Webpack-related build errors in Heroku, and it's my understanding that I don't need Webpack if I'm using import maps.
A while ago I fixed a similar issue in a static site on Netlify by including this in its netlify.toml config:
[[headers]]
for = "/*.js"
[headers.values]
Content-Type = "text/javascript; charset=utf-8"
I couldn't find any similar config for Heroku. So then I tried customizing the response headers in the app, but I couldn't find a way to do that for my JS files, only for the main HTML response and for public assets.
Here's the repo in case it helps: https://github.com/fpsvogel/plainreading

In the end I solved the issue by doing the following:
Install Rails 7 alpha.
Create a test project with import maps: rails _7.0.0.alpha2_ new importmap-test. (You can use -j to set a different JS bundling option, such as -j esbuild, but the default is import maps.)
Upgrade my main project to Rails 7 alpha.
In my main project, make all JS-related code identical to the corresponding code in the test project. For me this meant overwriting app/javascript/controllers/index.js.
Then my JS worked without errors.

'ActionSheetIOS' is not exported from 'react-native-web/dist/index'

How to avoid the this kind of warning?
My app is working but it gives warning in terminal like below
Compiled with warnings.
/home/karim/Desktop/React-Native/RN-Complete-Guide/node_modules/react-navigation-header-
buttons/src/overflowMenuPressHandlers.js
Attempted import error: 'ActionSheetIOS' is not exported from 'react-native-web/dist/index'.
It is because of of I imported HeaderButtons and HeaderButton from react-navigation-header-buttons like below
import { HeaderButtons } from "react-navigation-header-buttons";
import { HeaderButton } from "react-navigation-header-buttons";
And I am using react-native 4.x veriosn. is there any way to avoid this warning?

This file in the source for react-navigation-header-buttons imports ActionSheetIOS, which is not supported by React Native web applications. This seems like it's probably an issue with React Native web itself, as even importing the ActionSheetIOS component in your project without actually using it will cause a crash from my past experience.
You probably won't be able to use react-navigation-header-buttons for your solution because of this issue. The authors also go on to say in their README that web support is currently experimental:
Supports iOS and Android, web support is experimental.
I'd suggesting either finding a way to avoid this library or flag an issue on the repo to suggest swapping ActionSheetIOS in with a cross-platform action sheet solution like react-native-action-sheet.

in react-native-web/dist/index.js i exported
export { ActionSheetIOS }; and somehow the warning disappeared

How to set application version on the Sentry error capturing?

Recently, I installed Sentry on my React Native application. I set my initializing configuration like below:
import { SentryToken } from './app/helpers/config';
import { environment } from './app/helpers/env';
Sentry.init({
dsn: SentryToken,
environment,
});
And on the issue dashboard, I can see all errors, messages and etc.
But in one of the message report I saw the Sentry reports whole the device, OS and especially the application:
Actually, I wanna know where does the version come from?
I even pass the version key but still, it doesn't make any difference the version in the Sentry dashboard is still on 1.0`.
I read whole the documentation about options but there is nothing to help me.
where does the version come from?

Finally, I find out sentry brings the Version and the Build number from Xcode:
Actually, these two numbers come from the info.plist file and project.pbxproj file with the following file:
info.plist: ios/[projectName]/Info.plist
project.pbxproj: ios/[projectName].xcodeproj/project.pbxproj

Conditional import of React Native library

I want to import a React Native library for Android only, as there is no iOS version.
I have the current setup (I used require to get around import restrictions):
if (Platform.OS === 'android') {
BackgroundColor = require('react-native-background-color');
}
But this still fails out on iOS.
Is there a standard way to do this? I can't find any documentation on it.

This issue has been already fixed by one of the PR (https://github.com/ramilushev/react-native-background-color/pull/8) which has been merged. but, owner of the library has not published the new version.
So, until new version is released, as a workaround you can manually add blank index.ios.js file in node_modules/react-native-background-color/ directory to resolve your import issue in ios. Alternatively you can fork the library.

Ember load-initializers error: Could not find module `ember-load-initializers`

I'm having trouble updating an older Ember app.
I've ported the code into a new, empty ember app and installed the dependencies. I get no error when I serve the app, but when I inspect the browser console, I see that the app failed to launch.
Uncaught Error: Could not find module `ember/load-initializers` imported from `<my-app>/app`
I've seen a similar SO post that suggested this was caused by issues with ember-cli and jquery. link
However, that post is over a year old and I'm running an up-to-date version of ember along with an newer jquery library. Sure, it's no guarantee, but it seems a bit unlikely that this is still an issue for ember-cli.
My app/app.coffee file is pretty basic (no additions)
`import Ember from 'ember'`
`import Resolver from 'ember/resolver'`
`import loadInitializers from 'ember/load-initializers'`
`import config from './config/environment'`
Ember.MODEL_FACTORY_INJECTIONS = true
App = Ember.Application.extend
modulePrefix: config.modulePrefix
podModulePrefix: config.podModulePrefix
Resolver: Resolver
loadInitializers(App, config.modulePrefix)
`export default App`
From the console, I can verify that my app is using the expected jquery version:
$ Ember.$.fn.jquery
"3.2.0"
However, from the command line, I get a different version.
$ bower jquery -v
1.8.0
I'm not sure whether that's meaningful or a red herring.
At any rate, my ember-cli is fairly recent.
ember-cli: 2.12.0
I've added links to the package.json and bower.json files, in case they contain any clues.
At this point, I'm not really sure how to troubleshoot the issue. The depency

import Resolver from './resolver'
import loadInitializers from 'load-initializers'
Update those line app.js file and try it

If you haven't done this already, in the app.js, switch
import loadInitializers from 'ember/load-initializers'
over to
import loadInitializers from 'ember-load-initializers'
they changed the naming conventions of loadInitializers recently.