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!
Related
I've been using package react-date-range for some time now. After installing some other package, my app suddenly crashes with the following error message as I do npm start
I have NO idea where this is coming from. Tried re-installing the packages after removing them, but it still complains about the missing module.
Here is my package.json file. (Don't mind the mixture of material-ui and bootstrap for the front-end)
Many thanks!
{
"name": "redux-easy-boilerplate",
"version": "1.3.3",
"description": "",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --config webpack/prod.config.js --progress --display-error-details",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"start": "webpack-dev-server --hot --config webpack/dev.config.js --color --progress",
"test": "jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"
},
"jest": {
"setupFiles": [
"./jestsetup.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "identity-obj-proxy"
},
"modulePathIgnorePatterns": [
"jestsetup.js"
],
"collectCoverageFrom": [
"**/src/actions/**.{js,jsx}",
"**/src/reducers/**.{js,jsx}",
"**/src/constants/**.{js,jsx}",
"!**/src/actions/account.js",
"!**/src/actions/user.js",
"!**/src/reducers/account.js",
"!**/src/reducers/user.js",
"!**/src/reducers/index.js",
"!**/http_functions.js",
"!**/misc.js"
]
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"react",
"reactjs",
"boilerplate",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"author": "https://github.com/anorudes, https://github.com/keske",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/polyfill": "^7.2.5",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"autoprefixer": "6.5.3",
"axios": "^0.15.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"bootstrap": "^3.3.5",
"bootstrap-less": "^3.3.8",
"bootstrap-loader": "^3.0.2",
"bootstrap-sass": "^3.4.0",
"bootstrap-webpack": "0.0.6",
"classnames": "^2.2.3",
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^0.26.4",
"csswring": "^5.1.0",
"deep-equal": "^1.0.1",
"deep-freeze": "0.0.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.2.1",
"eslint": "^3.4.0",
"eslint-config-airbnb": "13.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^3.0.1",
"eslint-plugin-react": "^6.1.2",
"expect": "^1.13.4",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.5",
"express": "^4.16.4",
"express-open-in-editor": "^1.1.0",
"file-loader": "^3.0.1",
"gapi": "0.0.3",
"history": "^4.4.1",
"html-webpack-plugin": "^3.2.0",
"http-proxy": "^1.12.0",
"identity-obj-proxy": "^3.0.0",
"imports-loader": "^0.6.5",
"jquery": "^3.1.0",
"jwt-decode": "^2.1.0",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.7.0",
"less": "^2.5.3",
"less-loader": "^4.1.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.5.0",
"morgan": "^1.9.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"q": "^1.4.1",
"qs": "^6.1.0",
"rc-datepicker": "^4.0.1",
"react-addons-css-transition-group": "^15.6.2",
"react-addons-test-utils": "^15.6.2",
"react-calendar-component": "^1.0.0",
"react-date-picker": "^5.3.28",
"react-datepicker": "^0.37.0",
"react-document-meta": "^2.0.0-rc2",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "^1.3.0",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "^5.3.3",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-test-renderer": "^15.6.2",
"react-transform-hmr": "^1.0.1",
"redux": "^3.2.1",
"redux-form": "^6.0.1",
"redux-logger": "2.7.4",
"redux-mock-store": "^1.3.0",
"redux-thunk": "^2.1.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.13.2",
"url-loader": "^0.5.7",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-middleware": "^3.5.2",
"webpack-dev-server": "^3.1.14",
"webpack-hot-middleware": "^2.24.3",
"webpack-merge": "^4.2.1",
"yargs": "^6.5.0"
},
"dependencies": {
"#material-ui/core": "^3.9.0",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^3.0.0-alpha.8",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-sass-loader": "^1.0.10",
"clsx": "^1.0.4",
"codemirror": "^5.33.0",
"date-fns": "^1.30.1",
"emoji-dictionary": "^1.0.10",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"gulp-sass": "^4.0.2",
"markdown-to-jsx": "^6.9.0",
"marked": "^0.3.12",
"moment": "^2.22.2",
"notistack": "^0.8.6",
"react": "^16.7.0",
"react-bootstrap": "^0.32.3",
"react-bootstrap-datetimerangepicker": "^2.0.4",
"react-checkbox-tree": "^1.5.1",
"react-date-range": "^1.0.0-beta",
"react-dom": "^16.7.0",
"react-drag-and-drop": "^2.4.0",
"react-markdown": "^4.2.2",
"react-notifications": "^1.4.3",
"react-swipeable-views": "^0.12.13",
"react-time-picker": "^3.5.2",
"react-timezone": "^2.3.0",
"recharts": "^1.4.2",
"prop-types": "latest",
"uuid": "latest"
}
}
I found a solution. Just did npm install date-fns#next and everything was okay. Had to change some lines of code in app to match date-fns documentation though.
When running my gulp task, I get the following error:
SyntaxError in plugin "gulp-babel"
Message:
/Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
^^^^^^^^^^^^^^
I'm not sure why this is as I am running the required plugins to allow ES6 imports/exports, or so I thought...
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"add-module-exports",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from"
]
}
package.json - I've included the full list, most of it will probably be irrelevant but just in case there are any known package conflicts.
"dependencies": {
"#babel/polyfill": "^7.8.3",
"classnames": "^2.2.5",
"concurrent-transform": "^1.0.0",
"deep-freeze": "0.0.1",
"eslint": "^3.17.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.10.0",
"git-rev": "^0.2.1",
"gulp-awspublish": "^4.0.0",
"gulp-sftp": "^0.1.5",
"moment": "^2.18.1",
"moment-timezone": "^0.5.26",
"path": "^0.12.7",
"qs": "^6.4.0",
"react": "^16.8.4",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^16.8.4",
"react-fastclick": "^3.0.2",
"react-redux": "^4.4.5",
"react-router": "^3.2.5",
"react-router-redux": "^4.0.8",
"react-string-replace": "^0.4.0",
"react-transition": "^1.0.3",
"react-transition-group": "^2.7.0",
"redux": "^3.5.2",
"redux-thunk": "^2.3.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.8.3",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-polyfill": "^6.26.0",
"babelify": "^9.0.0",
"chai": "^3.5.0",
"enzyme": "^2.7.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-clean": "^0.3.2",
"gulp-color": "0.0.1",
"gulp-connect": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-mocha": "^4.3.0",
"gulp-param": "^0.6.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^2.4.1",
"gulp-ssh": "^0.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.1.0",
"gulp-watch": "^4.3.11",
"gulp-webserver": "^0.9.1",
"jest": "^25.1.0",
"jsdom": "^9.12.0",
"lint-staged": "^3.4.0",
"mocha": "^3.2.0",
"mocha-jsdom": "^1.1.0",
"mocha-junit-reporter": "^1.13.0",
"mock-require": "^2.0.1",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.6.0",
"react-addons-test-utils": "^15.6.0",
"react-tools": "^0.13.3",
"redux-mock-store": "^1.2.3",
"run-sequence": "^1.2.2"
}
Any help appreciated - I'm really at a loss for this one.
(Using node v9.11.2)
From this thread
The problem is that we added export * as ns from "foo" support by
default to #babel/parser (in #10521) but not to #babel/preset-env.
As a workaround, you can enable
#babel/plugin-proposal-export-namespace-from in your config.
So add #babel/plugin-proposal-export-namespace-from to your .babelrc and dev dependencies and you should be OK!
It looks like eventually this will be built into the preset-env so you won't have to use a plugin.
My app used Nuxt 2.1, than I graduately updated it and till Nuxt 2.4 everything is ok, but from 2.5 and up production builds brake with global is not defined error.
Place of error is in .nuxt/client.js#26:
if (!global.fetch) { global.fetch = fetch }
I can't figure out how to fix this (need to define global as far as I understand) and no answers out there. As well as such bug reports, what is strange.
Dependencies list:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.7",
"#fortawesome/free-regular-svg-icons": "^5.4.2",
"#fortawesome/free-solid-svg-icons": "^5.4.2",
"#fortawesome/vue-fontawesome": "^0.1.1",
"#johmun/vue-tags-input": "^2.0.1",
"#nuxtjs/auth": "^4.5.3",
"#nuxtjs/axios": "^5.3.6",
"#nuxtjs/dotenv": "^1.3.0",
"#nuxtjs/google-analytics": "^2.2.0",
"#nuxtjs/moment": "^1.0.0",
"#saeris/vue-spinners": "^1.0.8",
"apexcharts": "^2.0.9",
"axios": "^0.18.0",
"canvas": "^2.0.1",
"deep-map": "^2.0.0",
"deepmerge": "^3.3.0",
"element-ui": "^2.4.7",
"glob-all": "^3.1.0",
"html-element-attributes": "^2.0.0",
"json-loader": "^0.5.7",
"laravel-echo": "^1.5.3",
"lockr": "^0.8.5",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"nib": "^1.1.2",
"nuxt": "^2.8.1",
"nuxt-babel": "^1.0.1",
"nuxt-i18n": "^5.12.7",
"purgecss-webpack-plugin": "^1.5.0",
"pusher-js": "^4.4.0",
"raw-loader": "^3.0.0",
"rupture": "^0.7.1",
"s-grid": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"underscore": "^1.9.1",
"v-viewer": "^1.3.1",
"vue-apexcharts": "^1.2.1",
"vue-awesome": "^3.2.0",
"vue-cookie-law": "^1.10.0",
"vue-filter": "^0.2.5",
"vue-js-modal": "^1.3.28",
"vue-lodash": "^2.0.0",
"vue-nl2br": "^0.1.1",
"vue-scrollto": "^2.15.0",
"vue-the-mask": "^0.11.1",
"vue-wysiwyg": "^1.7.2",
"vue2-editor": "^2.6.6",
"vue2-google-maps": "^0.10.6",
"vue2-transitions": "^0.2.3",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "^1.5.4"
},
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/node": "^7.5.0",
"#babel/plugin-proposal-export-default-from": "^7.5.2",
"#babel/plugin-proposal-export-namespace-from": "^7.5.2",
"#babel/plugin-proposal-object-rest-spread": "^7.5.4",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.5.0",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.5.4",
"#babel/preset-flow": "^7.0.0",
"babel-eslint": "^8.2.1",
"cross-env": "^5.2.0",
"deep-map-async": "^1.5.1",
"electron": "2.0.0-beta.7",
"electron-builder": "^20.8.1",
"electron-devtools-installer": "^2.2.3",
"es6-weak-map": "^2.0.3",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"google-translate-api": "^2.3.0",
"tosource": "^1.0.0",
"translatte": "^2.4.3",
"webpack-node-externals": "^1.7.2",
"yargs": "^13.2.4"
}
.babelrc:
{
"presets": ["#babel/env"],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-export-namespace-from"
]
}
After many hours of investigation I've figured out that problem was in this config:
extend(config, {isDev, isClient, isServer}) {
if (isClient) {
config.target = process.env.BUILD_TARGET || 'electron-renderer';
}
})
Have ho idea why it all worked prior 2.5 and broke after, but here is the case
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.
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.