webpack-notifier | webpack node-notifier build status system | Notification library

I am having difficulties loading Bootstrap's js with Symfony 5, encore, stimulus etc...

jquery, popper, corejs, etc all installed and at least jquery is working...

app.scss and app.js seems to compile well using sass, postcss and babel, including Bootstrap's CSS. Just Bootstrap's JS is not there, so no dropdowns, etc.

assets/app.js

I have just acquired a new mac with M1 chip and I wonder if the error is related to this, because on my old one I have no problem.

When we are trying to update our Angular 9 application(Single SPA micro frontend) to Angular 12 we are facing bellow issue.

Error on console when trying to run this app:

I was in webpack Version 5.40.0

In one of my script, i use computed variable name to make promise with async/await /import.. in a stimulus controller

It was working fine. Today when i update my dependency and add webpack to last version : 5.52.1, the build fail with an error on the first [ in this line : this.['module' + datagridshortName[i]]

'Syntax Error: Unexpected token' on the bracket.

So how to use computed name variable in webpack encore now ??

I just got back to webpack 5.40 and the code work.

Thanks for your explanations / help :)

My code :

I have a vue3/symfony project and i started implementing typescript but i came across an issue that i cannot solve. For building assets i'm using webpack encore and when i start the watcher the assets are compiled just fine, but when i change anything in my .vue files ( even adding a blank space to force webpack to recompile ) i get this error:

TS2614: Module '"resources/ts/helpers"' has no exported member 'TestClass'. Did you mean to use 'import TestClass from "resources/ts/helpers"' instead?

TS2339: Property '__file' does not exist on type '{}'.

Important notes: if i do any kind of change ( even a blank space ) on the helper.ts the compilation is again succesfully.

This only happens to .ts files imported into .vue files. The .js or .vue(with or without typescript) files that i've imported are fine

helpers.ts:

I am using Webpack 5 to build a static HTML boilerplate. Everything works fine, Webpack is compiled successfully and browser is updated whenever I make change to HTML, SCSS/CSS or JS file in my source code.

The problem happens if there is error in the code, WDS will stop working and browser will display an error message in the console, for example:

Even after I fix the error and Webpack says that it is compiled successfully, WDS still does not work and the browser keeps stuck at the error. I have to reload the browser manually to make it work again.

Can anyone please help me? What should I do to make browser updated again after error is fixed?

I found the same question webpack-dev-server stops compiling after a syntax error, requires restart, but there is no proper answer to it so I have to ask another one.

This is my webpack.common.js:

I am currently stuck at the Encore/Webpack installation. I followed the steps at symfony.com. But when continuing to the simple example I got stuck at running yarn encore dev. I get the error: "Command "encore" not found". I also have an error when running symfony server:start after installing Encore and navigating to a view:

An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file "path/entrypoints.json" does not exist.").

As far as I know the entrypoints.json should have been autogenerated. I have Yarn 1.22.10 and NodeJS 14.16.1.

I executed the commands composer require symfony/webpack-encore-bundle and yarn install

1. I looked at StackOveflow questions 'error Command "encore" not found.' when running 'yarn run encore' in Symfony4, webpack encore dev-server not found /, Error Command "encore" not found. (separate backend webpack), Can't run encore dev
2. I executed the command composer require webpack
3. I noticed my package.json doesn't have a scripts object where the command encore dev is supposed to be living. I watched a YouTube video and followed it (https://youtu.be/Fs_4FMoSO90). That's why I know this. I wonder why I don't have it. Below is the package.json from the video. My package.json only has the dev dependency Bootstrap.
4. Executed npm install

Package.json from video:

1. I am working with ngb-datepicker which is working fine if no initial values or predefined values are set but when trying to use it formControlName or with [(ngModel)] with an existing predefined value the predefined or initial value is not setting on the redenied view. Imagine this as a scenario of editing a form or record with prefilled values. Other formControls with text and numbers are working as intended.
2. I am using NgbStruct Model but still not working.
3. I tried and debugged the code the value are getting assigned to the form control in a patchValue method and in the format of NgbStruct but not seen in the rendered view
4. I tried to implement similar scenario in example provided in stack blitz by ng-bootstrap it is working fine there

Package.json file

I have 1 app using the vue pwa plugin, it works great.

The vuejs config for the app looks like this: