for the past 6 months we struggling with a issue in loading our app page in local development.
we getting blank pages with net::ERR_ABORTED 404 (Not Found) in the console logs.
after a few refresh the page loads.
this is very faustring.
our development is: Rails 5.0.7.2 + vuejs 2 with webpack webpacker#4.2.0.
can it be solved? thank you!
package.json
"engines": {
"node": "^10.#",
"yarn": "^1"
},
"resolutions": {
"vue": "2.#.#",
"vue-template-compiler": "2.#.#",
},
"scripts": {
"start": "./bin/webpack-dev-server",
},
webpacker.yml
default: &default
source_path: app/javascript
webpack_compile_output: true
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
public_root_path: public
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
compile: false
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: false
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: 0.0.0.0
port: 3040
public: 0.0.0.0:3040
hmr: true
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
# Compile test packs to a separate directory
public_output_path: packs
testing:
<<: *default
# Compile test packs to a separate directory
public_output_path: packs
staging:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
app:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: false
Use rm -rf public/packs to delete /packs, and then restart the webpack dev server bin/webpacker-dev-server. I think it would be fine.
I think it's just inconsistency of the compiles files which I ran into several times.
You can check the [project root]/public/packs. I guess it would be very possible for the files the browser requesting are not there. In more details, the entry points in [project root]/public/packs/manifest.json is not consistent with the files in the same folder.
"entrypoints": {
"desktop": {
"js": [
"/packs/desktop-7547483.....js" // it cannot find this file in the folder
],
// ...
}
Removing them all and compiling them again is the easiest way to solve that.
Related
I have a Vuejs app that makes an Axios call. I Dockerized it and used digitalocean to serve it to the cloud. App is working but after any axios call, i am getting "We're sorry but sf doesn't work properly without JavaScript enabled. Please enable it to continue." as response.
-I have tried changing the port from 8080 to 8081, running the app on incognito browser tab, changing "baseUrl" with "baseURL" and in front-end docker file i was installing libraries with npm, i also tried to use yarn but i still have this issue.
Is there any more idea about how to fix it ?
main.js file
createApp(App)
.use(store)
.use(vue3GoogleLogin, {
clientId:
"******",
})
.component("font-awesome-icon", FontAwesomeIcon)
.component("MazBtn", MazBtn)
.component("MazInput", MazInput)
.component("MazPhoneNumberInput", MazPhoneNumberInput)
.component("Datepicker", Datepicker)
// .component("VueGlide", VueGlide)
.use(router)
.mount("#app");
Frontend Docker file ;
#Base image
FROM node:lts-alpine
#Install serve package
RUN npm i -g serve
# Set the working directory
WORKDIR /app
# Copy the package.json and package-lock.json
COPY package*.json ./
# install project dependencies
RUN npm install
# Copy the project files
COPY . .
# Build the project
# Build the project
RUN npm run build
# Expose a port
EXPOSE 3000
# Executables
CMD [ "serve", "-s", "dist" ]
Backend docker file
FROM python:3.10-bullseye
# Working directory
WORKDIR /app
# Copy the dependencies
COPY ./docs/requirements.txt /app
# Install the dependencies
RUN pip3 install -r requirements.txt
# Copy the files
COPY . .
WORKDIR /app/backend
ENV FLASK_APP=app.py
# Executable commands
CMD [ "python3", "-m" , "flask", "run", "--host=0.0.0.0"]
vue.config.js file ;
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
compress: true,
host: "127.0.0.1",
proxy: {
// "/upload/img": {
// // target: "http://127.0.0.1:9000",
// target: "http://127.0.0.1:5000",
// },
"/api": {
// target: "http://127.0.0.1:9000",
target: "http://127.0.0.1:5000",
},
"/media": {
target: "http://localhost:8000",
},
"/http-bind": {
target: "https://localhost:8443",
logLevel: "debug",
},
},
// https: true,
// watchContentBase: false,
},
});
Your backend requests are being handled by the frontend app. It looks like you are relying on the development server's proxy functionality in order to forward them to the backend, but this will (and should) not be active when you deploy your app. Instead you will need another proxy that sends /api requests to your backend and other requests to your frontend.
I am running this code in the development environment but I always get this error code and do not find any solution: I deleted the node-module and reinstalled it. I checked everything but nothing seems to work. All the answers are just for the production environment, but mine doesnt work in the development environment. Does anyone know why?
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}:
app/views/layouts/application.html.erb:9
my entry file is here:
this is my application.html.erb file:
<html>
<head>
<title>ProductHuntApp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'entry' %>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<%= favicon_link_tag "https://res.cloudinary.com/dekgrddbo/image/upload/v1506108218/product-hunt-logo-orange-960_fvifwi.png" %>
</head>
<body>
<%= yield %>
</body>
</html>```
and here is my webpacker.yml file:
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
# Hot Module Replacement updates modules while the application is running without a full reload
hmr: false
# Inline should be set to true if using HMR; it inserts a script to take care of live reloading
inline: true
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
# Should we use gzip compression?
compress: true
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
disable_host_check: true
# This option lets the browser open with your local IP
use_local_ip: false
# When enabled, nothing except the initial startup information will be written to the console.
# This also means that errors or warnings from webpack are not visible.
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
When I load the home view (or any view) on my local version of a Rails 6 app, which I'm running with webpack-dev-server through localhost, the page will load, but but not the javascript as I continue to get the following internal server error when webpack calls for application.js in my app/javascript/packs directory:
2020-07-28 18:04:57 -0500: HTTP parse error, malformed request ():
#<Puma::HttpParserError: Invalid HTTP format, parsing fails.
---
2020-07-28 18:04:57 -0500: Rack app error handling request { GET /packs/js/application-682c14949987e19a8380.js }
#<OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=error: wrong version number>
followed by some more extraneous/vague information.
When I run bin/webpack-dev-server, everything (I'm assuming) goes smoothly as so:
ℹ ｢wds｣: Project is running at https://localhost:3000/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /home/gabe/domus/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 6c3a88060d923134f5c3
Version: webpack 4.44.0
Time: 1399ms
Built at: 07/28/2020 5:51:22 PM
Asset Size Chunks Chunk Names
js/application-682c14949987e19a8380.js 508 KiB application [emitted] [immutable] application
js/application-682c14949987e19a8380.js.map 572 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
ℹ ｢wdm｣: Compiled successfully.
In my application.html.slim file I call the application.js file with javascript_pack_tag:
html
head
title Domus
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
body
= yield
And my webpacker.yml file looks like so:
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: true
resolved_paths: []
cache_manifest: false
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
check_yarn_integrity: true
dev_server:
https: true
host: localhost
port: 3000
public: localhost:3000
hmr: false
inline: false
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
I'm not too sure what else to try. Any help would be appreciated!
I fixed this by running bin/webpack-dev-server first and then rails s
You have to run your rails server and webpack-dev-server in different ports, Rails usually runs in port 3000 while webpacker by default uses 3035, so in webpacker.yml make sure to use a different port:
port: 3035
public: localhost:3035
You might also have to disable https in webpacker.yml depending on your setup.
I want hot module reload to reload changes in my JavaScript/React files
I was going through webpacker development documentation
In that it says
This process will watch for changes in the app/javascript/packs/*.js
Now, I want to watch for changes outside of the packs project as well or in the entire javascript folder and also need to include .jsx file.
I am not sure how I can do it.
This is my webpacker file:
#!/usr/bin/env ruby
ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require 'bundler/setup'
require 'webpacker'
require 'webpacker/webpack_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end
And this is my webpacker dev server file
#!/usr/bin/env ruby
ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require 'bundler/setup'
require 'webpacker'
require 'webpacker/dev_server_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::DevServerRunner.run(ARGV)
end
I not sure that I completely understand you question, but I was stuck with problem that default rails webpack server rebuild each .js(x) files changes and that took long time in development. I solved it by use gem foreman
Install foreman
Create Procfile.dev in project root
web: bundle exec rails s -p 3001
webpacker: ruby ./bin/webpack-dev-server
my webpack-dev-server
#!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= ENV["NODE_ENV"] || "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "rubygems"
require "bundler/setup"
require "webpacker"
require "webpacker/dev_server_runner"
Webpacker::DevServerRunner.run(ARGV)
And run project with foreman
foreman start -f Procfile.dev -p 3000
After that - webpack do not build each changes and take less time to reload code changes
Also you can update your webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: 'packs'
public_output_path: 'packs'
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
resolved_paths: ['app/javascript/src']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
production:
<<: *default
public_path: <%= ENV['ACTION_CONTROLLER_ASSET_HOST'] %>
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
Just created a brand new Rails app and receiving this error when I run the server:
Webpacker can't find application.js in /public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Here's my webpacker.yml:
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
After running ./bin/webpack, it recommended I install webpack-cli via yarn add -D.
After I did this, I got the following error:
Error: Cannot find module 'webpack-cli'
Require stack:
- ../node_modules/webpack/bin/webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
at Function.Module._load (internal/modules/cjs/loader.js:899:27)
at Module.require (internal/modules/cjs/loader.js:1090:19)
at require (internal/modules/cjs/helpers.js:75:18)
at ../node_modules/webpack/bin/webpack.js:143:5
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'../node_modules/webpack/bin/webpack.js'
]
I don't have a manifest.json - shouldn't this have been created automatically?
Any ideas?
The problem comes from the version of node on your local computer. When you created your rails app, you probably had an error like this pop up:
The JavaScript app source directory already exists
apply /Users/mconiaris/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/gems/webpacker-4.0.7/lib/install/binstubs.rb
Copying binstubs
exist bin
create bin/webpack
create bin/webpack-dev-server
append .gitignore
Installing all JavaScript dependencies [4.0.7]
run yarn add #rails/webpacker from "."
yarn add v1.17.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning #rails/webpacker > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten#1.0.2: I wrote this module a very long time ago; you should use something else.
[2/4] 🚚 Fetching packages...
error get-caller-file#2.0.5: The engine "node" is incompatible with this module. Expected version "6.* || 8.* || >= 10.*". Got "9.4.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
To fix the problem, first confirm your version of node to ensure that it's not 9.x.x:
node -v
Check the version again. If it's 12.10 or higher, you should be all set.
Go start another brand new rails project and it should work fine.
Good luck!