I tried to make rails and threejs communicate, everything works well but i have an error on importing a GLB file (model) inside my js file
import modelGlb from '../models/model1.glb'
gltfLoader.load(
`${modelGlb}`,
(gltf) => {
gltf.scene.scale.set(0.3, 0.3, 0.3)
gltf.scene.position.set(0, 10, 0)
gltf.scene.rotation.y = Math.PI * 0.5
scene.add(gltf.scene)
updateAllMaterials()
// gui.add(gltf.scene.rotation, 'y', -Math.PI, Math.PI, 0.001).name("rotation")
}
)
error:
Uncaught Error: Module parse failed: Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Thanks for help
I tried to add glb file on static assets and add an additional_paths but nothing work
additional_paths: ['app/javascript/models/']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
- .glb
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
- .glb
I need a simple solution as possible :)
I solved the problem, it was at additional_paths, just need 2**
additional_paths: ['app/javascript/models/**']
Related
Please note that I am a beginner in Ruby on Rails and here. This seems to me like a near repeat of other not-resolved questions such as Webpacker::Manifest::MissingEntryError in .... localhost:3000/* errors but I was asked to repost it as a new thread:
I am working through the depot examples in Agile Web Development with Rails 6, but there is a consistent error when dealing with \app\views\layout\application.html.erb when it encounters
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Showing /Users/rogerburks/Documents/rubyVacation/depot2/app/views/layouts/application.html.erb where line #9 raised:
Webpacker can't find application in /Users/rogerburks/Documents/rubyVacation/depot2/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.
This is happening in development and occurs when I load the views in localhost:3000. I have faced the same error over 3 days of trying to fix it as a new Agile reader, even creating new projects and starting over. Having tried to explore the 4 presented options as best I can, and having googled the error and tried some attempted solutions, I decided that it would be far more efficient for me to ask here rather than to continue flailing.
I suspect that my project is being built in a way that breaks it. This describes the issue without telling how to fix it: 4. Your webpack configuration is not creating a manifest.
I suspect that I may have either installed a webpacker that is too new for my configuration, or I have not properly installed a dependency. Either way, Rails does not generate something that will work with the book's examples.
config/webpacker.yml looks like this:
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
compile: true
# 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
# Extract and emit a css file
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
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: 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
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
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
I had the bright idea run the book's downloadable example folder separately, since in general the downloaded examples work.
After editing the project's gemfile to help it recognize that I am using Ruby 2.7.2 instead of Ruby 2.6.5, I ran
gem install bundler and then bundle install and then I started the server. Somehow, the project itself now runs.
My next task is to figure out why it works. The file webpacker.yml only differs in that I had added compile: true to the default configuration while flailing, which probably did not break anything. This eliminates settings in this file as a possible cause.
Incidentally, this also "solves" the problem in that it provides a set of steps that can lead to a solution in this specific case. It does not explain exactly why the problem occurred, but most likely I would find that some dependency was not installed right.
I have a Rails app that is containerized and running correctly in development on my local machine. When I pull it from Docker Hub to the production server, though, I experience some weird behavior with webpacker, wherein webpacker seems to be looking in a wrong directory (/app/app/public/packs) for my manifest/files, instead of the place they actually exist (/app/public/packs).
My guess
My guess is that there is a conflict caused by the Rails app living in /app, but also having the standard app directory that all Rails projects have (/app/app in my container). I think there is a name/path conflict/misreading somewhere. I could be wrong.
Here's what happens:
After pulling the image and bringing it up with docker-compose, I issue the command to compile webpacker assets:
docker-compose exec app bundle exec rake webpacker:compile
Which outputs:
Compiling...
Compiled all packs in /app/public/packs
Okay, fine. That path appears correct, because in the Rails app container, the Rails project lives in /app, and there indeed is a /app/public/paths directory in the container.
The error
But when I attempt to access the Rails app via my browser, I get an error. Inside of log/production.log, I find this:
F, [2020-08-06T17:20:48.069394 #6] FATAL -- : [fc2bd325-78f8-48f6-b45a-920fd3105bfd]
[fc2bd325-78f8-48f6-b45a-920fd3105bfd] ActionView::Template::Error (Webpacker can't find media/images/login-logo.png in /app/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:
{
}
):
There are two major points to this log:
Webpacker is looking for my manifest /app/public/packs/manifest.json
Webpacker says my manifest is empty.
But the manifest at that location isn't empty:
/app # cat /app/public/packs/manifest.json
{
"application.css": "/packs/css/application-93da03a6.css",
"application.js": "/packs/js/application-3d0a7e3a09e279deed6f.js",
"application.js.map": "/packs/js/application-3d0a7e3a09e279deed6f.js.map",
"entrypoints": {
"application": {
"css": [
"/packs/css/application-93da03a6.css"
],
"js": [
"/packs/js/application-3d0a7e3a09e279deed6f.js"
],
"js.map": [
"/packs/js/application-3d0a7e3a09e279deed6f.js.map"
]
}
},
"media/images/header-logo.png": "/packs/media/images/header-logo-af4d5c3bf874bd9aff042c8946a2ea86.png",
"media/images/login-logo.png": "/packs/media/images/login-logo-7ecc5f8267bf89503ee87f8deb6fac66.png"
}/app #
A "fix"
This seemed weird to me, until I got an idea: what if the container's /app directory is getting confused with the rails app directory, which is located at /app/app in the container. What if webpacker is actually looking at /app/app/public/..., which doesn't exist?
To test this theory, I ran:
ln -s /app/public/ /app/app/public
bin/rails restart
And bam. The Rails app appeared in my browser correctly. Everything works.
Why is this happening, and what should I do?
So it seems like my theory could be correct. My question is: why is this happening, and what should I do?
I don't think I've changed any webpacker config settings to anything weird. I've listed my webpacker config below, in full. What should I do to sort this behavior out? What is causing webpacker to look in the wrong directory?
My webpacker config:
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
# 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
# Extract and emit a css file
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
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: 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
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
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
I'm trying to use WickedPDF in a Rails 6 project that uses the Bulma CSS framework. However, I cannot get it to work properly and I'm wondering what I am doing wrong.
I have a pdf.html.slim layout file with the following:
doctype html
html
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1"
title= content_for?(:title) ? content_for(:title) : t('website.title')
= wicked_pdf_stylesheet_pack_tag 'pdf'
= wicked_pdf_javascript_pack_tag 'pdf'
body
.containers
.container
= yield
My app/javascript/packs/pdf.js file looks like this:
import 'stylesheets/pdf';
which in turn calls app/javascript/stylesheets/pdf.scss
#import 'colors';
// ~ to tell webpack that this is not a relative
// import (but in node_modules dir):
#import '~bulma';
When I open a PDF, however, none of the Bulma styling is applied.
I'm using a vanilla config/webpacker.yml file:
# Note: You must restart bin/webpack-dev-server for changes to take effect
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
# 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
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .vue
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: 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
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
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
The styling currently works as expected on the website but not on PDFs.
I can also confirm that if I use a link to the assets via a CDN, the PDF renders correctly.
I'd expect that using Bulma CSS via webpacker displays styles properly in wicked_pdf generated files.
System specifications
OS: MacOS 10.15.5
Rails version: 6.0.3.2
wicked_pdf gem version: 2.1.0
wkhtmltopdf version: 0.12.6
I am trying to use jquery.datatables using webpacker in rails 6. I have
#app/javascript/packs/application.js
...
require("datatables.net")
require("datatables.net-dt")
...
Then I have
#app/javascript/packs/
#import '../stylesheets/datatables.scss';
and then
#app/javascript/stylesheets/datatables.scss
#import 'datatables.net-dt/css/jquery.dataTables';
but the webpacker-dev-server gives following error
Module not found: Error: Can't resolve '../images/sort_asc.png' in '/Users/app/javascript/packs'
resolve '../images/sort_asc.png' in '/Users/app/javascript/packs'
using description file: /Users/app/package.json (relative path: ./app/javascript/packs)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/app/package.json (relative path: ./app/javascript/images/sort_asc.png)
no extension
The directory structure for datatables.net-dt is as follows
datatables.net-dt
css
images
js
and there are five png images in images folder. Presumably they are background images for the css. How do I load these images, ideally without having to name each one?
Does anyone know how to get the latest Angular working with Rails 5 Webpacker?
I've tried a brand new install of Angular 7.2 in Rails 5
bundle exec rails webpacker:install:angular
It fails with the following error:
ERROR in ./app/javascript/hello_angular/app/app.component.ts
[tsl] ERROR in /home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular/app/app.component.ts(7,14)
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in ./app/javascript/hello_angular/app/app.module.ts
[tsl] ERROR in /home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular/app/app.module.ts(16,14)
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in ./app/javascript/architecture_angular/app/app.component.ts
[tsl] ERROR in /home/david/Desktop/klueless.io/klue-go/app/javascript/architecture_angular/app/app.component.ts(20,14)
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in ./app/javascript/architecture_angular/app/app.module.ts
[tsl] ERROR in /home/david/Desktop/klueless.io/klue-go/app/javascript/architecture_angular/app/app.module.ts(16,14)
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in ./app/javascript/hello_angular/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/reflect' in '/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular'
resolve 'core-js/es6/reflect' in '/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular'
Parsed request is a module
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript/hello_angular)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript/hello_angular)
resolve as module
looking for modules in /home/david/Desktop/klueless.io/klue-go/app/javascript
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript)
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript/core-js/es6/reflect)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.tsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.ts doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.vue doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.jpg doesn't exist
as directory
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect doesn't exist
/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular/node_modules doesn't exist or is not a directory
/home/david/Desktop/klueless.io/klue-go/app/javascript/node_modules doesn't exist or is not a directory
/home/david/Desktop/klueless.io/klue-go/app/node_modules doesn't exist or is not a directory
/home/david/Desktop/klueless.io/node_modules doesn't exist or is not a directory
/home/david/Desktop/node_modules doesn't exist or is not a directory
/home/david/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /home/david/Desktop/klueless.io/klue-go/node_modules
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./node_modules)
using description file: /home/david/Desktop/klueless.io/klue-go/node_modules/core-js/package.json (relative path: ./es6/reflect)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.tsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.ts doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.vue doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.jpg doesn't exist
as directory
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect doesn't exist
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.tsx]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.ts]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.vue]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.js]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.sass]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.scss]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.css]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.module.sass]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.module.scss]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.module.css]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.png]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.svg]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.gif]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.jpeg]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect.jpg]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es6/reflect]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular/node_modules]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/node_modules]
[/home/david/Desktop/klueless.io/klue-go/app/node_modules]
[/home/david/Desktop/klueless.io/node_modules]
[/home/david/Desktop/node_modules]
[/home/david/node_modules]
[/home/node_modules]
[/node_modules]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.tsx]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.ts]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.vue]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.js]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.sass]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.scss]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.css]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.module.sass]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.module.scss]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.module.css]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.png]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.svg]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.gif]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.jpeg]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect.jpg]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es6/reflect]
# ./app/javascript/hello_angular/polyfills.ts 39:0-30
# ./app/javascript/hello_angular/index.ts
# ./app/javascript/packs/hello_angular.js
# multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_angular.js
ERROR in ./app/javascript/hello_angular/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es7/reflect' in '/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular'
resolve 'core-js/es7/reflect' in '/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular'
Parsed request is a module
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript/hello_angular)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript/hello_angular)
resolve as module
looking for modules in /home/david/Desktop/klueless.io/klue-go/app/javascript
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript)
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./app/javascript/core-js/es7/reflect)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.tsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.ts doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.vue doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.jpg doesn't exist
as directory
/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect doesn't exist
/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular/node_modules doesn't exist or is not a directory
/home/david/Desktop/klueless.io/klue-go/app/javascript/node_modules doesn't exist or is not a directory
/home/david/Desktop/klueless.io/klue-go/app/node_modules doesn't exist or is not a directory
/home/david/Desktop/klueless.io/node_modules doesn't exist or is not a directory
/home/david/Desktop/node_modules doesn't exist or is not a directory
/home/david/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /home/david/Desktop/klueless.io/klue-go/node_modules
using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/david/Desktop/klueless.io/klue-go/package.json (relative path: ./node_modules)
using description file: /home/david/Desktop/klueless.io/klue-go/node_modules/core-js/package.json (relative path: ./es7/reflect)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.tsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.ts doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.vue doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.jpg doesn't exist
as directory
/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect doesn't exist
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.tsx]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.ts]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.vue]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.js]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.sass]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.scss]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.css]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.module.sass]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.module.scss]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.module.css]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.png]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.svg]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.gif]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.jpeg]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect.jpg]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/core-js/es7/reflect]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/hello_angular/node_modules]
[/home/david/Desktop/klueless.io/klue-go/app/javascript/node_modules]
[/home/david/Desktop/klueless.io/klue-go/app/node_modules]
[/home/david/Desktop/klueless.io/node_modules]
[/home/david/Desktop/node_modules]
[/home/david/node_modules]
[/home/node_modules]
[/node_modules]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.tsx]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.ts]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.vue]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.js]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.sass]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.scss]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.css]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.module.sass]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.module.scss]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.module.css]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.png]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.svg]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.gif]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.jpeg]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect.jpg]
[/home/david/Desktop/klueless.io/klue-go/node_modules/core-js/es7/reflect]
# ./app/javascript/hello_angular/polyfills.ts 40:0-30
# ./app/javascript/hello_angular/index.ts
# ./app/javascript/packs/hello_angular.js
# multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_angular.js
I have a work around by doing the following.
Change core-js from ^3.0.0 to ^2.5.7 in
package.json
Then execute in root rails folder
yarn install
{
"name": "klue-go",
"private": true,
"dependencies": {
"#angular/common": "^7.2.10",
"#angular/compiler": "^7.2.10",
"#angular/core": "^7.2.10",
"#angular/platform-browser": "^7.2.10",
"#angular/platform-browser-dynamic": "^7.2.10",
"#rails/webpacker": "3.5",
"core-js": "^3.0.0",
"core-js": "^2.5.7",
"rxjs": "^6.4.0",
"ts-loader": "3.5.0",
"typescript": "^3.3.4000",
"vue": "^2.6.10",
"vue-loader": "14.2.2",
"vue-template-compiler": "^2.6.10",
"zone.js": "^0.9.0"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
}
}