I have a symfony 4 project using webpack. When I run:
yarn encore dev --watch
it cleans the directory and delete the symbolic link.
I want to preserve the symbolic link, because a background process is writing on it files.
The symb link is created using:
ln -s /dev/shm/mpeg-dash /public/build/video
This is my webpack.config.js:
var webpack = require('webpack');
var Encore = require('#symfony/webpack-encore');
var CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
//the project directory where compiled assets will be stored
.setOutputPath('public/build/')
//the public path used by the web server to access the previous directory
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
//uncomment to define the assets of the project
.createSharedEntry('js/app', './assets/js/app.js')
.addEntry('js/profile', './assets/js/profile.js')
.addEntry('js/users', './assets/js/users-list.js')
.addEntry('js/blacklist', './assets/js/blacklist-index.js')
.addEntry('js/mailaddress', './assets/js/mailaddress.js')
.addEntry('js/vehicles', './assets/js/vehicles.js')
.addEntry('js/vehicles-form', './assets/js/vehicles-form.js')
.addEntry('js/vehicles-import', './assets/js/import-vehicles.js')
.addEntry('js/devices', './assets/js/devices.js')
.addEntry('js/devices-form', './assets/js/devices-form.js')
.addEntry('js/devices-show', './assets/js/devices-show.js')
.addEntry('js/detections', './assets/js/detections.js')
.addEntry('js/atex_vehicle', './assets/js/atex_vehicle.js')
.addEntry('js/atex_driver', './assets/js/atex_driver.js')
.addEntry('js/fdv', './assets/js/fdv-index.js')
.addEntry('js/statistics', './assets/js/statistics.js')
.addEntry('js/translation-overview', './assets/js/translation-overview.js')
.addEntry('js/grid', './assets/js/grid.js')
.addStyleEntry('css/app', './assets/css/app.scss')
.addStyleEntry('css/flags', './assets/css/flags.css')
.addPlugin(new CopyWebpackPlugin([
{from: './assets/images', to: 'images'},
{from: './assets/fonts', to: 'fonts'},
{from: '././assets/js/jsmpeg.min.js', to: 'js/jsmpeg.min.js'},
{from: '././assets/files/import', to: 'files/import'}
]))
.addPlugin(new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/))
//uncomment if you use Sass/SCSS files
.enableSassLoader()
//uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery();
var config = Encore.getWebpackConfig();
module.exports = config;
How can I avoid deleting this symbolic link.
Thanks.
I got with the solution with this code:
.cleanupOutputBeforeBuild(['css/*', 'js/*', 'entrypoints.json', 'manifest.js', 'manifest.json'], (options) => {
options.verbose = true;
options.exclude = ['public/build/video/*'];
return options;
})
.cleanupOutputBeforeBuild(['**/*', '!video', '!video/**/*'])
Related
I have Git-pulled a symfony 5 project that works fine on the computer it was created, to pick it up on an new workstation. But when I launch my app, I get errors about the requested routes not existing. I also get an error when running "yarn encore dev".
Does anyone know what I missed ?
After git pulling, I've run :
symfony server:ca:install
composer install
yarn add --dev #symfony/webpack-encore
yarn add webpack-notifier --dev
yarn encore dev
The last command fails with that :
yarn encore dev
yarn run v1.22.19
$ C:\Users\Elyss\Documents\GitHub\NewFormadil\deux\Formadil\node_modules\.bin\encore dev
Running webpack ...
ERROR Failed to compile with 3 errors 15:10:13
Module build failed: Module not found:
"./assets/app.js" contains a reference to the file "bootstrap-star-rating".
This file can not be found, please check it for typos or update it if the file got moved.
"./assets/app.js" contains a reference to the file "bootstrap-star-rating/css/star-rating.css".
This file can not be found, please check it for typos or update it if the file got moved.
"./assets/app.js" contains a reference to the file "bootstrap-star-rating/themes/krajee-svg/theme.css".
This file can not be found, please check it for typos or update it if the file got moved.
Entrypoint app [big] 1.92 MiB = runtime.js 14.6 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_bootstrap_dist_js_boo-43ff9a.js 1.88 MiB app.css 395 bytes app.js 21.8 KiB
webpack compiled with 3 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
If I try and symfony:serve anyway, I get the following symfony error, although the route does exist and works fine on the original install :
RouteNotFoundException
RuntimeError
HTTP 500 Internal Server Error
An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "login" as such route does not exist.").
I've tried a "yarn upgrade", clearing caches and bunch of other ways to get everything up to date, but with no success.
Here is the webpack.config.js:
const Encore = require('#symfony/webpack-encore');
// 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.
*/
.addEntry('app', './assets/app.js')
// 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()
;
module.exports = Encore.getWebpackConfig();
And the package.json:
{
"devDependencies": {
"#hotwired/stimulus": "^3.0.0",
"#popperjs/core": "^2.11.4",
"#symfony/stimulus-bridge": "^3.0.0",
"#symfony/webpack-encore": "^1.8.1",
"bootstrap": "^5.1.3",
"core-js": "^3.0.0",
"jquery": "^3.6.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.15.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.4",
"autoprefixer": "^10.4.2",
"chart.js": "^3.7.0",
"composer": "^4.1.0",
"postcss-loader": "^6.2.1",
"sass": "^1.48.0",
"sass-loader": "^12.4.0",
"scoop": "^0.0.2"
}
}
I am currently working on a website using symfony and i use webpack to compile the CSS and JS. When i try npm run watch, i get the following :
TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (C:\Users\Louis\desktop\NEWPLANTE-2\node_modules\webpack\lib\NormalModule.js:227:10)
at C:\Users\Louis\desktop\NEWPLANTE-2\node_modules\#symfony\webpack-encore\lib\webpack-manifest-plugin\index.js:56:24
at _next46 (eval at create (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:50:1)
at _next24 (eval at create (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:97:1)
at _next2 (eval at create (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:144:1)
at Hook.eval [as call] (eval at create (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:152:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\webpack\lib\Compiler.js:1122:26)
at C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\webpack\lib\Compiler.js:1166:29
at Hook.eval [as callAsync] (eval at create (C:\Users\Louis\Desktop\NEWPLANTE-2\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
I already checked, webpack is installed only once so there is no duplicate.
I tried several times deleting package.json, package-lock.json and node_modules and re running npm install But i still got the same error when running npm run watch.
Node and npm are already up to date so it should not be an update problem.
PS C:\Users\Louis\desktop\NEWPLANTE-2> npm -v
8.13.2
PS C:\Users\Louis\desktop\NEWPLANTE-2> node -v
v16.14.2
Here is the content of my package.json file
{
"devDependencies": {
"#hotwired/stimulus": "^3.0.0",
"#symfony/stimulus-bridge": "^3.0.0",
"#symfony/webpack-encore": "^1.8.1",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
Im not the only member in this project, i have checked with my teammates, the npm run watch is working for them. I am not sure why mine is not working although we have the same code and the same files.
Here is the content of webpack.config.js
const Encore = require("#symfony/webpack-encore");
// 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.
*/
.addEntry("app", "./assets/app.js")
.addEntry("homepage", "./assets/homepage.js")
.addEntry("about", "./assets/about.js")
.addEntry("annonce", "./assets/annonce.js")
.addEntry("contact", "./assets/contact.js")
.addEntry("faq", "./assets/faq.js")
.addEntry("mentions", "./assets/mentions.js")
.addEntry("signup", "./assets/signup.js")
.addEntry("profil", "./assets/profil.js")
.addEntry("createAnnonce", "./assets/createAnnonce.js")
.addEntry("signup2", "./assets/signup2.js")
.addEntry("validation", "./assets/validation.js")
.addEntry("cgu", "./assets/cgu.js")
.addEntry("error404", "./assets/error404.js")
.addEntry("login", "./assets/login.js")
.addEntry("payment", "./assets/payment.js")
.addEntry("recap", "./assets/recap.js")
.addEntry("verify", "./assets/verify.js")
.addEntry("errors", "./assets/errors.js")
// .splitEntryChunks()
// 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()
module.exports = Encore.getWebpackConfig();
I'm using Symfony 5 and copy-webpack-plugin. I would like copy this structure from assets/fonts to public/build/fonts :
assets
----fonts
--------folder1
------------subFolder1.1
----------------file1.1.1
----------------file1.1.2
------------file1.2
------------file1.3
--------folder2
------------subFolder2.1
----------------file2.1.1
----------------file2.1.2
------------file2.2
------------file2.3
--------file3
--------file4
I have this webpack configuration :
const CopyWebpackPlugin = require('copy-webpack-plugin');
.addPlugin(new CopyWebpackPlugin(
[{
patterns: [{
from: '**/*.*',
to: 'fonts',
context: './fonts',
force: true
}]
}],
{
copyUnmodified: true
}
))
However, it doesn't work. I tried a lot of different configurations, to no avail.
I'm trying to move from Assetic to Webpack but it seems quite tricky.
I have 6 different JS entries, containing different files.
I'm running "yarn encore dev":
Problem 1: I get "ERROR Failed to compile with 0 errors" - BUT it does seem to compile.
Problem 2: All compiled entries are almost identical (same size) except the first one. All that change is the filename written inside the file.
Maybe it's not really compiling in fact, then how could I fix the "Failed to compile with 0 errors" error?
My webpack.config.js:
let Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.setManifestKeyPrefix('build/')
//-- this one is well-compiled (I think)
.addEntry('app-vendors', './assets/app-vendors.js')
//-- those ones are all identical
.addEntry('app-classes', './assets/app-classes.js')
.addEntry('markable-maps-classes', './assets/markable-maps-classes.js')
.addEntry('markable-maps-vendors', './assets/markable-maps-vendors.js')
.addEntry('calendar-vendors', './assets/calendar-vendors.js')
.addEntry('calendar-classes', './assets/calendar-classes.js')
.enableSingleRuntimeChunk()
;
var config = Encore.getWebpackConfig();
config.node = { fs: 'empty' };
module.exports = config;
app-classes.js
let files = [
'classes/Foldable.js',
'classes/HorizontalPlanning.js',
'classes/PlanningWorkTimes.js',
'classes/AttachmentsList.js',
'classes/CameraModal.js',
'classes/Affair.js',
'classes/AffairStepsFinancialInfos.js',
'classes/Forms.js',
'classes/NewEventContextMenu.js',
'classes/GroupAction.js',
'classes/AuthRights.js',
'functions.js',
'init.js'
];
for (let file of files)
require('../web/js/Business/' + file);
calendar-classes.js
let files = [
'classes/Calendars/BaseCalendar.js',
'classes/Calendars/SingleCalendar.js',
'classes/Calendars/SyncCalendars.js',
'classes/Calendars/EmployeesSyncCalendars.js',
'classes/Calendars/Planning.js',
'classes/Calendars/RoomsSyncCalendars.js',
];
for (let file of files)
require('../web/js/Business/' + file);
calendar-vendors.js
let files = [
'fullcalendar/fullcalendar.js',
'fullcalendar/locale/fr.js',
];
for (let file of files)
require('../web/js/Business/' + file);
Command output:
$ yarn encore dev
yarn run v1.16.0
$ '/Volumes/Macintosh HD Data/Users/theredled/Sites/qualispace/deploy/node_modules/.bin/encore' dev
Running webpack ...
ERROR Failed to compile with 0 errors 17:11:12
Entrypoint app-vendors [big] = app-vendors.css app-vendors.js
Entrypoint app-classes [big] = app-classes.js
Entrypoint markable-maps-classes [big] = markable-maps-classes.js
Entrypoint markable-maps-vendors [big] = markable-maps-vendors.js
Entrypoint calendar-vendors [big] = calendar-vendors.js
Entrypoint calendar-classes [big] = calendar-classes.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
using gurunt syncall, I want to dynamically sync every dir(and new dir created in the futrue) in project root except 'node_modules' dir to another dir.
using grunt watchall, I want to watch those dirs, when there are some changes in a dir, I want to automaticlly run the corresponding sync task.
here is my project root's structure:
├── Gruntfile.js
├── addon1
│ └── a.toc
├── adon3
│ └── 3.toc
├── node_modules
│ ├── grunt
│ ├── grunt-contrib-watch
│ └── grunt-sync
└── package.json
the grunt syncall command is ok, here is the result:
➜ testsync grunt syncall
Running "config" task
Running "sync:addon1" (sync) task
Running "sync:adon3" (sync) task
Done, without errors.
but the grunt watchall not ok. can you tell me why watchall tasks not work and how to fix it?
I start the command, and change and save the file '3.toc' in dir 'adon3', then grunt say:
➜ testsync grunt watchall
Running "config" task
Running "watch" task
Waiting...
>> File "adon3/3.toc" changed.
Running "sync:adon3" (sync) task
Verifying property sync.adon3 exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sync.adon3" missing. Use --force to continue.
Aborted due to warnings.
here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({});
var destdir = "/Users/morrxy/project/testdest/";
// dynamic config sync and watch's targets for every dir except for node_modules
grunt.registerTask('config', 'config sync and watch', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config sync's targets
var sync = grunt.config.get('sync') || {};
sync[dir] = {
files: [{
cwd: dir,
src: '**',
dest: destdir + dir
}]
};
grunt.config.set('sync', sync);
// config watch's target
var watch = grunt.config.get('watch') || {};
watch[dir] = {
files: dir + '/**/*',
// is next line has problem?
// running 'grunt watchall'
// when I change and save the file '3.toc' in dir 'adon3', terminal say:
// >> File "adon3/3.toc" changed.
// Running "sync:adon3" (sync) task
// Verifying property sync.adon3 exists in config...ERROR
// >> Unable to process task.
// Warning: Required config property "sync.adon3" missing.
// but why 'grunt syncall' can work?
tasks: 'sync:' + dir
};
grunt.config.set('watch', watch);
});
});
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('syncall', ['config', 'sync']);
grunt.registerTask('watchall', ['config', 'watch']);
};
Finally, I solved this problem. I add a github repo for this question. If you want test, you can clone it run it locally. https://github.com/morrxy/dynasync
The reason watchall can watch files changes but can't run the corresponding sync task is that when watch find files changed, the config for each sync is finnished running, so the config for that sync target is gone, we didn't save the running config any where. So to solve this problem, we could add the config task into the watch task before the sync task, like this tasks: ['config_sync', 'sync:' + dir].
in new Gruntfile.js, I split the config task to two task, one for config watch, one for config sync, in the watch task, using the config sync task. Here is the new Gruntfile.js
module.exports = function(grunt) {
var destdir = "/media/data/projects/dynasync_dest/";
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
// dynamic config sync's targets for every dir except for node_modules
grunt.registerTask('config_sync', 'dynamically config sync', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config this dir's sync target
var sync = grunt.config.get('sync') || {};
sync[dir] = {
files: [{
cwd: dir,
src: '**/*',
dest: destdir + dir
}]
};
grunt.config.set('sync', sync);
});
});
// dynamic config watch's targets for every dir except for node_modules
grunt.registerTask('config_watch', 'dynamically config watch', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config this dir's watch target
var watch = grunt.config.get('watch') || {};
watch[dir] = {
files: dir + '/**/*',
// this line solve the problem
// when find file change, first dynamically config sync and then sync the dir
tasks: ['config_sync', 'sync:' + dir]
};
grunt.config.set('watch', watch);
});
});
grunt.registerTask('syncall', ['config_sync', 'sync']);
grunt.registerTask('watchall', ['config_watch', 'watch']);
grunt.registerTask('default', ['watchall']);
};
This time, when watch find file changes, it can run the corresponding sync task. like this
grunt watchall
Running "config_watch" task
Running "watch" task
Waiting...
>> File "adon3/3.toc" changed.
Running "config_sync" task
Running "sync:adon3" (sync) task
Done, without errors.
Completed in 0.888s at Thu Apr 10 2014 14:01:26 GMT+0800 (CST) - Waiting...