我正在尝试将Element UI添加到我的 Vue 应用程序中。我按照快速入门教程进行操作,并且我有我的 application.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/it'
import App from '../app.vue'
Vue.use(ElementUI, { locale })
document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue(App).$mount('app')
  console.log(app)
})
我正在导入 CSS,而且我还导入了 CSS
<%= stylesheet_link_tag 'application' %>
在我的布局里面,但这个文件是空的,没有样式。该应用程序正在运行,但没有 CSS。我的错在哪里?
所以我现在正在做一个项目,我已经通过 Rails 5 中的 webpacker gem 实现了 webpack。
一切似乎都工作正常,直到我在日志文件中收到此错误:
    2018-02-14 19:46:13 -0800: Rack app error handling request { GET /packs/application-a4b639671cab02ef63f8.js }
#<Net::ReadTimeout: Net::ReadTimeout>
/usr/local/Cellar/ruby/2.5.0/lib/ruby/2.5.0/net/protocol.rb:181:in `rbuf_fill'
/usr/local/Cellar/ruby/2.5.0/lib/ruby/2.5.0/net/protocol.rb:157:in `readuntil'
/usr/local/Cellar/ruby/2.5.0/lib/ruby/2.5.0/net/protocol.rb:167:in `readline'
/usr/local/Cellar/ruby/2.5.0/lib/ruby/2.5.0/net/http/response.rb:40:in `read_status_line'
/usr/local/Cellar/ruby/2.5.0/lib/ruby/2.5.0/net/http/response.rb:29:in `read_new'
/usr/local/lib/ruby/gems/2.5.0/gems/rack-proxy-0.6.3/lib/net_http_hacked.rb:53:in `begin_request_hacked'
/usr/local/lib/ruby/gems/2.5.0/gems/rack-proxy-0.6.3/lib/rack/http_streaming_response.rb:60:in `response'
/usr/local/lib/ruby/gems/2.5.0/gems/rack-proxy-0.6.3/lib/rack/http_streaming_response.rb:29:in `headers'
/usr/local/lib/ruby/gems/2.5.0/gems/rack-proxy-0.6.3/lib/rack/proxy.rb:120:in `perform_request'
/usr/local/lib/ruby/gems/2.5.0/gems/webpacker-3.2.0/lib/webpacker/dev_server_proxy.rb:16:in `perform_request'
/usr/local/lib/ruby/gems/2.5.0/gems/rack-proxy-0.6.3/lib/rack/proxy.rb:57:in `call'
/usr/local/lib/ruby/gems/2.5.0/gems/railties-5.1.4/lib/rails/engine.rb:522:in `call'
/usr/local/lib/ruby/gems/2.5.0/gems/puma-3.11.0/lib/puma/configuration.rb:225:in `call'
/usr/local/lib/ruby/gems/2.5.0/gems/puma-3.11.0/lib/puma/server.rb:624:in `handle_request'
/usr/local/lib/ruby/gems/2.5.0/gems/puma-3.11.0/lib/puma/server.rb:438:in `process_client'
/usr/local/lib/ruby/gems/2.5.0/gems/puma-3.11.0/lib/puma/server.rb:302:in `block in run'
/usr/local/lib/ruby/gems/2.5.0/gems/puma-3.11.0/lib/puma/thread_pool.rb:120:in `block in spawn_thread'
我相信这与 webpack 有关,public/packs/但我不知道什么可能会触发错误以及如何修复它。
我希望得到更有经验的开发人员的帮助。
谢谢
我有一个项目最近升级到了 Rails 5.2,并且我正在使用 webpacker gem。我在尝试部署到 Heroku 时收到以下错误:
\n\n...\nremote:        Webpacker is installed  \nremote:        Using /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/config/webpacker.yml file for setting up webpack paths\nremote:        Compiling\xe2\x80\xa6\nremote:        Compilation failed:\nremote:        /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:11:in `exec\': No such file or directory - /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/node_modules/.bin/webpack (Errno::ENOENT)\nremote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:11:in `block in run\'\nremote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:10:in `chdir\'\nremote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/webpack_runner.rb:10:in `run\'\nremote:         from /tmp/build_b969a2366f45a65a0c09b6aaa4b24667/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/runner.rb:6:in `run\'\nremote:         from ./bin/webpack:15:in `<main>\'\n...\n在本地,我的 \'node_modules\' 目录位于 .gitignore 中(我相信 webpacker 安装脚本之一将其放在那里)。
\n\n我是否需要取消忽略node_modules,或者是否需要在配置文件中添加一些内容来告诉远程在哪里可以找到webpack?
\n\n这是我的 package.json:
\n\n{\n  "dependencies": {\n    "@rails/webpacker": "3.5.5",\n    "babel-preset-react": "^6.24.1",\n    "d3": "^5.7.0",\n    "jquery": "^3.3.1",\n    "prop-types": "^15.6.2",\n    "react": "^16.5.2",\n …我正在编写前端,这是我第一次需要使用 webpacker 在 RoR 应用程序中连接 babel。我不明白我应该与什么互动才能实现这一点。
我下载了 babel 所需的包:
-babel-code-frame; 
-babel-loader; 
-babel-plugin-dynamic-import-node; 
-babel-plugin-宏。
然后我尝试与Nothing的webpacker.yml文件进行交互config/webpack/*.js.。
在后端,我们使用 ruby 2.5.1 和 rails 6.0.0.rc2v
这是config/webpack/development.js文件:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const webpack = require('webpack');
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
环境.js文件:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('ProvidePlugin', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
}))
module.exports = environment
和 production.js 文件:
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment …我一直在阅读文章/论坛并遵循一些有关如何设置它的指南,但是我仍然无法运行引导程序和 jquery。
通过yarn安装了bootstrap、jquery和easyAutocomplete,之后我继续设置我的env.js以启用jquery。
const { environment } = require('@rails/webpacker')    
const webpack = require("webpack")    
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment
在我的 application.js 中看起来像这样
import 'bootstrap'
import '../stylesheets/application'
import './popover'
import './carousel'
import 'easy-autocomplete'
import './autocomplete'    
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
在导入简单自动完成引导程序和 jquery 之前,可以正常工作并加载。可以使用自定义脚本进行轮播等,但是在我导入简单自动完成后,一切都中断了。似乎 jquery 不再被识别,因为我的轮播和弹出框停止工作,最重要的是我在控制台中收到以下错误
未捕获的类型错误:$(...).easyAutocomplete 不是 :1:12 的函数
有人可以给我一些关于如何解决这个问题的指示吗?
jquery twitter-bootstrap easyautocomplete webpacker ruby-on-rails-6
自从我们将项目的依赖项从 rails 4.2 升级到 rails 5.2 以来,我们遇到了问题
我们同时使用链轮资产和 Webpacker。首次启动服务器并加载第一个页面(任何页面)时,它会在提供页面内容之前挂起。
它通常挂在这样的线上,没有其他输出:
I, [2020-05-15T10:28:20.828146 #66077]  INFO -- : [fd7f1413-7d72-402f-92f9-95688e7fa50e]   Rendered partials/_front_page_featured_items.html.haml (172.4ms)
ruby 进程似乎空闲,不使用 CPU。
我意识到通过rails assets:precompile在运行服务器之前运行,它不会再挂起,即使我删除了 public/assets 和 public/packs 目录中的预编译资产。
我可以通过以下方式重现它:
tmp/cache我们可以在至少 3 台开发机器和 CI 服务器上重现这一点。
在rails 4.2分支中,我们没有这个问题,我们有相同版本的Webpacker(4.2.2)。
rails 4.2 分支和 5.2 在资产方面的主要区别在于从 sprockets 3.7 升级到 4.0,以及所有其他依赖项更改。
我被困在调试这个问题上,希望能在如何进一步调试这个问题、获得更多输出到日志等方面得到一些帮助。
更新:我在 gemfile 中禁用了 webpacker,它仍然冻结
更新 #2:在链轮上发现了一个相关问题:https : //github.com/rails/sprockets/issues/640。我相信这和我遇到的问题是一样的。
在 rails 6 中得到这个错误,在 rails 5 中,在将应用程序更新到 rails 6 后很容易修复,包括 webpack 这个错误出现在我尝试关闭 js.erb 文件中的模型的每个地方。
我的文件:pack/application.rb
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "bootstrap";
import "./src/application.scss";
import "jquery"
文件包/src/application.scss
@import "~bootstrap/scss/bootstrap";
文件 config/webpack/environment.js
   const { environment } = require('@rails/webpacker')
    const webpack = require('webpack')
    environment.plugins.prepend('Provide',
        new webpack.ProvidePlugin({
            $: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery'
        })
    )
    module.exports = environment
webpack webpack-dev-server ruby-2.4 webpacker ruby-on-rails-6
尝试编译时,所有图像都出现以下错误:
rails assets:precompile
ModuleNotFoundError: Module not found: Error: Can't resolve 'core-js/modules/es.symbol' in '/***/app/javascript/packs'
            Field 'browser' doesn't contain a valid alias configuration
              /*/app/javascript/core-js/modules/es.symbol.scss doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              /*/app/javascript/core-js/modules/es.symbol.css doesn't exist
            .module.sass
              Field 'browser' doesn't contain a valid alias configuration
              /*/app/javascript/core-js/modules/es.symbol.module.sass doesn't exist
            .module.scss
              Field 'browser' doesn't contain a valid alias configuration
              /*/app/javascript/core-js/modules/es.symbol.module.scss doesn't exist
            .module.css
              Field 'browser' doesn't contain a valid alias configuration
              /*/app/javascript/core-js/modules/es.symbol.module.css doesn't exist
            .png
              Field 'browser' doesn't contain a valid alias …ruby-on-rails asset-pipeline webpack ruby-on-rails-5 webpacker
我正在使用Rails 6.0.3.2, ruby 2.7.1, yarn 1.22.0。
我正在尝试做正常的UJS事情,这是我遇到的错误:
VM125:1 Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:1
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
这是我的package.json:
{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "^6.0.2-2",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "data-confirm-modal": "^1.6.2",
    "expose-loader": "^1.0.0",
    "flickity": "^2.2.1",
    "jquery": "3.4.1",
    "local-time": "^2.1.0",
    "popper.js": "^1.16.1",
    "stimulus": "^1.1.1",
    "trix": "^1.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}
这是我的 …
我将 webpacker 从 4.x 升级到 5.2.1 并开始收到此警告:
The resolved_paths option has been deprecated. Use additional_paths instead.
这看起来很简单,我的config/webpacker.yml几乎没有修改:
  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: [
    'app/assets',
  ]
但是在s/resolved_paths/additional_paths/那里做一个简单的工作是行不通的:
[Webpacker] Compiling...
[Webpacker] Compilation failed:
Hash: 7448f36a43523a84e146
Version: webpack 4.44.1
Time: 5803ms
Built at: 10/15/2020 11:57:06 AM
                                          Asset      Size            Chunks                         Chunk Names
         js/application-a019b363e4513fe092e6.js  3.02 MiB       application  [emitted] [immutable]  application
     js/application-a019b363e4513fe092e6.js.map  3.03 MiB       application  [emitted] [dev]        application
         js/hello_react-40e806bdb6de496532d8.js  1.05 MiB       hello_react  [emitted] [immutable]  hello_react
     js/hello_react-40e806bdb6de496532d8.js.map …