We Keep Coding

Running symfony encore to start using vue on symfony 5.3

I'm trying to start using VueJs on my Symfony project using encore and I get this error.
yarn run v1.22.5
warning ........\package.json: No license field
\node_modules.bin\encore dev
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I'm using yarn this is my package.json
{
"devDependencies": {
"#symfony/stimulus-bridge": "^2.0.0",
"#symfony/webpack-encore": "^1.0.0",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"stimulus": "^2.0.0",
"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"
},
"dependencies": {
"vue": "^2.6.14",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14"
}
}

you can try this:
rm -rf vendor/
rm composer.lock
rm -rf node_modules
composer install
php bin/console cache:clear
yarn install
yarn run dev

Laravel: Support for the experimental syntax 'classProperties' isn't currently enabled

In my resource/app.js I require my own written validation script. I get the following warning when compiling (npm run dev) my javascript files.
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /resources/js/myvendor/small-form-validator.js: Support for the experimental syntax 'classProperties' isn't currently enabled (2:13):
My Files:
app.js
require('./bootstrap');
require('./myvendor/small-form-validator');
/resources/js/myvendor/small-form-validator.js
class SmallFormValidator {
errMsgs = {
required: 'This field is required!',
string: 'Not valid string.',
...
My package.json
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0"
}
}
The system complains about the assignment operator ("=" character) after errMsgs = {...}.
Is the problem that I wrote my javascript in Class Style instead of Prototype Style?
Updated
The solution in my case was to create in root an new .babelrc file with the order to load the Babel plugin-proposal-class-properties plugin.
{
"plugins": ["#babel/plugin-proposal-class-properties"]
}
See the correct answear from codedge!

You need to create a .babelrc in the root of your project and add
{
"plugins": ["#babel/plugin-proposal-class-properties"]
}
Then run npm install --save-dev #babel/plugin-proposal-class-properties to install the package and then npm run watch (respectively npm run dev) to compile everything.

Why am I getting an npm missing server error on Vue.js?

I just installed Node.js and Vue.js and created my first project on Vue called test . I am now trying to set up the server by typing on cmd:
npm run server
But I get the following error:
C:\Users\andri\test>npm run server
npm ERR! missing script: server
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\andri\AppData\Roaming\npm-cache\_logs\2019-02-19T09_12_53_961Z-debug.log
Could anyone help me understand what I am missing? I googled a bit around, but have not been able to find a solution so far. I appreciate, any help!
EDIT: This is my package.json file
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.22"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.4.0",
"#vue/cli-service": "^3.4.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

1- type the folowing first
vue add #vue/cli-service
2- add following code to package.json if there were not
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
3- type code ==> npm run serve <=== for serve or type==> npm run build for build <==
npm run serve
or following to build
npm run build
if only doesnt work you just run following and reapeat again
npm install
npm init

Replace npm run server with npm run serve
Explanation
In your package.json under the scripts key you don't have a server script. But you do have a serve one. To run a certain script with npm run it needs to be in scripts inside your package.json

First type in your terminal:
npm install
npm start
npm run serve
I solved my problem this way and it works perfectly on my PC.

Just go to the right directory that contain :
.idea
node_modules
public
src
.
.
.
and then write npm run serve again
Just this

npx ts-lint cannot find module 'typescript' when run in docker

I'm setting up a dockerized dev environment for node/typescript for an api project. The goal is to run everything in docker and not have any of installed node, npm or modules installed on the host. This is to isolate all versions of node and all modules from other projects.
./node
docker run \
-it \
-p "8080:80" \
--rm \
-w "/app" \
-v "$(pwd):/app" \
"node:10" "$#"
./npm
#!/bin/sh
./node npm $#
./npx
#!/bin/sh
./node npx $#
./package.json
{
"name": "testapi",
"version": "0.0.1",
"description": "a hello world api",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "npx ts-node src/app.ts",
"lint": "npx ts-lint --project src $#"
},
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"fastify": "^1.13.2",
"ts-node": "^7.0.1"
},
"devDependencies": {
"#types/node": "^10.12.15",
"ts-lint": "^4.5.1",
"typescript": "^3.2.2"
}
}
[edit]
I use ./npm install to build my node_modules. The node_modules is in a shared volume so it persists on the host after the container is removed. That way I don't need a Dockerfile to build an image.
[/edit]
When I run the lint command, I get the following error:
testapi$ ./npx ts-lint -i
10: Pulling from node
Digest: sha256:5af431757f84bf7878ff72447eb993fc37afcd975874fff13278157bf83661e6
Status: Image is up to date for docker-remote.registry.kroger.com/node:10
npx: installed 32 in 2.883s
Cannot find module 'typescript'
I think this has to do with module resolution, but I don't know this for sure. I see people install typescript globally, but that would mean I have to do a Dockerfile instead of using the stock node image. I don't mind using a Dockerfile for dev, but I think there should be a way to make this work without doing that.

