Error with JavaScript enabled tests (Bootstrap 3, Rails 4, Travis CI) - javascript

I have strange error that appears only in CI environment. This error does not appear in develpment, production or even local test environments.
ActionController::RoutingError: No route matches [GET] "/fonts/bootstrap/glyphicons-halflings-regular.svg"
Full trace can be found here
In development and production enviroments successfull reqest goes to /assets/bootstrap/glyphicons-halflings-regular.woff. There is a difference in /fonts/ - /assets and svg - woff part. All errors generated by JavaScript enabled tests (Poltergeist / PhantomJS driver). Regular Capybara tests are all green. Chrome devtools says that request for font file is generated by jquery.js, not the page or css file.

This is related to the bootstrap-sass gem. I'm using version 3.3.4.1 of it with Rails 4.2.
My presenting issue was very similar but slightly different: the same error in CI with 404 for /fonts/bootstrap/glyphicons-halflings-regular.woff but a different path in dev, /fonts/glyphicons....
The solution that worked for me was adding the following line before including the bootstrap JS with SASS:
$icon-font-path: "bootstrap/";
#import 'bootstrap';
My best clue came from the comments on this issue in the gem's tracker:
https://github.com/twbs/bootstrap-sass/issues/480#issuecomment-49237119

If you have similar setup to us, you installed Bootstrap manually on Rails and had to do some manual CSS style overrides to point the Glyphicon fonts to the right path. (/assets/botostrap... instead of /fonts/bootstrap...). However the original styles are still present in bootstrap.css, and even though they're overridden, it appears that somehow PhantomJS is still detecting and making use of those originals.
In our case, we had to search for all references to glyphicons-halflings in bootstrap.css and change the path to the correct one. After we do so, the routing errors disappear.
Good luck!

Related

Setting locale error with i18n in converse.js

i have built the converse.js files according to the steps in option 3 in this link: https://conversejs.org/docs/html/quickstart.html
Then i had the JavaScript and CSS files in Dist directory. I saved the dist directory in my webpage root directory.
Then i added the JavaScript and CSS filed to the head section of the index page. I also initialized the converse.js in the bottom section of the index page. Everything worked perfect with this integration.
I also changed the locale to different languages which can be found in '/dist/locale' directory. I am able to change the
locale to all the 39 languages except one: 'ug'. This is a new language which i have translated recently.
When i set i18n to 'ug', the converse.js is in English which is failure in the setting. Then i looked at
the browser console to see if there is any errors. I found the following errors for the issue:
FATAL: Cannot find module './ug.js' log.js:68:19
log log.js:68
fatal log.js:93
initialize index.js:121
initialize core.js:574
initialize converse.js:53
initialize entry.js:31
<anonymous> index.html:57
can anybody knows how to solve the issue? Thanks
I expect to see the converse.js in Uyghur lanugage.

Recommended PhpStorm configuration for Shopware?

I have noticed the JavaScript classes not resolving when typing the following in a Shopware JavaScript plugin:
This got me thinking. Is there any way to solve this not resolving? Are there any other configuration recommendations for Shopware development in PhpStorm? I've already seen some in the Shopware Academy backend course and the documentation, but might there be more?
Updated answer, quick solution
In your project directory tree find src/Storefront/Resources/app/storefront, right click the folder, Mark directory as, Resource Root. This should make the aliased modules resolved.
Older answer, possible permanent fix
Theoretically PhpStorm should be able to resolve the aliases defined in src/Storefront/Resources/app/storefront/webpack.config.js.
However it fails analyzing that file:
Webpack
Can't analyze webpack.config.js: coding assistance will ignore module resolution rules in this file.
Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
Error details: Definition file does not exists
I found the reason is line 465 of src/Storefront/Resources/app/storefront/webpack.config.js:
const injector = new WebpackPluginInjector('var/plugins.json', webpackConfig, 'storefront');
Replacing that line with the following line made the modules using the aliases resolvable:
const injector = new WebpackPluginInjector(path.resolve(projectRootPath, 'var/plugins.json'), webpackConfig, 'storefront');
If you're using the development template and the Shopware mono-repo is located in the platform diretory this change will make Webpack look for platform/var/plugins.json instead. So either copy or symlink var/plugins.json to that location.
This is obviously just a temporary workaround and needs to properly be fixed eventually.
As a side note: The separate webpack.config.js for the administration also fails to be analyzed by PhpStorm as of now. So this won't fix non-resolvable aliases for PhpStorm in the administration.

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.

Excluding file from optimizing in Durandal build

I'm using Grunt to build the Durandal starter kit pro package.
It all works fine, except for one tiny detail. I would like to exclude one file (app-config below) from the optimizer and keep it as a non minified file when my build is done.
Based on other SO thread suggestions, I'm currently excluding it using empty:, which removes it from the optimized file as expected. However, when I open the built project I get an error in the console:
Uncaught Error: main missing app-config
options: {
name: '../lib/require/almond-custom',
baseUrl: requireConfig.baseUrl,
mainPath: 'app/main',
paths: mixIn({ }, requireConfig.paths, {
'almond': 'lib/require/almond-custom',
'app-config': 'empty:'
}),
optimize: 'none',
out: 'build/app/main.js',
preserveLicenseComments: false
}
Is almond the problem? I tried switching it to the full requirejs using include: ['path/to/require'], without success.
If you want to reproduce it locally you can either download the starter kit from the above link, or use a slightly configurated version which is closer to my example. Just run an npm install in the folder and you're all set.
I have downloaded you source code and do the following steps.
Extract zip file, open cmd and change the directory to this folder.
Run npm install to install all the dependencies.
Run grunt to start to build the project.
And when I open http://localhost:8999/ and saw the alert 1 which is alert(appConfig.foo); in your main.js.
After clicked Ok to hide the alert, the web page works fines. Any more input for you ?
So I am not sure how you are facing with this issue.
From the reference of the durandal issues found in this particular link
grunt-durandal
The main module controls the implementation of the durandal services
The link can be found in main.js
Here you can see the system.debug(true).You can remove it as written in the post here document.
The function as quoted in the article Overrides request execution timeout making it effectively infinite.
Also while using uglify in grunt the debug is set to false as per the documentation.
As per the documentation you need to set the system.debug(false)
Hope this might help a bit.
try:
....
paths: mixIn({ }, requireConfig.paths, {
'almond': ['lib/require/almond-custom', '!lib/require/almond-custom/app-config.js']
}),
....
just note the second path of app-config.js is correct. I think you should find your way, the above is a hint, if not a direct solution.

Stop Webstorm of Displaying Error on hbs! Plugin for require.js

There are two files in my project:
index.js where the following code is
define([ 'exports', 'hbs!./general'], function (exports, generalTemplate) {
});
general.handlebars which is correctly taken by require.js and the hbs! plug-in.
I'm basically using Require.js with Handlebars.js and the https://github.com/SlexAxton/require-handlebars-plugin for automating the creation of templates from files.
It works correctly, but Webstorm 8 (and also 7 before it) doesn't understand the file is correct so it always complains with: Cannot resolve file 'general'. It is the same with every file using that plugin prefix.
I coudln't find where (if it exists) to turn that notification off, because it underlines the entire file, and its parent directories as having errors.
How can I remove this error of being reported?
This notification can't be turned off unfortunately - annotator-level inspections can't be suppressed.
The issue with relative paths resolving when loading plugins for non-js extensions is tracked as WEB-1167, please vote

Categories

Resources