javascript - 为什么我收到无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化?
问题描述
我正在尝试将我的应用程序部署到生产环境,但我收到“无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。-配置具有未知属性 'resolvedModules'。这些属性是有效的:“我最近升级到 Rails 6 的最新稳定版 webpacker。我相信它的 webpacker 4。这个错误源于我的 environment.js 文件 - 它正在处理一些关于 JQuery 的小问题 - 在某些情况下无法在全球范围内工作情况。我想,可能是我使用的 gem 规范中的一个错误。在注释掉整个 environment.js 文件后,它部署没有问题。我的环境文件中没有“resolvedModules”配置对象。除非它来自“@rails/webpacker”require 语句。如何将我的 environment.js 文件修复为针对 JQuery 和我的其他依赖项的 ProvidePlugin,同时修复我在部署期间收到的 resolvedModules 错误?
环境.js
const {environment} = require('@rails/webpacker');
const webpack = require('webpack')'
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
moment: 'moment'
}));
environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});
module.exports = environment;
更新
当我使用新更改进行部署时收到以下错误?
DEBUG [4763131a] Compilation failed:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'resolvedModules'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
resolvedModules: …
}
})
]
- configuration.plugins[0] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[1] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[2] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[3] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[4] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[5] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[6] misses the property 'apply'.
function
-> The run point of the plugin, required method.
- configuration.plugins[7] misses the property 'apply'.
function
-> The run point of the plugin, required method.
webpack 整体配置
包.json
{
"name": "sample_app",
"private": true,
"dependencies": {
"@client-side-validations/client-side-validations": "^0.1.1",
"@client-side-validations/simple-form": "^0.1.1",
"@fortawesome/fontawesome-free": "^5.12.1",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/webpacker": "^5.0.0",
"@yaireo/tagify": "yaireo/tagify",
"active_storage_drag_and_drop": "^0.4.1",
"chart.js": "^2.9.3",
"chartkick": "^3.2.0",
"cocoon": "github:nathanvda/cocoon#c24ba53",
"flow-webpack-plugin": "^1.2.0",
"jquery": "^3.4.1",
"jquery-ujs": "latest",
"moment": "^2.24.0",
"owl.carousel": "^2.3.4",
"stimulus": "^1.1.1",
"webpack": "^4.42.1"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.9.0"
}
}
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_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
# 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:
- .erb
- .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
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
生产.js
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
const environment = require('./environment');
module.exports = environment;
解决方案
检查 webpacker 的兼容版本package.json
。我的是..
"dependencies": {
"@rails/webpacker": "5.4.0",
"webpack": "^4.46.0",
},
推荐阅读
- java - Appium 能够看到屏幕上显示的内容之外的内容
- javascript - .map 在功能性 React 组件的返回中不起作用
- html - 为什么我需要指定多个 CSS 类来更改背景颜色?
- view - 在 Drupal 8 的视图块中使用内容 ID 上下文过滤器
- mysql - mysqldump 不适用于全文索引?
- ios - iOS13后Segmented Controller背景灰
- amazon-emr - 在 Airflow EMR 操作员步骤中使用 Json 输入变量
- javascript - MutationObserver 是否观察到跨度的 offsetHeight 属性的变化?
- reactjs - 为什么在反应中被称为动作函数包装在调度内?
- css - 您可以在 sass 中选择样式元素的当前状态吗?