Node Sass does not yet support Windows 64-bit - node.js

I am running protractor UI automation project and try to run test with yarn test and received following build error
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime
I am on Windows 10 (64). below are the related entries in package.json
"sass-lint": "^1.10.2",
"sass-loader": "6.0.6",
"sasslint-webpack-plugin": "^1.0.4",
"node-sass": "^4.0.0"
npm - 5.6.0
node - v9.11.1
yarn - 1.5.1
{
"name": "Avatarwebapps",
"version": "3.0.0",
"description": "Avatar Apps",
"private": true,
"author": "Avatar DST",
"sasslintConfig": ".sass-lint.yml",
"contributors": [
"Brian Kinch<brian.finch#Avatar.com.au>"
],
"repository": {
"type": "git",
"url": "https://github.com/Avatartest/Avatar.Digital.Apps.git"
},
"bugs": {
"url": "https://Avatartest.atlassian.net/"
},
"scripts": {
"clean": "rimraf node_modules",
"docs": "typedoc --options typedoc.json src/app/app.component.ts",
"e2e": "protractor protractor.e2e.conf.js --params.environment",
"smoke": "protractor protractor.smoke.conf.js --params.environment",
"css:local:test": "cd backstop/development/maui && backstop test",
"css:local:approve": "cd backstop/development/maui && backstop approve",
"extractCustomer": "node extractCustomer.js",
"lint:ts:fix": "tslint -p tsconfig.json -c tslint.json --fix",
"lint:ts": "tslint -p tsconfig.json -c tslint.json",
"lint:sass": "sass-lint -v",
"lint:cpd": "rimraf reports/cpd && mkdir reports/cpd && jscpd -o reports/cpd/report.json -l 20 --limit 10 > reports/cpd/report.txt",
"postinstall": "yarn webdriver:update && npm rebuild node-sass",
"server": "webpack-dev-server --inline --progress --port 8080",
"start": "webpack-dev-server --config config/webpack/webpack.config.myaccount.js --inline --progress --port 8080 --https --cert ./ssl/server.crt --key ./ssl/server.key",
"start:e2e": "webpack-dev-server --config config/webpack/webpack.config.e2e.js --inline --quiet --https --port 8080",
"build": "rimraf dist/non-prod && webpack --config config/webpack/webpack.config.build.js --progress --profile --bail",
"build:e2e": "rimraf config/dist && webpack --config config/webpack/webpack.config.localhost.js --progress --profile --bail",
"build:prod": "rimraf dist/prod && webpack --config config/webpack/webpack.config.prod.js --progress --profile --bail",
"build:prod:analysis": "rimraf dist/prod && webpack --config config/webpack/webpack.config.prod.analyzer.js --progress --profile --bail",
"build:aot": "rimraf aot/ dist/aot && node --max_old_space_size=6244 ./node_modules/webpack/bin/webpack.js --config webpack.config.aot.js --progress --profile --bail --display-error-details",
"test": "karma start",
"test:debug": "karma start --browsers Chrome",
"test:ci": "karma start --browsers ChromeHeadless",
"test:watch": "karma start --no-single-run --auto-watch",
"test:watch:debug": "karma start --no-single-run --auto-watch --browsers Chrome",
"test:mockserver": "ts-node ./server-ts/tests/runMockserverTests.ts",
"webdriver:start": "webdriver-manager start",
"webdriver:update": "webdriver-manager update --ie",
"webdriver:clean": "webdriver-manager clean",
"build:service:nonprod": "rimraf dist/non-prod && webpack --config config/webpack/webpack.config.build-cache.js --progress --profile --bail",
"build:dev:cache:nonprod": "yarn build:service:nonprod && yarn precache:nonprod && yarn server:nonprod",
"build:cache:nonprod": "yarn build && yarn precache:nonprod",
"build:cache:prod": "yarn build:prod && yarn precache:prod",
"build:cache:aot": "yarn build:aot && yarn precache:aot",
"server:aot": "node tools/simple-server.js",
"server:aot:start:bg": "forever start -t -p . -al server.log tools/simple-server.js -p 8080",
"server:aot:stop:bg": "forever stop tools/simple-server.js -p 8080",
"precache:nonprod": "sw-precache --verbose --config=config/precacheConfig-nonprod.js",
"precache:prod": "sw-precache --verbose --config=config/precacheConfig-prod.js",
"precache:aot": "sw-precache --verbose --config=config/precacheConfig-aot.js",
"mockserver": "ts-node-dev ./server-ts/index.ts",
"mockserver:start:bg": "forever start -t -p . --workingDir . -al stub.log --id mockserver ./node_modules/ts-node/dist/bin.js ./server-ts/index.ts",
"mockserver:stop:bg": "forever stop mockserver",
"reports:plato": "yarn compile:ts && rimraf reports/plato && plato -r -d reports/plato -n -t \"My Account\" srcJs",
"reports:complexity": "yarn compile:ts && rimraf reports/complexity && mkdir reports/complexity && cd srcJs && ../node_modules/jscomplexity/bin/jscomplexity-cli.js > ../reports/complexity/report.txt",
"compile:ts": "rimraf srcJs && tsc -p src/tsc.json --outDir srcJs",
"compile:e2e": "tsc --project e2etsc.json",
"preflight": "yarn && yarn lint:sass && yarn lint:ts && yarn test:mockserver && yarn test:ci && yarn build:aot && yarn precache:aot && echo 'Preflight checks PASSED!' || echo 'Preflight checks FAILED!'"
},
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.0",
"#angular/cdk": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#typed/hashmap": "^1.0.1",
"#types/body-parser": "^1.16.8",
"#types/express-fileupload": "^0.1.1",
"angular-progress-http": "1.0.0",
"angular2-text-mask": "^8.0.1",
"angulartics2": "^2.2.2",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"css-element-queries": "^0.4.0",
"hammerjs": "2.0.8",
"jwt-decode": "^2.1.0",
"jwt-simple": "^0.5.1",
"lodash": "^4.17.4",
"moment": "^2.17.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.7",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular-devkit/core": "0.3.2",
"#angular/cli": "~1.7.3",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#ngtools/webpack": "1.10.2",
"#octopusdeploy/octopackjs": "0.0.7",
"#types/core-js": "^0.9.40",
"#types/express": "^4.11.0",
"#types/form-data": "0.0.33",
"#types/hammerjs": "^2.0.34",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/lodash": "^4.14.66",
"#types/node": "^7.0.5",
"#types/request": "^0.0.44",
"#types/source-map": "^0.5.0",
"#types/uglify-js": "^2.0.27",
"#types/webpack": "~3.8.11",
"adal-node": "^0.1.27",
"angular-router-loader": "^0.8.2",
"angular2-template-loader": "^0.6.0",
"assets-webpack-plugin": "^3.5.1",
"autoprefixer": "^7.2.3",
"azure-keyvault": "^3.0.1-preview",
"backstopjs": "^3.0.36",
"body-parser": "^1.17.2",
"case-sensitive-paths-webpack-plugin": "^2.1.1",
"chai": "^4.0.2",
"circular-dependency-plugin": "^4.2.1",
"codelyzer": "^4.0.1",
"command-line-args": "^4.0.1",
"command-line-usage": "^4.0.0",
"concurrently": "^3.1.0",
"copy-webpack-plugin": "~4.4.1",
"css-loader": "^0.28.4",
"ejs-compiled-loader": "^1.1.0",
"express": "^4.15.3",
"express-fileupload": "^0.1.4",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "^1.1.5",
"forever": "^0.15.3",
"fs": "0.0.2",
"git-rev-2": "^0.1.0",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.29.0",
"http-proxy-middleware": "^0.17.4",
"inversify": "^4.10.0",
"istanbul-instrumenter-loader": "^3.0.0",
"jasmine-bamboo-reporter": "0.0.2",
"jasmine-core": "~2.8.0",
"jasmine-reporters": "^2.2.0",
"jasmine-spec-reporter": "~4.2.1",
"jscomplexity": "^2.0.0",
"jscpd": "^0.6.15",
"json-loader": "^0.5.4",
"jsonfile": "^3.0.0",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-junit-reporter": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.4",
"mkdirp": "^0.5.1",
"mocha": "^3.1.2",
"mocha-junit-reporter": "^1.12.0",
"node-sass": "^4.0.0",
"ntypescript": "^1.201609302242.1",
"null-loader": "0.1.1",
"octopus-deploy": "^2.0.0",
"open-browser-webpack-plugin": "0.0.3",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"optimize-js-plugin": "^0.0.4",
"plato": "^1.7.0",
"postcss-loader": "^1.0.0",
"protractor": "~5.1.2",
"protractor-browser-logs": "^1.0.351",
"protractor-jasmine2-html-reporter": "0.0.7",
"raw-loader": "0.5.1",
"request": "^2.83.0",
"rimraf": "^2.5.4",
"sass-lint": "^1.10.2",
"sass-loader": "6.0.6",
"sasslint-webpack-plugin": "^1.0.4",
"should": "^11.1.1",
"strip-loader": "^0.1.2",
"style-loader": "^0.19.1",
"sw-precache": "^5.1.1",
"ts-loader": "^2.3.3",
"ts-md5": "^1.2.2",
"ts-mocks": "^0.2.2",
"ts-node": "~4.1.0",
"ts-node-dev": "^1.0.0-pre.16",
"tslib": "^1.5.0",
"tslint": "~5.9.1",
"tslint-eslint-rules": "4.1.1",
"tslint-loader": "3.5.3",
"typedoc": "^0.7.1",
"typescript": "~2.5.3",
"uglifyjs-webpack-plugin": "^1.1.8",
"url-loader": "^0.6.2",
"webpack": "3.11.0",
"webpack-bundle-analyzer": "^2.4.0",
"webpack-dev-server": "~2.11.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"zip-dir": "^1.0.2"
}
}

