uws not found - VueJS using SocketIO - javascript

I'm trying to build a vue application using SocketIO. The first error I get on compiling ( fs not found ) is already fixed with adding: node: { fs: 'empty' } to my webpack.base.conf.js file.
But I have no idea how to fix the second error:
ERROR Failed to compile with 1 errors
This dependency was not found:
* uws in ./node_modules/engine.io/lib/server.js

import io from 'socket.io-client'
If you don't add "-client", you are using the server component. This won't work, as there is no "fs" on the browser, just on nodejs side.
To get typescript import to work, you need npm install of
#types/socket.io-client
Update:
Seems, that uws is not required for the client side. I could remove uws without running into errors. Will recheck that, if required...

Seems uws package version has been deprecated, see here
You can install other stable versions. Try below
$ rm -rf ./node_modules/uws
$ npm install uws#10.148.1 --save
Update 1
New versions with slightly different goal and purpose are available at https://github.com/uNetworking/uWebSockets.js
Use of old releases is not recommended due to known bugs and problems.

package.json :
{
"name": "chat",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs"
},
"dependencies": {
"fs": "0.0.1-security",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"uws": "^10.148.1",
"vue": "^2.5.2",
"vue-material": "^1.0.0-beta-10.2",
"vue-router": "^3.0.1",
"vue-socket.io": "^2.1.1-b"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"inject-loader": "^3.0.1",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"phantomjs-prebuilt": "^2.1.15",
"rimraf": "^2.6.2",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"sw-precache-webpack-plugin": "^0.11.4",
"uglify-es": "^3.1.3",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
There is not much code yet. The last things i added was that:
<script>
export default {
data () {
return {
isConnected: false,
socketMessage: ''
}
},
sockets: {
connect () {
// Fired when the socket connects.
this.isConnected = true
},
disconnect () {
this.isConnected = false
},
// Fired when the server sends something on the "messageChannel" channel.
messageChannel (data) {
this.socketMessage = data
}
},
methods: {
pingServer () {
// Send the "pingServer" event to the server.
this.$socket.emit('pingServer', 'PING!')
}
}
}
</script>
After adding that I got all the errors.

Related

TypeError: Cannot read properties of undefined (reading 'version') at ./node_modules/bootstrap-vue/esm/vue.js

I am getting error updating vue version to 3 using bootstrap-vue.
warn in ./node_modules/bootstrap-vue/esm/vue.js 22:59:50
export 'default' (reexported as 'Vue') was not found in 'vue' (pos
As of their documentation i am using #vue-compat.
Here is my package.json
{
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.18",
"#babel/runtime": "^7.18",
"#coreui/coreui": "^2.1.16",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"#coreui/vue": "^2.1.2",
"#fortawesome/fontawesome-free": "^5.9.0",
"#symfony/webpack-encore": "^3.1.0",
"axios": "^0.27",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bootstrap": "^4.6.2",
"bootstrap-vue": "npm:#ankurk91/bootstrap-vue#^3.0.2",
"chart.js": "^3.9.1",
"core-js": "^3.25.3",
"css-vars-ponyfill": "^2.4.8",
"downloadjs": "^1.4.7",
"moment": "^2.29.4",
"node-sass": "^7.0.3",
"perfect-scrollbar": "^1.5.5",
"regenerator-runtime": "^0.13.9",
"roboto-npm-webfont": "^1.0.1",
"sass-loader": "^13.0.2",
"vue": "^3.1.0",
"#vue/compat": "^3.2.41",
"vue-cal": "^2.24.8",
"vue-chartjs": "^4.1.1",
"vue-i18n": "^8.27.2",
"vue-loader": "^17.1.0",
"vue-notification": "^1.3.20",
"vue-perfect-scrollbar": "^0.2.1",
"vue-router": "^3.0.2",
"#vue/compiler-sfc": "^3.1.0",
"vuex": "^3.6.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": {
"#types/file-saver": "^2.0.5",
"file-saver": "^2.0.5"
}
}
I tried to change version of bootstrap-vue as well as #vue-compat but it did't helped.
Looks like you don't have the proper package installed
"bootstrap-vue": "npm:#ankurk91/bootstrap-vue#^3.0.2"
should be replaced with
"bootstrap-vue": "^2.23.1"
Thanks you for reponse. I found problem was my webpack configuration. I forgot to add this section
alias: {
vue: '#vue/compat'
}

is it possible to make sass-loader using dart-sass not node-sass

Because the node-sass have a big install problem and compatible problem, I do not want to use node-sass, prefer to use dart sass in my project. But when I use the sass-loader like this:
"sass-loader": "7.0.0",
shows that:
ERROR in ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/sass-loader/lib/loader.js:31:19)
# ./node_modules/style-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss 4:14-197
what should I do to let the sass-loader ignore the node sass and use dart sass? I do not want to use node sass, it waste too much time to handle the install and compatible problem. BTW, this is my project package.json content:
{
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/crx-selection-translate.git"
},
"scripts": {
"xpostinstall": "node ./build/install-pdf-viewer",
"dev": "webpack --config build/webpack.dev.config.js",
"build": "gulp --cwd . --gulpfile build/gulp-build.js",
"test": "karma start build/karma.config.js"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"chrome-call": "^1.0.2",
"connect.io": "^3.1.3",
"interact.js": "^1.2.6",
"js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
"translation.js": "github:jiangxiaoqiang/translation.js",
"vue": "^1.0.24",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"chrome-env": "^0.0.6",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"download": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.8.5",
"fs-extra": "^8.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlmin": "^2.0.0",
"gulp-jsonmin": "^1.2.0",
"gulp-uglify": "^1.5.3",
"gulp-zip": "^3.2.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^6.3.11",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^2.1.0",
"karma-coveralls": "^2.1.0",
"karma-firefox-launcher": "^1.3.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.6",
"raw-loader": "^0.5.1",
"sass": "1.48.0",
"sass-loader": "7.0.0",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.2.0",
"webpack": "^3.12.0",
"webpack-cli": "^4.9.1"
},
"author": "Jiangxiaoqiang <jiangtingqiang#gmail.com>",
"license": "GPLv3",
"bugs": {
"url": "https://github.com/jiangxiaoqiang/crx-selection-translate/issues"
},
"homepage": "https://github.com/jiangxiaoqiang/crx-selection-translate#readme"
}
any suggestion or clue was welcome. I tried to tweak the webpack config like this to specify the load-sass to use dart sass not node sass:
{
test : /\.scss$/ ,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
]
}
still did not work.