So I figured out the answer. It wasn't obvious, and I stumbled upon it by accident.
I had installed ts-lint (see package.json above), and I saw an example which referenced tslint (without the hyphen).
So I removed ts-lint and installed tslint and it worked like a champ. I'm not sure what the difference is, but the one with the hyphen does not work in my project configuration. Also, the one without the hyphen installed a higher version number than the one with the hyphen.
See my new package.json containing the working dependency:
{
"name": "testapi",
"version": "0.0.1",
"description": "a hello world api",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "npx ts-node src/app.ts",
"lint": "npx tslint --project ./ 'src/**/*.ts?(x)' $#"
},
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"fastify": "^1.13.2",
"ts-node": "^7.0.1"
},
"devDependencies": {
"#types/node": "^10.12.15",
"tslint": "^5.12.0",
"typescript": "^3.2.2"
}
}
This works when run in a docker container, just using the public node:10 image. It doesn't need a Dockerfile to install any global dependencies.

Try
yarn global add tslint typescript
or if it complained for permissions:
sudo yarn global add tslint typescript

NPM build phase of my package not executed during install

I am developing a package to use web workers in a generic way but I am finding some issues when trying to add it as a dependency for another project.
Normally I would expect that having a build script section of my package.json when doing install that it would be automatically called generating the output of the rollup.config.js. But it does not seem to execute anything. Do I have any misunderstanding on how npm build should be working?
If not, there be any other colliding script in package.json that is causing it not to work in the next file example:
{
"name": "web-threads",
"version": "1.0.5",
"description": "generic threads using web workers for the web",
"main": "dist/web-threads.js",
"scripts": {
"build": "rollup -c",
"test": "jest",
"test:dev": "jest --watchAll test/unit",
"test:int": "jest test/integration",
"test:cov": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
"push": "yarn test && git push",
"deploy:major": "yarn version --major",
"deploy:minor": "yarn version --minor",
"deploy:patch": "yarn version --patch",
"deploy:push": "git push && git push --tags",
"preversion": "yarn test"
},
"keywords": [""],
"repository": "",
"author": "",
"license": "MIT",
"private": false,
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-env": "1.7.0",
"babel-preset-stage-0": "6.24.1",
"coveralls": "3.0.2",
"faker": "4.1.0",
"jest": "23.5.0",
"jest-puppeteer": "3.3.1",
"puppeteer": "1.7.0",
"rollup": "0.65.0",
"rollup-plugin-babel": "3.0.7",
"rollup-plugin-uglify": "4.0.0",
"uglify-es": "3.3.9"
},
"babel": {
"presets": ["env","stage-0"]
},
"jest": {
"testMatch": [
"**/test/**/*-test.js"
],
"transform": {
"^.+\\.jsx|.js?$": "babel-jest"
}
}
}
I also moved the dependencies to not be devDependencies but it didn't help solving the issue.
NPM build documentation: https://docs.npmjs.com/cli/build

You could try adding a postinstall script.
As documented in the npm docs
postinstall: Run AFTER the package is installed.

So the answer of #Olian04 send me in the right direction and dig a bit on the documentation. Indeed I had a misunderstanding regarding build as it is actually not a script but just a hook to the process stage.
So seems the correct way of solving the compilation required in packages is a different process run by prepare. This is a script that documentation defines as:
For build steps that are not platform-specific, such as compiling CoffeeScript or other languages to JavaScript, use the prepare script to do this, and make the required package a devDependency.
The prepare script will be run before publishing so that users can consume the functionality without requiring them to compile it themselves. In dev mode (ie, locally running npm install), it'll run this script as well, so that you can test it easily.
Example:
{ "name": "web-threads",
"description": "a delightfully fruity coffee varietal",
"version": "1.2.3",
"devDependencies": {
"coffee-script": "~1.6.3"
},
"scripts": {
"prepare": "coffee -o lib/ -c src/waza.coffee"
},
"main": "lib/waza.js"
}
As a summary use postinstall for things that need to happen locally to the installing computer/platform (but it will require all dependencies to be satisfied). Use prepare for process that are not platform dependant this will not require the user to have all the tools to trnspile the package and you will also not polute your repository.