Photoswipe lightbox is trying to load a null.#ID#.js-file in domain.test/vendor/-folder, however it can't find it there, since it's placed in domain.test/public/vendor/. I can't seem to find how to change where the plugin looks for that file.
I'm using a Sage 10 theme, if that helps anyone with finding out why this is happening.
When running yarn dev, the lightbox works perfectly fine, but it doesn't after running yarn build and gives me the following error:
Loading failed for the <script> with source domain.test/vendor/null.#ID#.js
I can see in my folder structure that null.#ID#.js exists in domain.test/public/vendor though, so it would be amazing if the fix was to just change where the JS is looking for the file?
I've installed the plugin through yarn and imported it like the example from their page, then again, it works when running yarn dev, so the setup must be correct.
So I guess my question is: How do I point Photoswipe towards the right file in public/vendor/ instead of just in /vendor/ when compiling with yarn build?
Related
I have setup a new rails 7 project with Bootstrap 5.2 and Sass, however when it comes to adding in custom styling (with Sass) Rails appears to not be compiling the Sass styling into app/assets/stylesheets/application.css. I have no errors to go off here and after spending far too long on the problem, decided to start fresh with the following setup instructions - https://railsbytes.com/public/templates/V2Gsg9
I had to remove the #import "bootstrap" code below as this throws a compilation error.
append_file 'app/assets/stylesheets/application.scss', <<-CODE
#import "bootstrap";
CODE
I'm unsure if this is relevant to the issue, however I was having issues with the bootstrap setup, where the JavaScript was not working, and followed the following setup from another stackoverflow https://stackoverflow.com/questions/70907799/bootstrap-5-javascript-functions-not-working-in-rails-7-app which has fixed this issue.
In summary, the only problem I'm now facing is that the css is not compiling. I found a number of other resources related to the same issue, however the setup is slightly different and when I try to run the solutions provided it does not work. I have seen multiple posts suggesting to attempt to run rails assets:precompile, which I did, however it broke all the styling setup and couldn't revert it back for some reason (part of the reason whey I started on a new project).
In addition to the new setup, I also tried this suggestion by "stevec" in the following https://stackoverflow.com/questions/71300845/custom-css-not-working-with-css-bundling-for-rails-7. This works, however it doesn't seem to be the Rails way of doing things. This suggests each stylesheet needs to be added to the app/assets/config/manifest.js and also to the application.html.erb file. To my understanding, each view should have its own style sheet which is then imported into application.css.
I feel I'm close to the solution but am finding it challenging at the moment to understand the documentation on the asset pipeline... Some recommendations suggest to install yarn/npm however I thought that's the benefit/job of importmap so have not gone down that path
Well, i try searching a solution but i cant find anything.
A coworker passed me project in NextJs (With React of course). I run yarn install, and then yarn run dev, the server starts but when i made a change in the code, it is not hot reloading! I have to stop and start the server manually each time.
I tried sudo yarn run dev, i tried with npm, y tried a lot of things.
I dont know much about MacOs, i just bought this days ago... The project work perfect on my Windows machine.
This are my current node and yarn version on mac
devmcgann#MacBook-Pro-de-Gabriel instashop-webapp % node --version
v12.16.1
devmcgann#MacBook-Pro-de-Gabriel instashop-webapp % yarn --version
1.22.4
Edit: I tried making a simple react app and hot reload work perfect there.
But with nextJS the problem persists
Thanks!
I had similar issues. The problem was the incorrect imports.
Some of my files and folder were in lowercase but in imports I was using uppercase.
Even though the build is successfully done without error, the hot reload doesn't work. So I had to correct them in order to make them work.
Make sure your routes case matches the case of the folder.
Make sure the component name has to start with the upper case. If your file name is dashboard.jsx, the component name should be Dashboard.
// home/dashboard.js
const Dashboard = () => {
....
}
export default Dashboard
Well.. This is rare.
Yarnd install and also npm install. I didnt now that i will need both.
Fixed.
I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine
So I am using the Aurelia skeleton-navigation starter as recommended. However, when I run the gulp bundle task the application will no longer load the main UI, it get's stuck on the spinner/loading page. I found this issue but even after installing the jspm beta it still doesn't seem to be resolved. Anyone had any luck? For what it is worth, I do not even see an aurelia.js bundle being created in the /dist directory so the 404 certainly makes sense in that respect.
So I have a fix, I am not thrilled with it though. It seems if you run bundle then run gulp watch to start the webserver, that the bundled files get wiped out from the dist folder. Running gulp watch in one command window and gulp bundle in another results in it working correctly as the bundled js is there at that point. I hope for a better fix from someone, this seems kind of hacky.
I'm having trouble getting Babel to work on my current installation of Webstorm 11 on Windows. For some background I'm currently using Webstorm to do Angular development with a Microsoft MVC project (constraints of the project). For the most part it has gone well but I've wanted to move to es2015. I'm already using node package manager and the LESS transpiler with no issues. In trying to figure out what to install I went through a number of packages:
Babel
Babel-cli
Grunt-cli
Grunt-babel
Babel-preset-es2015
It this stage I'm okay with not using grunt; I just want to get a file to transpile before moving on to that. I actually have Webstorm thinking the file watcher is there but it doesn't actually transpile the code. I figured out es2015 was no longer on by default so I installed the last preset and it totally through my machine into a grind of processing tasks that maxes out my machine and only ended with an exception looking trying to for path under my project. That path is indeed valid. If I re-enable the file watcher it will max out my machine again.
All these seems pretty abnormal to me given I just want to enable the damn es2015 processing. Somewhere I'm obviously doing something wrong so I'm hoping someone can give me some input in what I truly to setup Babel properly.
Thanks!
Sieg