How to solve webpack plugin compilation error

I am in the process of migrating my node.js project. I just upgraded to Webpack 4 and I can't compile the project after running npm run dev. It throws the following error:
Error: Plugin could not be registered at 'html-webpack-plugin-after-emit'. Hoo k was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compa tibility layer for this hook, hook into 'this._pluginCompat'.
- Tapable.js:69 Compilation.plugin
[treetopmall]/[tapable]/lib/Tapable.js:69:9
- util.js:89 Compilation.deprecated [as plugin]
internal/util.js:89:15
- dev-server.js:40
C:/Users/duncan/projects/treetopmall/build/dev-server.js:40:15
- Hook.js:154 SyncHook.lazyCompileHook
[treetopmall]/[tapable]/lib/Hook.js:154:20
- Compiler.js:631 Compiler.newCompilation
[treetopmall]/[webpack]/lib/Compiler.js:631:26
- Compiler.js:667
[treetopmall]/[webpack]/lib/Compiler.js:667:29
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[treetopmall]/[tapable]/lib/Hook.js:154:20
- Compiler.js:662 Compiler.compile
[treetopmall]/[webpack]/lib/Compiler.js:662:28
- Compiler.js:328 Compiler.runAsChild
[treetopmall]/[webpack]/lib/Compiler.js:328:8
- child-compiler.js:110
[treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:110:21
- new Promise
- child-compiler.js:109 HtmlWebpackChildCompiler.compileTemplates
[treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:109:31
- cached-child-compiler.js:344 PersistentChildCompilerSingletonPlugin.compileE ntries
[treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:344:21
- cached-child-compiler.js:211
[treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:211:47
My package.json file:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-decorators": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/plugin-proposal-function-sent": "^7.8.3",
"#babel/plugin-proposal-json-strings": "^7.8.3",
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"#babel/plugin-proposal-throw-expressions": "^7.8.3",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.8.3",
"apexcharts": "^3.19.2",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"bootstrap-vue": "^2.14.0",
"install": "^0.13.0",
"moment": "^2.26.0",
"mysql": "^2.18.1",
"numeral": "^2.0.6",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-awesome": "^4.0.2",
"vue-chat-scroll": "^1.4.0",
"vue-router": "^3.2.0",
"vue-star-rating": "^1.6.1"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/plugin-transform-runtime": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"babel-plugin-istanbul": "^6.0.0",
"babel-register": "^6.26.0",
"chai": "^4.2.0",
"chalk": "^4.0.0",
"chromedriver": "^83.0.0",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^6.0.1",
"cross-env": "^7.0.2",
"cross-spawn": "^7.0.2",
"css-loader": "^3.5.3",
"cssnano": "^4.1.10",
"eventsource-polyfill": "^0.9.6",
"express": "^4.17.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^4.3.0",
"http-proxy-middleware": "^1.0.4",
"inject-loader": "^4.0.1",
"karma": "^5.0.9",
"karma-coverage": "^2.0.2",
"karma-mocha": "^2.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^4.0.2",
"mocha": "^7.1.2",
"nightwatch": "^1.3.5",
"node-sass": "^4.14.1",
"opn": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^4.0.4",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^3.0.2",
"sass-loader": "^8.0.2",
"selenium-server": "^3.141.59",
"semver": "^7.3.2",
"shelljs": "^0.8.4",
"sinon": "^9.0.2",
"sinon-chai": "^3.5.0",
"sw-precache-webpack-plugin": "^1.0.0",
"uglify-es": "^3.3.10",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
So as you can see, running npm run dev executes the dev-server.js script, so according to the error message, I think the error originates from a plugin from the script:
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
I wonder if .plugin syntax has deprecated and some other syntax should be used instead? I tried compiler.hooks.done.tap({' and still not does work, it returns a 'webpack is not defined error instead.
Any help would be greatly appreciated. Thanks!

Aurelia bundle not found

I am set the project in my local mac, and i want to run it with "gulp watch", i do it before and its work fine for me but now when i do "gulp watch" and go to browser i got an error by browser.
GET http://localhost:9001/dist/aurelia-bundle-8d7cabedaf.js 404 (Not Found)
I already tried to do
delete the node_modules folder.
delete nodejs globally and reinstall him again.
reinstall node_modules and jspm_packges.
change nodejs versions to 6/8.
reinstall gulp and jspm.
{
"scripts": {
"start": "pm2 start server.js",
"stop": "pm2 stop server.js",
"test": "gulp test",
"e2e": "gulp serve webdriver-standalone e2e"
},
"dependencies": {
"babel-core": "^6.8.0",
"connect-modrewrite": "^0.9.0",
"express": "^4.13.0",
"gulp": "^3.9.1",
"isomorphic-fetch": "^2.2.1",
"jspm": "^0.16.45",
"node-sass": "^4.5.0",
"sitemap-generator": "^6.0.0"
},
"devDependencies": {
"aurelia-bundler": "^0.3.0",
"aurelia-tools": "^0.1.18",
"babel-eslint": "^5.0.0",
"babel-plugin-syntax-flow": "^6.5.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-amd": "^6.6.5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.7.0",
"babel-plugin-transform-es2015-modules-systemjs": "^6.6.5",
"babel-plugin-transform-flow-strip-types": "^6.7.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-stage-1": "^6.5.0",
"browser-sync": "^2.10.0",
"connect-history-api-fallback": "^1.2.0",
"conventional-changelog": "0.0.11",
"del": "^1.1.0",
"express-sitemap": "^1.7.0",
"gulp-babel": "^6.1.2",
"gulp-bump": "^0.3.1",
"gulp-changed": "^1.1.0",
"gulp-eslint": "^1.0.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-protractor": "1.0.0",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.3.0",
"jasmine-core": "2.1.3",
"karma": "^0.13.22",
"karma-babel-preprocessor": "~4.0.0",
"karma-browserify": "^4.0.0",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"karma-ngannotate-preprocessor": "^0.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"object.assign": "^1.0.3",
"require-dir": "0.3.2",
"run-sequence": "^1.0.2",
"vinyl-paths": "^1.0.0",
"yargs": "^2.1.1"
},
"jspm": {
"dependencies": {
"aurelia-animator-css": "npm:aurelia-animator-css#^1.0.0-beta.1.2.1",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper#^1.0.0-beta.1.1.4",
"aurelia-configuration": "github:vheissu/aurelia-configuration#^1.0.4",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection#^1.0.0-beta.1.1.5",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator#^1.0.0-beta.1.1.1",
"aurelia-fetch-client": "npm:aurelia-fetch-client#^1.0.0-beta.1.1.1",
"aurelia-framework": "npm:aurelia-framework#^1.0.0-beta.1.1.4",
"aurelia-history": "npm:aurelia-history#^1.0.0-beta.1.2.1",
"aurelia-history-browser": "npm:aurelia-history-browser#^1.0.0-beta.1.1.4",
"aurelia-http-client": "npm:aurelia-http-client#^1.0.0-beta.1.2.0",
"aurelia-i18n": "npm:aurelia-i18n#^0.5.3",
"aurelia-loader-default": "npm:aurelia-loader-default#^1.0.0-beta.1.2.2",
"aurelia-logging": "npm:aurelia-logging#^1.0.0-beta.1.2.0",
"aurelia-logging-console": "npm:aurelia-logging-console#^1.0.0-beta.1.1.4",
"aurelia-metadata": "npm:aurelia-metadata#^1.0.0-beta.1.2.1",
"aurelia-pal-browser": "npm:aurelia-pal-browser#^1.0.0-beta.1.1.4",
"aurelia-path": "npm:aurelia-path#^1.0.0-beta.1.1.1",
"aurelia-polyfills": "npm:aurelia-polyfills#^1.0.0-beta.1.0.3",
"aurelia-route-recognizer": "npm:aurelia-route-recognizer#^1.0.0-beta.1.1.3",
"aurelia-router": "npm:aurelia-router#^1.0.0-beta.1.1.3",
"aurelia-task-queue": "npm:aurelia-task-queue#^1.0.0-beta.1.2.1",
"aurelia-templating-binding": "npm:aurelia-templating-binding#^1.0.0-beta.1.1.2",
"aurelia-templating-resources": "npm:aurelia-templating-resources#^1.0.0-beta.1.1.3",
"aurelia-templating-router": "npm:aurelia-templating-router#^1.0.0-beta.1.1.2",
"bootstrap": "github:twbs/bootstrap#^3.3.5",
"fetch": "github:github/fetch#^0.11.0",
"font-awesome": "npm:font-awesome#^4.5.0",
"framework7": "npm:framework7#^1.4.2",
"geea-develop/aurelia-tag-manager-plugin": "github:geea-develop/aurelia-tag-manager-plugin#^1.0.9",
"geea-develop/bootstrap-datetimepicker": "github:geea-develop/bootstrap-datetimepicker#^5.0.0",
"google-maps-api": "npm:google-maps-api#^2.0.1",
"i18next-xhr-backend": "npm:i18next-xhr-backend#^0.6.0",
"isomorphic-fetch": "npm:isomorphic-fetch#^2.2.1",
"jquery": "npm:jquery#2.1.4",
"lightbox2": "npm:lightbox2#^2.9.0",
"moment": "npm:moment#2.8.4",
"numeral": "npm:numeral#1.5.3",
"photoswipe": "npm:photoswipe#^4.1.1",
"text": "github:systemjs/plugin-text#^0.0.3",
"toastr": "npm:toastr#^2.1.2"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
}
}
I expect to see the site without bundle errors.
Thanks.
Ok, I have the solution to this problem,
command "jspm unbundle" this command clean every build of the project.
and command "jspm install aurelia-history-browser" update the browser.

Gulp Not Finishing a Task

My build task never calls the copy:build task because it looks like the transpile task doesn't return (I never see "Finished" for the transpile task in the console), so it never continues onto the last task:
require('babel-core/register');
var gulp = require('gulp'),
less = require('gulp-less'),
uglify = require('gulp-uglify'),
babel = require("gulp-babel"),
shell = require('gulp-shell'),
mocha = require('gulp-mocha'),
runSequence = require('run-sequence'),
browserify = require('gulp-browserify'),
rename = require('gulp-rename'),
del = require('del');
require('dotenv').config();
const { env } = process;
gulp.task('build', function (done) {
runSequence('clean', 'transpile', 'copy:build', done);
});
gulp.task('clean', function () {
return del(['./build', './dist']);
});
gulp.task('transpile', function () {
return gulp.src(['./src/**/*.js', '!./src/client/less/*.js'])
.pipe(babel())
.pipe(gulp.dest("build"));
});
gulp.task('copy:build', function () {
return gulp.src(['src/shared/**/*.json']).pipe(gulp.dest('build/shared'));
});
package.json
{
"name": "my-app",
"version": "0.0.1",
"description": "",
"main": "server.js",
"scripts": {
"dist": "gulp dist",
"start": "node dist/server.js",
"postinstall": "yarn run dist",
"test-backend": "gulp build && gulp spec-backend",
"test-frontend": "gulp build && yarn run flow && gulp spec-frontend",
"test-all": "gulp build && spec-all",
"build": "NODE_ENV=production gulp build",
"local": "NODE_ENV=development gulp dist && npm start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/me/my-app.git"
},
"author": "Me",
"license": "",
"bugs": {
"url": "https://github.com/me/my-app/issues"
},
"homepage": "https://github.com/me/my-app#readme",
"dependencies": {
"browserify": "^16.2.3",
"compression": "^1.7.3",
"connect-history-api-fallback": "^1.5.0",
"core-js": "^2.6.1",
"cors": "^2.8.5",
"del": "^3.0.0",
"dotenv": "^6.2.0",
"express": "^4.16.4",
"gulp-cli": "^2.0.1",
"gulp-if": "^2.0.2",
"gulp-less": "^4.0.1",
"gulp-rename": "^1.4.0",
"lodash": "^4.17.11",
"nock": "^10.0.5",
"prop-types": "^15.6.2",
"react": "^16.7.0",
"react-addons-create-fragment": "^15.6.2",
"react-compat": "^0.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.7.0",
"react-ga": "^2.5.6",
"react-grid-gallery": "^0.5.3",
"react-redux": "^5.0.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scroll": "^1.7.10",
"redux": "^3.6.0",
"redux-thunk": "^2.3.0",
"superagent": "^4.1.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/cli": "^7.1.5",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.1.5",
"babel-eslint": "^10.0.1",
"babel-preset-flow": "^6.23.0",
"babelify": "^10.0.0",
"chai": "^4.2.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^5.11.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.0",
"flow-bin": "^0.89.0",
"flowtypify": "^1.0.1",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-bundle-assets": "^2.29.0",
"gulp-mocha": "^6.0.0",
"gulp-shell": "^0.6.5",
"gulp-uglify": "^3.0.1",
"gulp-wait": "^0.0.2",
"jquery": "^3.1.1",
"jsdom": "^13.1.0",
"mocha": "^5.2.0",
"postcss": "^7.0.7",
"postcss-cli": "^6.1.0",
"run-sequence": "^2.2.1",
"sinon": "^7.2.2",
"supertest": "^3.3.0",
"watchify": "^3.11.0"
}
}
Here's the output I see in the console, notice you don't see "Finished" for the transpile task which is why it never runs the "copy:build" task:
So what happens is brings me back to the console after the last line Starting 'transpile'... as if it is done but it's obviously not, because it didn't show finished nor did it ever run my copy:build task.
Tried running the copy:build task directly, works fine. The problem is with the transpile script never even getting here:
I had to remove the return:
gulp.task('transpile', function () {
gulp.src(['./src/**/*.js', '!./src/client/less/*.js'])
.pipe(babel())
.pipe(gulp.dest("build"));
});

Categories

Resources