I had same problem but didn't have to downgrade the node version. I just updated the package.json file node-sass entry to match my node version from the table on the github page. https://github.com/sass/node-sass/
I'm using node 14.15.3 so I put "node-sass": "^4.14.0" in dependencies, did another npm install, and it worked.

Related

Strategy to update Node.js and npm

We are currently using, npm - 9.1.3 and node - v16.14.2
What's a good strategy to update both the npm and node to the latest versions in the Windows environment?
Are there any issues involved?
My package.json looks like,
{
"name": "myreact",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "jest --verbose --colors",
"test:ci": "jest --ci --watchAll=false --colors --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura --coverageThreshold '{}'",
"test:coverage": "jest --verbose --coverage",
"test:watch": "jest --verbose --watch",
"test-debug": "node --inspect-brk --inspect ./node_modules/jest/bin/jest -i",
"start": "concurrently \"webpack-dev-server --mode development --open\" \"npm:stubby\"",
"start:iis": "webpack-dev-server --mode development --open --iis",
"build": "webpack --progress --mode production",
"build:dev": "webpack --progress --mode production --dev",
"build:prod": "lingui add-locale en && lingui extract --clean && lingui compile && webpack --mode production",
"lint": "eslint --cache --format codeframe --ext mjs,jsx,js src",
"add-locale": "lingui add-locale",
"extract": "lingui extract",
"compile": "lingui compile",
"stubby": "stubby --data stubs/stubby.yaml --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#craftjs/core": "0.2.0-beta.1",
"#craftjs/utils": "0.2.0-beta.1",
"#my/react-homegrown": "file:..//thirdparty/react/#my/my-react-homegrown-0.10.90.tgz",
"#lingui/core": "^2.9.1",
"#lingui/macro": "^2.9.1",
"#lingui/react": "^2.9.1",
"#material-ui/core": "^4.11.0",
"#material-ui/lab": "^4.0.0-alpha.56",
"#tinymce/tinymce-react": "^3.12.8",
"antlr4": "4.8.0",
"axios": "^0.26",
"classnames": "^2.3.1",
"date-fns": "^2.14.0",
"file-saver": "^2.0.5",
"formik": "^2.1.4",
"immer": "^9.0.12",
"json5": "^2.2.3",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"nanoid": "^3.1.32",
"prop-types": "^15.7.2",
"pubsub-js": "^1.9.2",
"qs": "^6.11.0",
"react": "^16.14.0",
"react-container-query": "^0.12.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.14.0",
"react-resize-detector": "^6.7.2",
"react-resize-panel": "^0.3.5",
"react-router-dom": "^5.2.0",
"react-to-print": "^2.14.7",
"react-virtualized-auto-sizer": "^1.0.5",
"react-window": "^1.8.6",
"recoil": "^0.7.0",
"resolve": "^1.22.1",
"sanitize-html": "2.7.1",
"sheetjs-style": "^0.15.8",
"tinymce": "^5.10.7",
"yup": "^0.32.11"
},
"peerDependencies": {
"react": "^16.14.0",
"react-dom": "^16.14.0"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/preset-react": "^7.14.5",
"#lingui/cli": "^2.9.2",
"#neutrinojs/airbnb": "^9.2.0",
"#neutrinojs/compile-loader": "^9.2.0",
"#neutrinojs/dev-server": "^9.4.0",
"#neutrinojs/eslint": "^9.2.0",
"#neutrinojs/jest": "^9.2.0",
"#neutrinojs/react": "^9.2.0",
"#tippyjs/react": "^4.0.5",
"#types/jest": "^25.2.3",
"assets-webpack-plugin": "^5.1.2",
"autoprefixer": "^9.8.4",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-macros": "^2.8.0",
"concurrently": "^5.3.0",
"core-js": "^2.6.11",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.5.0",
"eslint": "^6.8.0",
"eslint-plugin-react-hooks": "^4.0.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-junit": "12.1.0",
"moment-locales-webpack-plugin": "^1.2.0",
"neutrino": "^9.2.0",
"postcss-loader": "^3.0.0",
"rc-slider": "^8.7.1",
"react-overlays": "^1.2.0",
"react-scripts": "^4.0.3",
"sass": "^1.49.9",
"sass-loader": "^10.0.5",
"stubby": "^5.0.0",
"style-loader": "^1.2.1",
"styled-components": "^4.1.2",
"webpack": "^4.44.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.1"
}
}
Upgrading dependencies always comes with the risk of causing breakage to older dependencies. Typically, that occurs when you're using a really old module that requires one of your other modules to be on an older version as you go to upgrade it.
One really neat way to find outdated packages comes built-into NPM. Try running this in your both your backend and frontend projects:
npm outdated
It will return a list that's likely very large of outdated packages. Go through each package and try to find the ones with the largest disparity between the Current and Latest version. These packages will be the most difficult to upgrade. Also the packages that have a very small difference between current and latest means they are likely outdated. You'll want to check their Github repository to see when the last commit was and generally if it's being maintained anymore.
Upgrading past Node 16 is likely to cause breaking changes in your app on the backend. In terms of your front-end and the compiled client, it's not going to have much effect. Upgrading from React 16 to 18 has many breaking changes though. Migrating from Material-UI v4 to v5 has many breaking changes. Also moving from react-scripts 4 to 5 has quite a few changes.
In general, you'll want to go through all your packages and do some research based on the business needs. It's common for businesses to have to make the touch choice between keeping an older module pegged for awhile before upgrading it, as it may cause a required refactor.

