Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. #914
Comments
|
Can you share your |
|
Yes, this is my webpack.config.js : var Encore = require('@symfony/webpack-encore');
var dotenv = require("dotenv");
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
// Sylvia
.addEntry("app", "./assets/app/app.js")
// Manuels
.copyFiles({
from: "./assets/app/files/manuels",
to: "files/manuels/[path][name].[hash:8].[ext]",
})
// Bootswatch
// .addEntry("bootswatch/flatly", "./assets/bootswatch/flatly/flatly.js")
// .addEntry("bootswatch/minty", "./assets/bootswatch/minty/minty.js")
// Components
.addEntry("components", "./assets/components/components.js")
// Mailer
.addStyleEntry("email", "./assets/email/email.scss")
.copyFiles({
from: "./assets/email/images",
to: "images/[path][name].[hash:8].[ext]",
})
// Libraries
.addEntry("lib", "./assets/lib/lib.js")
// Sidebar
.addEntry("sidebar", "./assets/sidebar/sidebar.js")
// Stripe
// .addEntry("stripe", "./assets/stripe/stripe.js")
// Stripe admin
.addEntry("stripe_admin", "./assets/stripe/admin/stripe_admin.js")
// Stripe client
.addEntry("stripe_client", "./assets/stripe/client/stripe_client.js")
// Login
.addEntry("login", "./assets/app/login/login.js")
// Website
.addEntry("website", "./assets/gaas/main.js")
//Website admin
.addEntry("website_admin", "./assets/gaas/admin/main.js")
.copyFiles({
from: "./assets/gaas/img",
to: "gaas/img/[path][name].[hash:8].[ext]",
})
// Maintenance
.addStyleEntry("maintenance", "./assets/maintenance/maintenance.scss")
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
//.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
.configureDefinePlugin((options) => {
const env = dotenv.config();
if (env.error) {
throw env.error;
}
options["process.env"].ALGOLIA_API_KEY = JSON.stringify(
env.parsed.ALGOLIA_API_KEY
);
options["process.env"].ALGOLIA_ID = JSON.stringify(env.parsed.ALGOLIA_ID);
options['process.env'].STRIPE_PUBLIC_KEY = JSON.stringify(env.parsed.STRIPE_PUBLIC_KEY);
});
module.exports = Encore.getWebpackConfig(); |
|
It seems that you are using an old version of Webpack, could you also show the content of your |
|
Yes of course : {
"devDependencies": {
"@symfony/stimulus-bridge": "^2.0.0",
"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
"@symfony/webpack-encore": "^1.0.4",
"core-js": "^3.8.3",
"regenerator-runtime": "^0.13.2",
"sass-loader": "^9.0.3",
"stimulus": "^2.0.0",
"webpack-notifier": "^1.13.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"@fullcalendar/core": "^4.4.2",
"@fullcalendar/daygrid": "^4.4.2",
"@fullcalendar/interaction": "^4.4.2",
"@fullcalendar/list": "^4.4.2",
"@fullcalendar/timegrid": "^4.4.2",
"@ttskch/select2-bootstrap4-theme": "^1.5.2",
"ajaxchimp": "^1.3.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-input-spinner": "^1.17.2",
"bootswatch": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"chart.js": "^2.9.3",
"counterup": "^1.0.2",
"dotenv": "^8.2.0",
"file-loader": "^6.2.0",
"flat-icons": "^1.0.0",
"flatpickr": "^4.6.9",
"font-awesome": "^4.7.0",
"foundation-emails": "^2.3.1",
"gasparesganga-jquery-loading-overlay": "^2.1.7",
"gmaps": "^0.4.25",
"intro.js": "^3.2.1",
"isotope-layout": "^3.0.6",
"jodit": "^3.5.4",
"jquery": "^3.5.1",
"jquery-form": "^4.3.0",
"jquery-mousewheel": "^3.1.13",
"jquery-nice-select": "^1.1.0",
"jquery-parallax": "^1.0.1",
"jquery-slimscroll": "^1.3.8",
"jquery-ui-sortable": "^1.0.0",
"jquery.stellar": "^0.6.2",
"linearicons": "^1.0.2",
"magnific-popup": "^1.1.0",
"moment": "^2.29.0",
"node-sass": "^4.14.0",
"owl.carousel": "^2.3.4",
"perfect-scrollbar": "^1.5.0",
"places.js": "^1.19.0",
"popper.js": "^1.16.1",
"select2": "^4.0.13",
"sweetalert2": "^10.14.0",
"symfony-collection": "^2.1",
"toastr": "^2.1.4",
"webpack-jquery-ui": "^2.0.1"
}
} |
|
That's it I just solved the problem, I don't really know by what miracle. In fact I created a new project, and installed the dependencies. Then I saw in the package.json that these versions were needed: "devDependencies": {
"@symfony/stimulus-bridge": "^2.0.0",
"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
"@symfony/webpack-encore": "^1.0.0",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"sass": "^1.32.6",
"sass-loader": "^10.1.1",
"stimulus": "^2.0.0",
"webpack-notifier": "^1.6.0"
},There are some that did not match my own project's package.json : "devDependencies": {
"@symfony/stimulus-bridge": "^2.0.0",
"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
"@symfony/webpack-encore": "^1.0.4",
"core-js": "^3.8.3",
"regenerator-runtime": "^0.13.2",
"sass-loader": "^9.0.3",
"stimulus": "^2.0.0",
"webpack-notifier": "^1.13.0"
},So I just replaced the devDependencies with those from the new project. Then I ran npm install then npm update, and everything works! But was the problem really there? |
|
Apart from My guess is that when you updated |
|
On the other hand, thing to note, when I run npm install --force, I had this warning:
It happened on the new project that I had just created. And I got the same error on my own project when I finally ran "npm update" |
|
Hmm, I wonder if the fact that Until now, I thought that (apart from a warning), that this was harmless, but it seems that it's not! |
I don't think that's the case, peer dependencies are not installed unless you add them yourself. I checked the content of the |
|
Hmm, so maybe what we're seeing in the screenshot above is just npm's version of yarn's "missing peer dependency" warning. @bastien70 is your project working now (other than this warning)? |
Yes everything seems to be working for the moment. I always have the warning mentioned above, every However, it has happened to me, rarely, for no reason, that the 'npm run dev' gave me an error (I didn't think of raising it, sorry), and that I had to run On the other hand, a remark. The way we have to manage the copies of images have changed? In the old days I would require the image in my js file and compiling it the image was automatically placed in For example, if in our app.js file we import a
While proceeding from webpack with : .copyFiles({
from: './assets/app/images',
to: 'images/[path][name].[hash:8].[ext]',
pattern: /\.(png|jpg|jpeg)$/
})The manifest.json will correctly reference the image to In the past I hadn't noticed this change because my images were cached. It's since the webpack update that I noticed that if I wanted to keep a consistent path if I called my images from Twig, I had to copy the images from webpack. Is this a recent change? Am I totally missing the point? |
Yes, images are run through the new "asset modules" system - https://webpack.js.org/guides/asset-modules/ - but copyFiles() does not do that. The path change sounds like something that wasn't intended. |
|
@bastien70 could you try my fork on #921 (instructions included there) to see if it fixes your Thanks! |
|
Hey @weaverryan ! I have tried this. Are you asking me to run the two commands described on my project to check my problem above? If so, then here are the results of this test: I first tested on a very recent project. I updated the dependencies first before placing your orders. Everything went well. However, at the time of run
So I created a brand new project to test. Everything went well. When running It's much better ! I had put an image in After compilation, here is what the {
"build/app.css": "/build/app.css",
"build/app.js": "/build/app.js",
"build/runtime.js": "/build/runtime.js",
"build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-28f194.js": "/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-28f194.js",
"build/assets/images/myImage.jpg": "/build/images/myImage.a375e619.jpg"
} |
…fest-plugin fix) (weaverryan) This PR was squashed before being merged into the main branch. Discussion ---------- Fixing manifest paths (by temporarily embedding webpack-manifest-plugin fix) This temporarily embeds shellscape/webpack-manifest-plugin#249, which fixes #907 and also a comment on #914 (comment) To test this: ``` $ yarn remove @symfony/webpack-encore $ yarn add git://github.com/weaverryan/webpack-encore.git#try-manifest-fix ``` Please let me know if this does or doesn't fix your `manifest.json` file. I'm also interested in hearing from Windows users, as the fix requires some "path" manipulation. Thanks! Commits ------- b81428d Fixing manifest paths (by temporarily embedding webpack-manifest-plugin fix)
|
Hey @bastien70! Please try version 1.0.6 and let me know if you have any more issues. Btw, the first error above - about "Invalid configuration object" - is your project, once again (somehow) reverting back to Webpack 4 :/. Fun(ish) fact, in fixing this manifest.json issue, I was delayed a few days with a Windows+npm bug where it would not resolve some dependencies correctly. Your probably not hitting the same thing, but it's interesting that npm isn't behaving correctly for you also. Cheers! |
|
Hi! I'm running into this exact same issue. Error Webpack Config Package.json When I install Webpack("webpack": "^5.24.2") as a dev dependency the build is successful. After this install, I get the following error: |
|
This solved my problem: |
|
Here is how I fixed the problem. Run my_project@ /home/me_user/Projects/my_project_files Two different versions of webpack are listed. npm couldn't resolve the conflict and used both (?). To resolve the conflict, use this list and uninstall all of the packages that depend on webpack. From above, for me, these included @symfony/webpack-encore@1.6.1; dotenv-flow-webpack@1.1.0; sass-loader@10.2.0; and workbox-webpack-plugin@6.3.0. For you, it will be different, but probably the encore will have the most dependencies. Whatever you do, MAKE SURE YOU KEEP A LIST OF THESE PACKAGES!!! After doing this, make sure you no longer have webpack installed anywhere by running the my_project@ /home/me_user/Projects/my_project_files Then install webpack with my_project@ /home/me_user/Projects/my_project_files Then reinstall all the packages you removed. All of the packages accepted the latest version of webpack except one: dotenv-flow-webpack@1.1.0. For that I ran my_project@ /home/me_user/Projects/my_project_files npm ERR! code ELSPROBLEMS npm ERR! A complete log of this run can be found in: Again, those errors came from forcing dotenv-flow-webpack to use version 5 of webpack. However, it still worked fine (so far...). UPDATE: In my case, a version of webpack is built in with @symfony/webpack-encore. If you install webpack separately it will conflict with the version that is installed with @symfony/webpack-encore. In this case, simply install @symfony/webpack-encore FIRST before installing all the other packages that require webpack. When you do this, npm will use @symfony/webpack-encore's version of webpack for the other packages. AGAIN, use the force command as indicated above for any packages that may require an older version of webpack. It might work. If it doesn't, then try to find a substitute that will work with the later version of webpack. |
|
Here is a great tool to make configuring your Webpack easy. Enjoy playing with it! |
|
@
Hi Could you help me how I can uninstall all dependencing larav_API@ C:\Laravel\larav_API I have used NPM uninstall |
|
This solved my problem: |
|
Sorry to say, but IMHO this isn't solved yet. lib/config-generator.js line 252 defines the property "assetModuleFilename" which is stated as "invalid config object". |
|
I having this issue, I am doing a course on developing creative website from scratch without using any frameworks and following the instructors code but he is using Can someone please help tell what's wrong with my webpack.config file?
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.node should be one of these:
false | object { __dirname?, __filename?, global? }
-> Include polyfills or mocks for various node stuff.
Details:
* configuration.node should be false.
* configuration.node should be an object:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.here is my const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev'
const dirApp = path.join(__dirname, 'src')
const dirShared = path.join(__dirname, 'shared')
const dirStyles = path.join(__dirname, 'styles')
const dirNode = 'node_modules'
module.exports = {
node: false,
entry: [
path.join(dirApp, 'index.js'),
path.join(dirStyles, 'index.scss')
],
// https://webpack.js.org/configuration/resolve/
resolve: {
modules: [
dirApp,
dirShared,
dirStyles,
dirNode
],
},
plugins: [
new webpack.DefinePlugin({
// Definitions...
IS_DEVELOPMENT
}),
new CopyWebpackPlugin({
patterns: [
{
from: './shared',
to: ''
}
]
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 1 }]
],
},
},
}),
new NodePolyfillPlugin(),
],
module: {
rules: [
{
// regular expression
test: /\.js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
name (file) {
return '[contenthash].[ext]'
}
}
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: [
{
loader: ImageMinimizerPlugin.loader,
options: {
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
],
},
},
},
},
],
},
]
}
}
{
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack --progress --config webpack.config.build.js",
"development": "webpack serve --progress --config webpack.config.development.js",
"start": "npm run development"
},
"devDependencies": {
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"image-minimizer-webpack-plugin": "^3.8.1",
"imagemin": "^8.0.1",
"mini-css-extract-plugin": "^2.7.2",
"node-polyfill-webpack-plugin": "^2.0.1",
"postcss-loader": "^7.0.2",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
}
} |
|
Worked for me after deleting |
|
thanks @tonybob-tl Found it was loading v4 and v5 of webpack Moving to |
Hello, I tried to upgrade webpack-encore on a Symfony 5.3 project
I followed the doc well, and upgraded webpack-encore and stimulus. I also modified the controllers.json as shown.
But when I try the npm run dev command, I have the following error:
I tried modifying my webpack.config.js leaving only the bare minimum to see if it came from that. But the problem persists so I don't understand where it came from
The text was updated successfully, but these errors were encountered: