I'm working on a Laravel 5.7 project that has been through a few different developers. Recently one of the devs did an npm update that caused a few issues. I've got most all of those issues cleaned up, but now we are seeing an "o is not a function" error any time we try and access a variable in a vue component. This issue only shows up after an npm run prod. If we do an npm run dev everything works fine and the site looks perfect.
This has been a nightmare to debug since it only shows up in the minified production build. I've tried using a few different versions of npm and some different minor releases of vue. I know it's happening whenever we access a variable because I removed everything except for a #{{ status }} call inside of the component. Without that I get no error and with it I get that "o is not a function" error.
Here are the dependencies in our package.json:
"devDependencies": {
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.6.2",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.15",
"popper.js": "^1.16.1",
"vue": "^2.7.14",
"vue-template-compiler": "^2.7.14"
},
"dependencies": {
"axios-retry": "^3.1.2",
"codemirror": "^5.65.10",
"es6-promise": "^4.2.8",
"inputmask": "^4.0.8",
"mjml": "^4.4.1",
"moment": "^2.24.0",
"npm": "^6.11.2",
"signature_pad": "^3.0.0-beta.3",
"spectrum-colorpicker": "^1.8.0",
"vue-ckeditor2": "^2.1.5",
"vue-markdown": "^2.2.4",
"vue-simplemde": "^1.1.2",
"vue2-dropzone": "^3.6.0",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.6.2"
}
I run into the same problem, so what i did is removing vue-bootstap package
if you changed or updated version of laravel-mix or wabpack restore the inial ones
I'm trying to upgrade my angular 13 NX workspaces to angular 14, but somehow I can't get my jest unit tests to work properly. I tried the following from zero:
Install #angular/cli and nx globally:
npm install --global #angular/cli#latest
npm install --global nx#latest
Open and cmd in a path without spaces
npx create-nx-workspace
> test
> angular
> demo
> scss
Result:
Nx is creating your v13.10.5 workspace
So now I could migrate to the latest NX workspace version
cd test
nx migrate latest
The #angular/cli version is still on 13, so I changed this in the root package.json to 14.0.1 (nx removes the version annotations ~ and ^...)
npm install doesn't work out. jest-preset-angular#11.1.2 requires #angular-devkit/build-angular#">=0.1002.4" while in the workspace this is a dependency fixed at #angular-devkit/build-angular#"14.0.1":
npm ERR! Found: #angular-devkit/build-angular#13.3.7
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"14.0.1" from the root project
npm ERR! peer #angular-devkit/build-angular#">=0.1002.4" from jest-preset-angular#11.1.1
npm ERR! node_modules/jest-preset-angular
npm ERR! dev jest-preset-angular#"11.1.2" from the root project
So I run update instead:
npm update
npx nx migrate --run-migrations
I'm able to run the project
npm start -- --open
Before we can run the command for the unit tests, add the following script under the root package.json scripts section:
{
...,
"scripts: {
...,
"nx": "nx"
}
}
Now I'm unable to run the unit tests:
npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless
FAIL demo apps/demo/src/app/app.component.spec.ts
● Test suite failed to run
Cannot find module '#angular/core/testing' from '../../node_modules/jest-preset-angular/build/config/setup-jest.js'
Require stack:
C:/repos/b/test/node_modules/jest-preset-angular/build/config/setup-jest.js
C:/repos/b/test/node_modules/jest-preset-angular/setup-jest.js
src/test-setup.ts
at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)
Note that the module is definitely installed:
Other Q&A's suggest updating jest-preset-angular, so I did. I changed it to 12.1.0 in the package.json. This requires jest#28.1.1, so changed that too. And ts-jest should be at 28.0.5.
Running npm update succeeds now. But running the unit tests
npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless
now gives the following errors:
ReferenceError: document is not defined
NG0200: Circular dependency in DI detected for TestComponentRenderer. Find more at https://angular.io/errors/NG0200
NG0200: Circular dependency in DI detected for InjectionToken DocumentToken. Find more at https://angular.io/errors/NG0200
...
It litterally suggests the following:
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
So I installed it:
npm i --save-dev jest-environment-jsdom
And updated the root jest.config.js:
module.exports = {
projects: getJestProjects(),
testEnvironment: 'jest-environment-jsdom'
};
This still gives me the same error. I also tried with testEnvironment: 'jsdom' without success. So how can I fix this? Or do I have to wait until the NX developers release a new stable version?
As of today (like just now...) I was able to upgrade to 14.
nx migrate latest
Open the root package.json file
restore the ~ and ^
remove the #angular/eslint packages which are still on 13
manually change #angular/cli to 14.0.0
Then npm update and npx nx migrate --run-migrations were working as expected. You'll see warnings about the tsconfig. You need to open each library's project.json and add
"targets:build:options:tsConfig": "libs/my-lib/tsconfig.lib.json"
The test section doesn't need modifications, it would say that the tsconfig field there is deprecated.
This is my final root package.json
{
"name": "mintplayer-ng-bootstrap",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "nx",
"nx": "nx",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
"start": "nx serve",
"build": "nx build",
"test": "nx test"
},
"private": true,
"dependencies": {
"#angular/animations": "~14.0.2",
"#angular/cdk": "~14.0.1",
"#angular/common": "~14.0.2",
"#angular/compiler": "~14.0.2",
"#angular/core": "~14.0.2",
"#angular/forms": "~14.0.2",
"#angular/platform-browser": "~14.0.2",
"#angular/platform-browser-dynamic": "~14.0.2",
"#angular/router": "~14.0.2",
"#mintplayer/ng-pagination": "~14.0.0",
"#nrwl/angular": "14.3.5",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"ngx-highlightjs": "~6.1.1",
"qrcode": "^1.5.0",
"rxjs": "~7.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~14.0.2",
"#angular/cli": "~14.0.0",
"#angular/compiler-cli": "~14.0.2",
"#angular/language-service": "~14.0.2",
"#nrwl/cli": "14.3.5",
"#nrwl/cypress": "14.3.5",
"#nrwl/eslint-plugin-nx": "14.3.5",
"#nrwl/jest": "14.3.5",
"#nrwl/linter": "14.3.5",
"#nrwl/workspace": "14.3.5",
"#types/jest": "27.4.1",
"#types/node": "16.11.7",
"#types/qrcode": "^1.4.2",
"#typescript-eslint/eslint-plugin": "~5.24.0",
"#typescript-eslint/parser": "~5.24.0",
"cypress": "^9.1.0",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"jest": "27.5.1",
"jest-preset-angular": "11.1.2",
"ng-packagr": "^14.0.2",
"postcss": "^8.4.5",
"postcss-import": "^14.1.0",
"postcss-preset-env": "^7.5.0",
"postcss-url": "^10.1.3",
"prettier": "^2.6.2",
"ts-jest": "27.1.4",
"typescript": "~4.7.3",
"nx": "14.3.5"
}
}
The related project is hosted here
My app runs perfectly in the browser but will not open on Heroku. The build succeeds. When I check the logs tail it says "code: 'MODULE_NOT_FOUND', requireStack: [: '/app/server/node_modules/readable-stream/lib/_stream_readable.js',]
However, in my package.json I have
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#stripe/stripe-js": "^1.29.0",
"are-we-there-yet": "^3.0.0",
"readable-stream": "^3.6.0",
"streams": "^0.0.7"
}
I have also tried removing node_modules and package-lock and reinstalling multiple times. The same application error persists on Heroku. Please help if you can!
My full code repo is here.
This is the logs message
Trying to run parcel index.html
No entries found
at Bundler.bundle()
parcel index.html
Server running at http://localhost:1234
× No entries found.
at Bundler.bundle (file_location of bundler)
This question is over a year old but incase someone is googling this problem and having the same problem like me.
Try to include babel in your package.json and make sure you have a .babelrc file in your project. Mine Looks like this:
.babelrc
{"presets": ["#babel/preset-react", "#babel/preset-env"]}
package.json
"dependencies": {
"#babel/core": "^7.10.5",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"parcel": "^1.12.4",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
Hopefully that works.
More information here if you need it: https://github.com/parcel-bundler/parcel/issues/2095
I have configured WebPack for my application and added webpack-dev-server. It compiles successfully after running and gives me "Project is running at http://localhost:9000/". However, when I try to open it in my browser I get a "This site can't be reached" page with the following error:
ERR_CONNECTION_REFUSED
Any fix suggestions will be greatly appreciated!
Snippets from my package.json file:
"scripts": {
"build": "webpack --config webpack.config.js",
"start:dev": "webpack-dev-server"
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
Snippet from my webpack.config.js file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
For those who might have the same issue, I seem to have found a solution shortly after posting this question. Here it is: link.