Error in start react with vite (parse5 error code eof-in-element-that-can-contain-only-text)

When I start the application I get the following error:
[vite] Internal server error: Unable to parse HTML; parse5 error code
eof-in-element-that-can-contain-only-text at
{"file":"/index.html","line":56,"column":1}
at {"file":"/index.html","line":56,"column":1}
at handleParseError (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-a713b95d.js:43358:11)
at Parser.onParseError (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-a713b95d.js:43285:13)
at Parser._err (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:4942:14)
at eofInText (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:6977:7)
at Parser.onEof (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:5731:17)
at Tokenizer._emitEOFToken (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1403:22)
at Tokenizer._stateRawtext (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1903:22)
at Tokenizer._callState (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1522:22)
at Tokenizer._runParsingLoop (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1179:22)
at Tokenizer.write (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1204:14)
package.json
{
"name": "admooh-presentation",
"version": "4.1.0",
"description": "Admooh presentation project",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate-typescript.git"
},
"license": "MIT",
"author": "Max Stoiber",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 8080",
"lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet app",
"lint:css": "stylelint app/**/*.{js,ts,tsx}",
"lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern",
"lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet --fix",
"lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet",
"prettify": "prettier --write app ",
"pretest": "npm run test:clean && npm run lint",
"test": "vitest run",
"test:ci": "vitest run",
"test:clean": "rimraf ./coverage",
"test:coverage": "vitest run --coverage",
"test:watch": "vitest watch",
"typecheck": "tsc --noEmit",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"prepare": "cd .. && husky install"
},
"lint-staged": {
"*.{md,json}": [
"prettier --write",
"git add --force"
],
"*.{ts,tsx,js,jsx}": [
"npm run lint:eslint:fix",
"git add --force"
]
},
"dependencies": {
"#devexpress/dx-core": "3.0.5",
"#devexpress/dx-react-chart": "3.0.5",
"#devexpress/dx-react-chart-material-ui": "3.0.5",
"#devexpress/dx-react-core": "3.0.5",
"#hookform/resolvers": "2.9.8",
"#mui/icons-material": "^5.10.3",
"#mui/lab": "5.0.0-alpha.99",
"#mui/material": "^5.10.5",
"#mui/styled-engine-sc": "^5.10.3",
"#mui/x-date-pickers": "^5.0.1",
"#react-google-maps/api": "2.12.2",
"#rjsf/bootstrap-4": "^4.2.3",
"#rjsf/core": "^4.2.3",
"#textea/json-viewer": "^1.24.4",
"#uppy/core": "3.0.1",
"#uppy/dashboard": "^3.0.1",
"#uppy/drag-drop": "^3.0.0",
"#uppy/file-input": "^3.0.0",
"#uppy/locales": "3.0.0",
"#uppy/progress-bar": "^3.0.0",
"#uppy/react": "3.0.1",
"#uppy/tus": "3.0.1",
"#uppy/xhr-upload": "^3.0.1",
"bootstrap": "^4.6.2",
"copy-to-clipboard": "^3.3.2",
"crypto-js": "^4.1.1",
"currency.js": "2.0.4",
"date-fns": "2.29.3",
"immer": "9.0.15",
"intl": "1.2.5",
"jsdom": "^20.0.0",
"lodash": "4.17.21",
"mixpanel-browser": "^2.45.0",
"mui-tel-input": "^2.0.1",
"node-fetch": "^3.2.10",
"notistack": "3.0.0-alpha.7",
"ramda": "0.28.0",
"react": "18.2.0",
"react-beautiful-dnd": "13.1.1",
"react-bootstrap": "^1.6.6",
"react-dom": "18.2.0",
"react-error-boundary": "3.1.4",
"react-hook-form": "7.35.0",
"react-input-mask": "^2.0.4",
"react-intl": "6.1.1",
"react-jsonschema-form": "1.8.1",
"react-query": "3.39.2",
"react-responsive": "9.0.0-beta.10",
"react-responsive-carousel": "3.2.23",
"react-router-dom": "^6.4.0",
"react-table": "7.8.0",
"react-youtube": "10.0.0",
"sanitize.css": "13.0.0",
"styled-components": "5.3.5",
"typescript-plugin-styled-components": "2.0.0",
"use-immer": "0.7.0",
"use-places-autocomplete": "4.0.0",
"vest": "3.2.8",
"yup": "0.32.11",
"zod": "^3.19.1"
},
"devDependencies": {
"#hookform/devtools": "4.2.2",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/react": "^6.5.12",
"#stylelint/postcss-css-in-js": "^0.38.0",
"#testing-library/jest-dom": "5.16.5",
"#testing-library/react": "13.4.0",
"#testing-library/user-event": "14.4.3",
"#types/google.maps": "^3.50.1",
"#types/lodash": "4.14.185",
"#types/node": "18.7.18",
"#types/ramda": "0.28.15",
"#types/react": "18.0.20",
"#types/react-beautiful-dnd": "13.1.2",
"#types/react-dom": "18.0.6",
"#types/react-responsive": "8.0.5",
"#types/react-router-dom": "5.3.3",
"#types/styled-components": "5.1.26",
"#types/testing-library__jest-dom": "5.14.5",
"#typescript-eslint/eslint-plugin": "5.37.0",
"#typescript-eslint/parser": "5.37.0",
"#vitejs/plugin-react": "2.1.0",
"#vitest/ui": "^0.23.2",
"cross-env": "7.0.3",
"eslint": "8.23.1",
"eslint-config-airbnb-typescript": "17.0.0",
"eslint-config-prettier": "8.5.0",
"eslint-import-resolver-typescript": "3.5.1",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jest-dom": "^4.0.2",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.31.8",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-testing-library": "^5.6.4",
"husky": "^8.0.1",
"lint-staged": "13.0.3",
"msw": "0.47.3",
"postcss-syntax": "^0.36.2",
"prettier": "2.7.1",
"rimraf": "3.0.2",
"stylelint": "14.11.0",
"stylelint-config-recommended": "9.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.10.0",
"typescript": "4.8.3",
"vite": "^3.1.1",
"vitest": "^0.23.2"
},
"engines": {
"node": ">=10.13.0",
"npm": ">=6.4.1"
},
"msw": {
"workerDirectory": "public"
}
}
Can anyone tell me what the error could be?
Already adjusted the dependencies, already deleted the nodemodules and installed again.
Node version: 16.17
You should probably include the HTML file in the question too.
In my case I found the issue was invalid HTML not quite on the same line. I had a self closing script tag that looked like:
<script type="text/javascript" src="/src/index.js"/>
which is invalid HTML. Changing it to <script type="text/javascript" src="/src/index.js"></script> fixed it. See Why don't self-closing script elements work?
I've just found out what the problem was. Sine version 3.1.0 vite uses parse5 as it's html parser. And for some reason this causes the crash. You should lock the vite dependency on 3.0.9.
Edit:
So, I have finally figured out what the problem was with my html file, since there was a need to update to the latest vite version.
It was because of html file formatting, parse5 throws when you have html styled like so
<noscript
><div>
<h1 style="margin: 16px; font-size: 26px">
No js detected
</h1>
<p style="font-size: 18px">
Turn your js on
</p>
</div></noscript
>
Notice the new line after <noscript that is the problem. It has to be <noscript> without the empty line. Obviously, the same applies to other tags. Which is really stupid, since that is completely valid and some formatters do format html like that.

same package.json doesn't run in windows and mac

I am getting the following error when I am try to start my app in windows.
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
[0] ^^^^
[0] ^^^
[0]
[0] SyntaxError: missing ) after argument list
Any explanations or packages that I am missing?
Here is my package.json, please let me know some of the scripts that are mac specific and might lead to the above error, from my analysis it is around server or update:watch
package.json
{
"name": "documentation-playground",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "concurrently --kill-others \"npm run server\" \"npm run update:watch\"",
"server": "node --max_old_space_size=8192 ./node_modules/.bin/ng serve --aot --progress false --proxy-config proxy.config.json --port 8888",
"mock": "node json-server/json-server.js",
"update:watch": "onchange \"json-server/**/*.json\" -i -- npm run mock",
"npm-install": "rimraf ./src/app/core && rimraf ./node_modules/woa-core-ng-module && npm i",
"test": "concurrently --kill-others \"npm run mock\" \"ng test --source-map=false\"",
"start-prod": "concurrently --kill-others \"npm run server-prod\" \"npm run update:watch\"",
"server-prod": "ng serve --configuration=production --progress true --proxy-config proxy.config.json",
"start-demo": "ng serve --configuration=demo",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor",
"lint": "ng lint",
"build:clean": "rimraf ./dist/public",
"prebuild": "npm run build:clean",
"build:aot": "./node_modules/.bin/ng build --aot",
"build": "./node_modules/.bin/ng build --prod --configuration=production --deploy-url=documentation-playground/",
"prebuild:demo": "npm run build:clean",
"build:demo": "./node_modules/.bin/ng build --prod --configuration=demo --deploy-url=documentation-playground/",
"postbuild:demo": "mv ./dist/public/documentation-playground/documentation-playground-index.html ./dist/public/documentation-playground/index.html",
"postbuild": "rimraf ./dist/public/documentation-playground/assets/i18n/en.json"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.0",
"#angular/common": "^6.1.0",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.0",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "6.3.3",
"zone.js": "~0.8.26",
"#ngx-translate/core": "10.0.0",
"#ngx-translate/http-loader": "3.0.0",
"classlist.js": "1.1.20150312",
"jsonschema": "1.1.1",
"moment": "^2.18.1",
"ngx-drag-drop": "^1.1.0",
"ngx-perfect-scrollbar": "^7.0.0",
"ngx-responsive": "6.0.0",
"ngx-translate-multi-http-loader": "^2.1.2",
"resize-observer-polyfill": "^1.5.0",
"stacktrace-js": "2.0.0",
"web-animations-js": "^2.3.1",
"cp-cli": "^1.1.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.6.7",
"#angular/cli": "~6.1.2",
"fs": "0.0.1-security",
"#angular/compiler-cli": "^6.1.0",
"#angular/language-service": "^6.1.0",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2",
"onchange": "^3.2.1",
"concurrently": "3.4.0",
"json-server": "0.9.6",
"rimraf": "2.6.2"
}
}
Sometimes minor version changes can break things. There might be some monor version change happened from the time you did npm install on your Mac and by the time you did on Window. So, it is advised to keep the package-lock.json in git and update it whenever you are updating your package.json. Also, not that not all packages are compatible with all the platforms. I am sure you can identify the problem causing node module by the call stack.

Browsersync Couldn't open browser Heroku

Browsersync: when I use it locally it's all right. When I deploy on Heroku, I have this warning:
Couldn't open browser (if you are using BrowserSync in a headless
environment, you might want to set the open option to false)
this is my package.json:
"scripts": {
"clean": "rimraf dist/{css/*,js/*,images/*}",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"scss": "node-sass --output-style compressed -o dist/css src/scss",
"lint": "eslint src/js || true",
"lint-scss": "stylelint src/scss/*.scss --syntax scss || true",
"uglify": "mkdirp dist/js -p && uglifyjs src/js/*.js -m -c -o dist/js/main.min.js",
"imagemin": "imagemin src/images/* -o dist/images",
"serve": "browser-sync start --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
"build:css": "run-s lint-scss scss autoprefixer",
"build:js": "run-s lint uglify",
"build:images": "run-s imagemin",
"build": "run-s build:*",
"watch:css": "onchange \"src/scss\" -- run-s build:css",
"watch:js": "onchange \"src/js\" -- run-s build:js",
"watch:images": "onchange \"src/images\" -- run-s build:images",
"watch": "run-p serve watch:*",
"postinstall": "run-s build watch"},
"devDependencies": {
"autoprefixer": "^9.0.1",
"browser-sync": "^2.12.8",
"eslint": "^5.2.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"imagemin-cli": "^3.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.9.2",
"npm-run-all": "^4.1.3",
"onchange": "^4.1.0",
"postcss-cli": "^6.0.0",
"rimraf": "^2.5.4",
"stylelint": "^9.4.0",
"uglify-es": "^3.3.10"},
"main": ".eslintrc.js"
}
I read that I have to set the open option to false, but I do not understand where and how.
Thanks
Try replacing serve script with this:
"serve": "browser-sync start --no-open --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\""

Module build failed: ReferenceError: [BABEL] Unknown option: /Users/Will/.babelrc.presets

So I am totally baffled by this. My team is running on the same branch, same commit of code. I'm the only one having this issue. Here's the full stack trace:
Module build failed: ReferenceError: [BABEL] /Users/Will/Brandzooka/visibl-front_end/node_modules/eslint-loader/index.js!/Users/Will/Brandzooka/visibl-front_end/app/index.jsx: Unknown option: /Users/Will/.babelrc.presets
at Logger.error (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/logger.js:58:11)
at OptionManager.mergeOptions (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:29)
at OptionManager.addConfig (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:107:10)
at OptionManager.findConfigs (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:168:35)
at OptionManager.init (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:12)
at File.initOptions (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/index.js:147:75)
at new File (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/index.js:137:22)
at Pipeline.transform (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
at transpile (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-loader/index.js:12:22)
at Object.module.exports (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-loader/index.js:69:12)
I've come across multiple answers that all relate to Babel 6 usage, which doesn't currently apply to me.
I've tried:
Uninstalling and reinstalling node and npm versions (via nvm)
Blowing away all the node modules, and reinstalling
npm cache clean
Blowing away repo, and re-cloning
For good measure, restarting my machine
Im running node v0.12.9 & npm v2.14.9
Here's my package.json
{
"version": "0.0.0",
"main": "app/index.js",
"private": true,
"scripts": {
"build": "CONFIG_ENV=dev Q_DEBUG=1 time ./node_modules/.bin/webpack --config conf/webpack.production.js",
"build:prod": "CONFIG_ENV=production time ./node_modules/.bin/webpack --config conf/webpack.production.js",
"build:stage": "CONFIG_ENV=stage time ./node_modules/.bin/webpack --config conf/webpack.production.js",
"deploy:codeship-getvisibl": "time firebase deploy --token $FIREBASETOKEN",
"deploy:codeship-stage": "time firebase deploy --token $FIREBASETOKEN --project firebase-visibl-stage",
"deploy:stage": "firebase use firebase-visibl-stage && firebase deploy",
"lint": "PATH=$PATH:/usr/local/bin time ./node_modules/eslint/bin/eslint.js --cache --format 'node_modules/eslint-friendly-formatter' --ext .js --ext .jsx --config .eslintrc app/",
"migrate": "babel-node --stage 1 migrate.js",
"start": "CONFIG_ENV=dev Q_DEBUG=1 ./node_modules/.bin/webpack-dev-server --config conf/webpack.config.js --hot --progress --inline --content-base ./build",
"start:prod": "CONFIG_ENV=production Q_DEBUG=1 ./node_modules/.bin/webpack-dev-server --config conf/webpack.config.js --hot --progress --inline --content-base ./build",
"debug": "CONFIG_ENV=dev Q_DEBUG=1 time ./node_modules/.bin/mocha debug --full-trace --colors --recursive app/mochaNodeSetup.js app",
"test": "CONFIG_ENV=dev Q_DEBUG=1 time ./node_modules/.bin/mocha --full-trace --colors --bail --recursive app/mochaNodeSetup.js app"
},
"dependencies": {
"#brandzooka/client": "*",
"#brandzooka/models": "*",
"autoprefixer-loader": "2.0.0",
"aws-sdk": "^2.3.7",
"babel-core": "5.8.38",
"babel-loader": "5.3.2",
"baconjs": "0.7.66",
"bluebird": "2.10.1",
"bootstrap-sass": "3.3.5",
"bootstrap-slider": "4.10.0",
"chai": "3.0.0",
"chai-immutable": "1.0.2",
"classnames": "2.1.2",
"clear-require": "^1.0.1",
"cls-bluebird": "^1.0.1",
"css-loader": "0.15.1",
"dom-scroll-into-view": "1.2.0",
"eslint": "1.4.3",
"eslint-friendly-formatter": "1.0.8",
"eslint-loader": "^1.0.0",
"eslint-plugin-mocha": "0.4.0",
"eslint-plugin-react": "3.4.1",
"exports-loader": "0.6.2",
"file-loader": "0.8.4",
"immutable": "3.7.4",
"immutable-form-validation": "1.0.4",
"imports-loader": "0.6.4",
"jquery": "2.1.4",
"jsdom": "2.0.0",
"json-loader": "0.5.2",
"lodash": "3.10.1",
"mocha": "2.2.5",
"moment": "2.10.3",
"node-libs-browser": "0.5.2",
"node-sass": "3.2.0",
"nomnom": "^1.8.1",
"null-loader": "0.1.1",
"phantomjs": "1.9.18",
"precommit-hook": "2.0.1",
"q": "1.4.1",
"query-string": "3.0.3",
"rc-form-validation": "2.4.12",
"react": "^0.14.0",
"react-addons-pure-render-mixin": "0.14.0",
"react-addons-test-utils": "0.14.0",
"react-bootstrap": "0.29.5",
"react-bootstrap-daterangepicker": "0.2.5",
"react-dom": "0.14.0",
"react-dropzone": "1.2.2",
"react-hot-loader": "1.2.7",
"react-moment-proptypes": "0.0.5",
"react-router": "0.13.5",
"react-slick": "0.12.2",
"readline2": "^1.0.1",
"reflux": "0.4.1",
"reflux-core": "0.3.0",
"reflux-promise": "1.0.4",
"sass-loader": "1.0.2",
"sha.js": "2.4.5",
"sinon": "1.15.4",
"sinon-chai": "2.8.0",
"sinon-react": "0.2.1",
"style-loader": "0.12.3",
"superagent": "1.2.0",
"superagent-promise": "1.0.0",
"url": "0.10.3",
"url-loader": "0.5.6",
"uuid": "2.0.2",
"valid-url": "1.0.9",
"whatwg-fetch": "0.9.0"
},
"devDependencies": {
"babel": "5.8.38",
"babel-eslint": "^6.0.0-beta.6",
"chai-spies": "^0.7.1",
"clean-webpack-plugin": "0.1.3",
"estraverse": "^4.2.0",
"extract-text-webpack-plugin": "0.8.2",
"firebase-token-generator": "^2.0.0",
"html-webpack-plugin": "1.5.2",
"pg": "^4.4.2",
"pg-parse-float": "0.0.1",
"webpack": "*",
"webpack-dev-server": "*"
}
}
Any hot ideas out there? 3 hours in, I can't even get the error message to change.
The config path /Users/Will/.babelrc.presets means you have a .babelrc file in /Users/Will/, and it has a "presets" key because it appears to be a config file for Babel 6.
Presumably you have a .babelrc at /Users/Will/Brandzooka/visibl-front_end/.babelrc to configure your Babel 5 install, but Babel 5 does not stop traversing upward looking for other configs unless you tell it to (Babel 6 stops at the first config), so it will also look farther up and error out on the Babel 6 config in your home directory.
This leaves you with a few options:
Delete /Users/Will/.babelrc, because Babel config files should live in the project they apply to, not in your home.
If that is a no-go, open (and maybe create) /Users/Will/Brandzooka/visibl-front_end/.babelrc and make sure it has the key "breakConfig": true to tell Babel 5 to stop looking in parent directories for other config files.

Resources