I'm trying to stop using bower dependencies in my Ember project. I updated ember-cli to 2.15.1 and moved bower dependencies to package.json. Maybe it will be helpfull to know which dependencies:
"font-awesome": "~4.7.0",
"jquery.inputmask": "
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
We also used bootstrap-datepicker as a bower dependency, but due to the error message I swapped it for ember-bootstrap-datetimepicker hoping that it would solve my issue. I reinstalled node_modules, removed bower_components, cleared tmp and dist folders and run npm cache clean && bower cache clean. From the project, I removed bower.json and .bowerrc. I also explicitly defined in package.json bowerDirectory: null so that in ember-cli-build.js broccoli won't be looking for any bower components.
in my ember-cli-build.js :
const isProductionLikeBuild = ['production', 'staging', 'review', 'e2e-testing'].indexOf(env) > -1;
const app = new EmberApp(defaults, {
fingerprint: {
enabled: isProductionLikeBuild,
prepend: envConf.assetsPrefix
},
sourcemaps: {
enabled: !isProductionLikeBuild
},
minifyCSS: { enabled: isProductionLikeBuild },
minifyJS: { enabled: isProductionLikeBuild },
'ember-cli-babel': {
includePolyfill: true
},
'ember-bootstrap-datetimepicker': {
"importBootstrapCSS": true,
"importBootstrapJS": true,
"importBootstrapTheme": true
},
'ember-font-awesome': { fontsOutput: '/assets/fonts' },
exportConfig: {
environments: [
'production',
'staging',
'review',
'e2e-testing'
]
}
});
When I turn off sourcemaps, app is building correctly.
When I don't however, this is what I get after typing ember s:
The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/martagajowczyk/Desktop/Project/project-frontend/tmp/source_map_concat-input_base_path-S2ZmmRR0.tmp/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at SourceMap.addFile (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:200:16
at Array.forEach (native)
at Concat.<anonymous> (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:198:24)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:419:12
at initializePromise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:567:5)
at new Promise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:1039:33)
The broccoli plugin was instantiated at:
at BroccoliMergeTrees.Plugin (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-plugin/index.js:7:31)
at new BroccoliMergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:16:10)
at Function.BroccoliMergeTrees [as _upstreamMergeTrees] (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:10:53)
at mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/merge-trees.js:85:33)
at EmberApp._mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1832:12)
at EmberApp.javascript (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1307:17)
at EmberApp.toArray (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1689:12)
at EmberApp.toTree (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1711:38)
at module.exports (/Users/martagajowczyk/Desktop/Project/project-frontend/ember-cli-build.js:46:14)
at Builder.setupBroccoliBuilder (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/models/builder.js:56:19)
What can be the reason of linking to bower_components?
Thanks
Output from ember version --verbose && npm --version && yarn --version:
ember-cli: 2.15.1
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k
os: darwin x64
3.10.10
0.24.6
Here's part of my package.json with dependencies and dev-dependencies listed:
"devDependencies": {
"broccoli-asset-rev": "^2.5.0",
"ember-ajax": "^3.0.0",
"ember-bootstrap-datetimepicker": "^1.1.0",
"ember-buffered-proxy": "^0.7.0",
"ember-can": "^0.8.4",
"ember-cli": "^2.15.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-autoprefixer": "0.8.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-bootstrap-datepicker": "^0.5.6",
"ember-cli-code-coverage": "^0.4.1",
"ember-cli-content-security-policy": "1.0.0",
"ember-cli-dependency-checker": "^2.0.1",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.6.1",
"ember-cli-mirage": "^0.3.1",
"ember-cli-moment-shim": "^3.5.0",
"ember-cli-page-object": "1.11.0",
"ember-cli-polyfill-io": "^1.2.2",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-uglify": "^1.2.0",
"ember-cli-yuidoc": "0.8.8",
"ember-cp-validations": "^3.3.0",
"ember-data": "^2.13.1",
"ember-deep-set": "^0.1.2",
"ember-exex": "^0.1.12",
"ember-export-application-global": "^2.0.0",
"ember-feature-flags": "3.0.0",
"ember-font-awesome": "4.0.0-alpha.3",
"ember-inflector": "^2.0.0",
"ember-inputmask": "0.4.0-beta.5",
"ember-intercom-io": "^0.1.3",
"ember-intl": "^2.23.1",
"ember-intl-cp-validations": "^3.0.1",
"ember-load-initializers": "^1.0.0",
"ember-math-helpers": "^2.0.5",
"ember-modal-dialog": "^2.3.0",
"ember-moment": "7.4.1",
"ember-multiselect-checkboxes": "^0.10.3",
"ember-power-select": "^1.8.2",
"ember-promise-helpers": "^1.0.3",
"ember-radio-button": "1.1.1",
"ember-resolver": "^4.1.0",
"ember-responsive": "2.0.4",
"ember-rl-dropdown": "^0.10.1",
"ember-route-action-helper": "^2.0.3",
"ember-simple-auth": "1.4.0",
"ember-sinon": "1.0.1",
"ember-sinon-qunit": "2.0.0",
"ember-sliding-sticky": "^1.0.0",
"ember-source": "^2.13.0",
"ember-svg-jar": "^0.11.1",
"ember-test-selectors": "0.3.7",
"ember-truth-helpers": "1.3.0",
"ember-uploader": "^1.2.2",
"ember-watson": "^0.9.1",
"eonasdan-bootstrap-datetimepicker": "~4.17.42",
"loader.js": "^4.4.0",
"modal-dialog": "1.6.3",
"yuidoc-ember-theme": "^1.3.0"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"broccoli-funnel": "^2.0.1",
"font-awesome": "~4.7.0",
"jquery.inputmask": "3.3.4",
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
}
I strongly assume your problem is ember-cli-bootstrap-datepicker. This addon does add the bootstrap-datepicker bower package during installation and probably should not be used without it.
Personally if you're looking for an ember DatePicker I recommend ember-pikaday.
If you need recommendations about addons I recommend ember observer, or ask in the slack channel references on the community page..
Related
I am using Vuexy Dashboard in my project, Vuexy comes in with Vue 2, so I am trying to upgrade it to Vue 3, after fixing some errors, I'm stuck on this one, any help is much appreciated.
Thank you.
This is my package.json file :
{
"name": "vuexy-vuejs-react-html-laravel-admin-dashboard-template",
"version": "6.4.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --skip-plugins #vue/cli-plugin-eslint",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#casl/ability": "4.1.6",
"#casl/vue": "1.1.1",
"#vue/cli-plugin-eslint": "^5.0.4",
"#vue/compat": "^3.1.0-0",
"#vue/composition-api": "^1.6.1",
"#vueuse/core": "4.0.0",
"animate.css": "4.1.1",
"apexcharts": "^3.35.2",
"assert": "^2.0.0",
"axios": "^0.27.2",
"axios-mock-adapter": "1.19.0",
"bootstrap": "4.6.0",
"bootstrap-vue": "2.21.1",
"buffer": "^6.0.3",
"chart.js": "2.9.4",
"core-js": "3.8.1",
"echarts": "4.8.0",
"jsonwebtoken": "8.5.1",
"leaflet": "1.6.0",
"portal-vue": "2.1.7",
"postcss-rtl": "1.7.3",
"prismjs": "^1.28.0",
"stream": "0.0.2",
"swiper": "5.4.5",
"uuid": "8.3.2",
"vue-perfect-scrollbar": "0.2.1",
"vue-prism-component": "1.1.1",
"vue-quill-editor": "3.0.6",
"vue-ripple-directive": "2.0.1",
"vue-router": "3.4.9",
"vue-select": "3.11.2",
"vue-slider-component": "3.2.11",
"vue-sweetalert2": "4.1.1",
"vue-toastification": "1.7.8",
"vue-tour": "1.5.0",
"vue-tree-halower": "1.8.3",
"vue2-leaflet": "2.5.2",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "^5.0.4",
"#vue/cli-plugin-router": "^5.0.4",
"#vue/cli-plugin-vuex": "^5.0.4",
"#vue/cli-service": "^5.0.4",
"#vue/compiler-sfc": "^3.1.0-0",
"#vue/eslint-config-airbnb": "^6.0.0",
"#vuepress/plugin-medium-zoom": "^1.7.1",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-vue": "^8.0.3",
"eslint-plugin-vuejs-accessibility": "^1.1.1",
"sass": "1.32.*",
"sass-loader": "^10.1.0"
}
}
And these are the errors I'm getting while running npm run serve :
ERROR in ./node_modules/#babel/runtime/helpers/esm/nonIterableSpread.js 1:0-43
Module not found: Error: Can't resolve 'core-js/modules/es.error.cause.js' in 'Desktop\consigliere-vue-laravel\e-commerce\frontend\node_modules\#babel\runtime\helpers\esm'
After searching a lot, what works for me was what I found in this blog post:
https://blog.csdn.net/Missbelover/article/details/123221351
Basically, what you need to do is...
Remove all your node_modules dependencies.
npm rm -rf node_modules
Install core-js first.
npm install --save core-js
Finally install everything else.
npm install
yarn install
After this everything should work as expected, a least for me is working now.
Have a good day!
My issue was having 2 projects that differ because they use yarn and npm. I made the mistake of installing jest globally with yarn so had conflicts with my jest version. I ran yarn remove global jest and it worked.
I have an issue while building a project, this error keeps popping up:
Warning: true is not a PostCSS plugin.
This error was not visible before an upgrade was done from node v.10.x.x to v.16.14.x.
Here is the Gruntfile.js task:
grunt.loadNpmTasks('grunt-postcss');
cfg.postcss = {
primary: {
options: {
map: {
inline: false,
annotation: 'web/webroot/_ui/responsive/theme-name/css/'
},
processors: [
require('postcss-inline-svg'),
require('cssnano')({ safe: true }),
require('autoprefixer')
]
},
files: {
'web/webroot/_ui/responsive/theme-name/css/main.css' : ['web/webroot/_ui/responsive/theme-name/css/main.css'],
}
}
Here is the package.json 's devDependencies:
"devDependencies": {
"autoprefixer": "^10.4.4",
"postcss-inline-svg": "^5.0.0",
"cssnano": "^5.1.7",
"grunt": "^1.4.1",
"grunt-available-tasks": "^0.6.3",
"grunt-cli": "^1.2.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^3.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-rtlcss": "^2.0.2",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^3.1.0",
"node-sass": "^7.0.1",
"postcss": "^8.4.12"
}
I tried reverting to an earlier version of autoprefixer, or moving the postcss to a peerDependency, but these possible fixes I found did not work.
Any suggestions would be appreciated!
The problem was related to postcss-inline-svg, there are dependencies not working with node version 16.14 related to node-sass and grunt-sass. So at the moment, removing that plugin is the only solution.
I maintain an browser-based Angular app that was at version 5.6. This app has two components that subscribe to an IOT topic and listen for updates (no pub, just sub).
We need to upgrade to Agnular 11.0.3. I have completed that work. But now the aws-iot-device-sdk NPM module caucuses these errors when I try to run the local web server or run a build:
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/common/lib'
Error: Can't resolve 'path' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'tls' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device/lib'
I have spent many hours pulling my hair out on this issue. Our front-end (browser) IOT code has been working perfectly for the last few years. But the upgrade to Angular 11.0.3 has to happen and this issue is a big blocker.
SAMPLE CODE FROM OUR APPLICATION:
(Our package.json is at the end)
The xxxx-app.component.ts file:
import { AwsIotService } from '../../shared/awsIot/awsIot.service';
this.awsIotService.getNewIotConnection(this.iotTopic, this.iotUrl, (iotClient) => {
//cache the iotClient
this.iotClient = iotClient;
//handle the iotClient's message event
iotClient.on('message', (topic, message) => {
// process the message here:
console.log('IOT Message received:');
console.dir(message);
});
});
awsIotService.ts:
In the code below, "iotUrl" points to a custom service we wrote that provides the details needed by the browser-based Angular app in order to connect and subscribe:
awsIot = require('aws-iot-device-sdk'); //simply requiring that NPM module causes the errors stated above
getNewIotConnection (topic, iotUrl, callback) {
this.httpClient.get(iotUrl).subscribe(responseData => {
const client = this.awsIot.device({
port: 443,
protocol: 'wss',
region: responseData.region,
host: responseData.iotEndpoint,
secretKey: responseData.secretKey,
accessKeyId: responseData.accessKey,
sessionToken: responseData.sessionToken,
});
// subscribe to the topic
client.on('connect', () => client.subscribe(topic));
// call the callback
callback(client);
});
}
UP-TO-DATE SUGGESTIONS THAT I HAVE TRIED:
1 - I have tried using https://www.npmjs.com/package/aws-iot-device-sdk-v2
....but have not found the documentation helpful... I hope I am missing something here.
2 I have tried AWS amplify and followed this tutorial:
https://docs.amplify.aws/start/getting-started/installation/q/integration/angular
...but using AWS amplify to solve this issue would require a re-work of the back-end we built and seems like getting a new transmission for a flat tire (i.e. just need to subscribe to an IOT topic).
OLDER WORKAROUNDS THAT I HAVE TRIED:
3 I tried adding this to package.json:
"browser": {
"fs": false,
"path": false,
"os": false
}
...that did not work.
4 I tried adding this to package.json:
"dependencies": {
...other packages
"mqtt": "2.15.1",
"minimist": "1.2.0",
"websocket-stream": "^5.0.1",
"crypto-js": "3.1.6"
}
...that did not work.
5 I tried the patch.js approach detailed here:
https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d
...that did not work.
6 I tried adding this to webpack.config.js :
resolve: {
fallback: {
fs: false
}
}
...that did not work.
7 I tried adding this to webpack.config.js :
node: {
fs: 'empty'
}
...that did not work (only works in older WebPack.)
Our package.json (just dependencies & devDependencies):
"dependencies": {
"#angular/animations": "^11.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "^11.0.3",
"#angular/core": "^11.0.3",
"#angular/forms": "^11.0.3",
"#angular/platform-browser": "^11.0.3",
"#angular/platform-browser-dynamic": "^11.0.3",
"#angular/router": "^11.0.3",
"#mapbox/mapbox-gl-draw": "^1.2.0",
"#mapbox/mapbox-gl-geocoder": "^2.2.0",
"#ng-bootstrap/ng-bootstrap": "^8.0.0",
"#turf/helpers": "^6.0.0",
"#turf/inside": "^5.0.0",
"#turf/turf": "^5.1.6",
"#types/lodash": "^4.14.165",
"#types/unist": "^2.0.0",
"angular-calendar": "^0.28.22",
"aws-iot-device-sdk": "^2.2.6",
"core-js": "^3.6.4",
"date-fns": "^2.16.1",
"intl": "^1.2.4",
"jquery": "^3.1.1",
"lodash": "^4.17.20",
"mapbox-gl": "^2.0.0",
"moment": "^2.12.0",
"moment-timezone": "^0.5.27",
"ng2-datepicker": "^3.1.1",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.6.3",
"selenium-webdriver": "^3.6.0",
"tslib": "^2.0.0",
"zone.js": "^0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.3",
"#angular/cli": "^11.0.3",
"#angular/compiler": "^11.0.3",
"#angular/compiler-cli": "^11.0.3",
"#ngtools/webpack": "^11.0.3",
"#types/jasmine": "^3.6.2",
"#types/jquery": "^2.0.34",
"#types/node": "^14.14.10",
"#webpack-cli/serve": "^1.1.0",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"codelyzer": "^6.0.0",
"copy-webpack-plugin": "^6.3.2",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"exports-loader": "^1.1.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"jasmine-core": "^3.6.0",
"jasmine-spec-reporter": "^5.0.0",
"karma": "^5.2.3",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"karma-mocha-reporter": "^2.2.5",
"mini-css-extract-plugin": "^1.0.0",
"postcss": "^8.1.13",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-nested": "^5.0.2",
"protractor": "^7.0.0",
"raw-loader": "^1.0.0",
"rimraf": "^3.0.2",
"retyped-stripe-tsd-ambient": "^0.0.0-0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"script-ext-html-webpack-plugin": "^2.1.5",
"style-loader": "^2.0.0",
"to-string-loader": "^1.1.6",
"ts-loader": "^8.0.11",
"ts-node": "^8.3.0",
"tslint": "^6.1.0",
"typescript": "4.0.3",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
Does this help? The author seemed to have/avoid the same trouble as you. He mentions:
"browser": {
"fs": false,
"tls": false,
"path": false
},
I'm using the following environment:
Angular CLI: 12.2.13
Node: 16.13.0 (Unsupported)
Package Manager: npm 8.1.0
OS: linux x64
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1202.13
#angular-devkit/build-angular 12.2.13
#angular-devkit/core 12.2.13
#angular-devkit/schematics 12.2.13
#angular/cdk 12.2.12
#schematics/angular 12.2.13
ng-packagr 12.2.5
rxjs 6.6.7
typescript 4.3.5
And in order to complement the approach of #kackle123, the following worked for me in package.json:
"browser": {
"http": false,
"https": false,
"net": false,
"path": false,
"stream": false,
"tls": false,
"fs": false
}
But it only mute the error outputs, and the package will not work anyways.
I've tried to find the answer all over, but it just doesn't seem to be out there yet.
I'm using React-Toolbox, React-Bootstrap and some custom scss. On my local machine, the build works fine. When I spin up an AWS Ubuntu server and do a basic node production setup, the build fails on my images.
I'm using Image-Webpack-Loader. I'm chaining this on the file-loader.
Here is my production webpack file (Any tips on this are also super appreciated. Always down to learn)
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const autoprefixer = require('autoprefixer');
const modulesPath = path.join(__dirname, 'node_modules');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
var WebpackEnvPlugin = new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
PORT: JSON.stringify(process.env.PORT)
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js',
publicPath: '/assets'
},
postcss: [autoprefixer],
resolve: {
extensions: ['', '.css', '.scss', '.js', '.json'],
},
module: {
loaders: [
{
test: /(\.js)$/,
exclude: /node_modules/,
loaders: ['babel']
},
{ test: /\.css$/,
exclude : path.join(__dirname, '/node_modules/react-toolbox/'),
loader: ExtractTextPlugin.extract("style-loader, css-loader!autoprefixer-loader") },
{
test: /\.scss$/,
exclude : path.join(__dirname, '/node_modules/react-toolbox/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
},
{
test : /(\.scss|\.css)$/,
include : path.join(__dirname, '/node_modules/react-toolbox/'),
loaders : [
require.resolve('style-loader'),
require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
require.resolve('sass-loader') + '?sourceMap'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
HtmlWebpackPluginConfig,
WebpackEnvPlugin,
new ExtractTextPlugin('css/main.css', {
allChunks: true
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
]
}
I've read that by lowering the pngquant quality, that the issue would possibly be resolved, but I've had no such luck.
I get these sort of errors when I build for my different images:
ERROR in ./app/images/logo.png
Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
# ./app/modules/listingpage/listingpage-component.js 55:11-43
an error for where I'm including my main.scss file in my index.js.
ERROR in ./app/stylesheets/scss/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at DependenciesBlock.onModuleBuildFailed (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at /var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at imagemin.buffer.then.catch.err (/var/www/project/node_modules/image-webpack-loader/index.js:42:9)
# ./app/index.js 30:0-39
And an error I believe having to do with loaders:
ERROR in ./app/images/magnifying-glass.png
Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
# ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./app/stylesheets/scss/main.scss 6:6846-6890
I'm including my images using the following format:
const logo = require('../../images/logo.png');
Lastly, here are my package.json dependencies:
"dependencies": {
"async": "^2.0.1",
"autoprefixer": "^6.5.1",
"autoprefixer-loader": "^3.2.0",
"axios": "^0.14.0",
"babel-cli": "^6.16.0",
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.16.0",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.16.3",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.2",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"compression": "^1.6.2",
"cookie-parser": "^1.4.3",
"css-loader": "^0.25.0",
"csv": "^1.1.0",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"express-flash": "0.0.2",
"express-session": "^1.14.1",
"file-loader": "^0.9.0",
"glob": "^7.1.0",
"html-webpack-plugin": "^2.22.0",
"image-webpack-loader": "^2.0.0",
"immutability-helper": "^2.0.0",
"jquery": "^3.1.1",
"jwt-simple": "^0.5.0",
"later": "^1.2.0",
"lodash": "^4.16.3",
"moment": "^2.15.1",
"mongoose": "^4.6.1",
"morgan": "^1.7.0",
"multer": "^1.2.0",
"nodemon": "^1.11.0",
"postcss-loader": "^0.13.0",
"raw-loader": "^0.5.1",
"react": "^15.4.1",
"react-addons-css-transition-group": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-router-bootstrap": "^0.23.1",
"react-test-renderer": "^15.4.1",
"react-toolbox": "^1.2.3",
"redbox-react": "^1.3.1",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"request": "^2.75.0",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2"
},
"devDependencies": {
"babel-eslint": "^7.0.0",
"babel-jest": "^15.0.0",
"babel-preset-es2015": "^6.16.0",
"chai": "^3.5.0",
"css-loader": "^0.25.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"image-webpack-loader": "^2.0.0",
"jest": "^15.1.1",
"jest-cli": "^15.1.1",
"json-loader": "^0.5.4",
"mocha": "^3.1.0",
"node-sass": "^3.10.1",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "^15.3.2",
"redbox-react": "^1.3.1",
"redux-logger": "^2.6.1",
"sass-loader": "^4.0.2",
"toolbox-loader": "0.0.3",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.16.1"
}
I've tried reinstalling my packages, just reinstalling Image-Webpack-Loader, all of the basic things to do. Once again, builds fine locally, doesn't build on server. I'm just not sure what I'm doing wrong at this point. Thanks in advance for your help!
Just as Rohn John says, I install pngquant and optipng on my machine and solve the problem
sudo apt-get install pngquant optipng
mkdir -p node_modules/pngquant-bin/vendor/
mkdir -p node_modules/optipng-bin/vendor/
ln -s /usr/bin/pngquant node_modules/pngquant-bin/vendor/pngquant
ln -s /usr/bin/optipng node_modules/optipng-bin/vendor/optipng
and I tested that use yarn can do the same and easier:
yarn add pngquant
yarn add optipng
yarn add cjpeg
Image loader depends on pngquant binary.
When pngquant-bin npm module is installed it compiles pngquant binary using g++, make, bash, zlib-dev and libpng-dev.
It is unfortunate that the error messages are not clear enough and you're only graced with an unhelpful one.
Make sure to run the following before npm install or yarn install.
apk --no-cache update \
&& apk --no-cache add make bash g++ zlib-dev libpng-dev \
&& rm -fr /var/cache/apk/*
You may replace installing g++ zlib-dev with build-base instead.
Seems like pngquant installation had encountered on some problems.
The error message
"Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT"
means can not find pngquant in node_modules/pngquant-bin/vendor/.
You can try reinstall pngquant or some other npm packages depend on pngquant.
Moreover you should check if your Ubuntu server has pngquant installed.
Alpine linux has issues with pngquant, check this one out
https://github.com/imagemin/pngquant-bin/issues/65
One solution for this can be linking pngquant by installing it from source ( like https://git.alpinelinux.org/cgit/aports/tree/community/pngquant/APKBUILD ) before npm/yarn install, but that sounds too much of work to me for just one package.
I faced the same issue, ended up dropping alpine. I am now using standard docker image for node.
Ran into this issue with a rails capistrano deployment where the node_modules was not created properly for pngquant. The command was not found there.
Ended up doing the deployment again with capistrano.
The same problem appeared after making some updates to node and npm.
Although everything worked fine after the updating, it crashed by showing the message you mentioned.
After searching a lot I couldn't find another answer so I deleted node_modules folder and installed everything from the beginning.
It worked...
gulp-load-plugins is not loading any plugins. Can anyone suggest why this might be?
Node: v0.12.0
NPM: v2.7.3
My package.json:
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0"
}
}
My gulpfile.js:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
console.log(JSON.stringify(plugins)); // {}
gulp.task('default');
Install other gulp plugins.
tl;dr
If that is your complete package.json, looks like you have no other gulp plugins installed.
Lets say the following is your package.json:
package.json
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0",
"gulp-rename": "^1.2.0",
"gulp-concat": "^2.5.2"
}
}
You $ npm install everything, then...
gulpfile.js
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
// `plugins.rename` should exist
// `plugins.concat` should exist
console.log(JSON.stringify(plugins));
gulp.task('default');
Try setting lazy loading to false.
var gulp = require('gulp');
var plugins= require('gulp-load-plugins')({lazy:false});
console.log(JSON.stringify(plugins));
gulp.task('default');
And as others mentioned, install some plugins.
Let me show you what i have and how i do it , maybe that will help.
My package.json :
{
"dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-html-validator": "0.0.5",
"gulp-image-optimization": "^0.1.3",
"gulp-plumber": "*",
"gulp-rev-collector": "^0.1.4",
"gulp-rev-manifest-replace": "0.0.5",
"gulp-ruby-sass": "*",
"gulp-sass": "*",
"gulp-scss-lint": "^0.1.10",
"gulp-sourcemaps": "*",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"vinyl-paths": "^1.0.0"
},
"devDependencies": {
"del": "^1.1.1",
"gulp-cached": "^1.0.4",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.6",
"gulp-filesize": "0.0.6",
"gulp-gzip": "^1.0.0",
"gulp-htmlhint": "0.0.9",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^0.8.0",
"gulp-rename": "^1.2.0",
"gulp-rev": "^3.0.1",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.1",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.2"
}
}
How i run gulp-load-plugins :
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
}),
And this is an example of a plugin:
// html optimization
gulp.task('htmloptimize', function () {
return gulp.src(dev.html)
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist.dist))
});
As you can see all my pipes are called .pipe($.plugin()) meaning $ stands for gulp- . If you have a plugin named gulp-name-secondname you call it like this: .pipe($.nameSecondname()) .
Top were i require gulp-load-plugins i have camelize set to true . Lazy loading loads only the plugins you use not all of them .
Careful with gulp-load-plugins because it slows your tasks , for example i run gulp-webserver , when i use it with gulp-load-plugins the task finishes after 200ms versus 20ms if i use it normally. So don't use with everything, play with it see how much performance you lose on each task and prioritize.