My project was working perfectly fine.. But after doing a git push, I'm suddenly getting an error when I run gulp:
{ [Error: ModuleParseError: Module parse failed:
/Users/xyz/project/node_modules/iconv-lite/encodings/tables/gb18030-ranges.json
Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| {"uChars":[128,16 ....
Why is this happening? I have uninstalled and reinstalled this module iconv-lite, but it doesn't seem to help.
I received this same exact error. You'll want to install a JSON loader module. I'm using json-loader in this example.
npm install json-loader --save
Then, you need to add this loader to your webpack.config.js
module: {
loaders: [
{ test: /\.json$/, loader: "json-loader"}
]
}
I had this dependency by an indirect dependency on node-fetch and fixed the issue by adding the following to my webpack.config.js:
externals: {
'node-fetch': 'fetch'
}
Deleting the file solved the issue.
Related
i get the following error message in the backend:
Class 'GeorgRinger\Eventnews\Backend\FormDataProvider\EventNewsRowInitializeNew' not found
I run into the exception when i try to edit the page or open the template tool. So i cannot activate the static setup.
The file EventNewsRowInitializeNew.php is where it belongs:
/typo3conf/ext/eventnews/Classes/Backend/FormDataProvider/EventNewsRowInitializeNew.php
The psr-4 definition in composer.lock seems correct:
"autoload": {
"psr-4": {
"GeorgRinger\\Eventnews\\": "Classes"
}
},
TYPO3 8.7.9
News 6.2.1
eventnews 2.0.1
PHP 7.1.9 on mittwald server
Installation with composer
What i tried:
clearing all caches in install tool
deinstall and install the extensions once again
Any ideas?
Did you try composer dump to rebuild the autoloader?
While testing material-ui v1.0.0-beta, I encountered with the following error when building using webpack 3.8.0. I came across with few other questions like this, too, but am hoping if someone could confirm this is a legitimate issue and is still seen by people? I even added "react-transition-group": "^2.2.1" to package.json and so far no luck. Thanks in advance for your help.
ERROR in ../node_modules/material-ui-next/ButtonBase/Ripple.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in './node_modules/material-ui-next/ButtonBase'
I have "react-router": "^3.2.0", in my package.json in case this may help folks understand what might be the root cause.
[UPDATE] While investigating, I removed node_modules and issued npm cache clean as well as ensure the global cache is cleared by issuing npm ls -gp --depth=0 | awk -F/ '/node_modules/ && !/\/npm$/ {print $NF}' | xargs npm -g rm. This didn't fix the issue.
Follow the steps explained in this ticket for solution: material-ui-next/9356
Summary of Solution
The issue relates to how webpack searches for dependencies at build time and establishes the dependency graph of all peer dependencies for each and every module. When digging further, I noted that material-ui#0.19.4 has react-transition-group#1.2.1 as its peer dependency while material-ui-next#1.0.0 beta has react-transition-group#2.2.1 as its peer dependency. Furthermore, I suspect because I have both material-ui releases on my project, when importing a component from material-ui-next, the expected path for react-transition-group#2.2.1 from material-ui-next's perspective is project/node_modules but apparently due to having two versions of material-ui, the later installs react-transition-group#2.2.1 under material-ui-next.
In webpack path configurations, add the following:
module.exports = {
app: path.resolve(CURRENT_WORKING_DIR, "app"),
assets: path.resolve(CURRENT_WORKING_DIR, "public", "assets"),
compiled: path.resolve(CURRENT_WORKING_DIR, "compiled"),
public: "/assets/",
modules: path.resolve(CURRENT_WORKING_DIR, "node_modules"),
extraModules: path.resolve(CURRENT_WORKING_DIR,
"node_modules/material-ui-next/node_modules"),
};
And finally add the extra path to webpack's resolve attribute:
module.exports = {
modules: [PATHS.app, PATHS.modules, PATHS.extraModules],
extensions: [".js", ".jsx", ".css"],
};
to fix above issue:
please install react-transition-group
npm i react-transition-group#next --save
I am trying to use Karma with Coffeescript. The following preprocessor line is there in karma config file:
preprocessors: {
'**/*.coffee': 'coffee'
}
But I am getting the error -
Can not load "coffee", it is not registered!
Perhaps you are missing some plugin?
karma-coffee-preprocessor is available as devDependencies in package.json. Has anyone faced this issue? Thanks.
I figured out the solution. It is because of not installing karma-cli. I though installing karma globally is enough. But after installing karma-cli everything is fine.
I installed sidr with bower, but when I try to run gulp, it breaks and outputs the following error
bower_components/sidr/src/scss/sidr/_base.scss
Error: File to import not found or unreadable: compass/css3
on line 1 of bower_components/sidr/src/scss/sidr/_base.scss
>> #import 'compass/css3';
^
I looked, and this compass/css3 file does not exists. _base.scss is the only file in that directory. Is there a fix for this that won't get over written whenever bower updates?
Not sure what you're using it with, but I'm trying to get it working with WordPress/Sage and found this link.
Basically:
Run npm install compass-mixins --save-dev in your theme directory. (See Edit 1 Below)
Edit the cssTasks - includePaths section of your gulpfile.js to point to the location of the compass folder eg: './node_modules/compass-mixins/lib'
Hope that helps!
Caveat
While that fixed the error for not finding the compass/css3 folder, I am now getting these warnings:
WARNING: PIE does not support background-image. Use #include background(linear-gradient(#4d4d4d, #1a1a1a)) instead.
on line 74 of node_modules/compass-mixins/lib/compass/css3/_images.scss
from line 46 of bower_components/sidr/src/scss/sidr/_base.scss
WARNING: PIE does not support background-image. Use #include background(linear-gradient(white, #dfdfdf)) instead.
on line 74 of node_modules/compass-mixins/lib/compass/css3/_images.scss
from line 46 of bower_components/sidr/src/scss/sidr/_base.scss
It also seems to be causing issues with uglify-js because I could run gulp fine before bower installing sidr.
Will update as I progress.
EDIT 1
After reading this, I uninstalled the npm compass-mixins package and installed via bower and changed the path in the gulpfile.js accordingly.
The Warnings for PIE are gone. Still experiencing issues with uglify-js though.
EDIT 2
Ran npm install gulp-util and set up the gulpfile to output more info on the error.
{ [Error: scripts/main.js: Unexpected token: name (sidr)]
message: 'scripts/main.js: Unexpected token: name (sidr)',
fileName: 'scripts/main.js',
...
showStack: false,
showProperties: true,
plugin: 'gulp-uglify' }
I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.
I installed blueimp-file-upload and jquery.ui.widget from NPM
npm install --save blueimp-file-upload
npm install --save jquery.ui.widget
and I require blueimp-file-upload in my entry file
require('blueimp-file-upload')
but when I run webpack, I get thie error:
ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
# ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19
If you're working with images:
Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:
Install missing dependencies:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
Configure Webpack:
config.resolve = {
extensions: ['', '.js'],
alias: {
'load-image': 'blueimp-load-image/js/load-image.js',
'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
};
Include scripts in your app:
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";
Disable both AMD and CommonJS and use the Browser Global jQuery.
/* The jQuery UI widget factory, can be omitted if jQuery UI is already included */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
/* The Iframe Transport is required for browsers without support for XHR file uploads */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
/* The basic File Upload plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
/* The File Upload processing plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
/* The File Upload validation plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
/* The File Upload Angular JS module */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-angular.js');
This is the configuration I'm using to integrate webpack, blueimp-fileupload with angular. Alternatively you can configure in your webpack.config.js as a regex to avoid repeating loaders.
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
I had almost identical problem, except that Error announced not 'jquery.ui.widget' but 'jquery/ui/widget'.
For me #Gowrav answer was wrong way.
After days of straying I've solved it in the simple way. Just did:
npm install jquery-ui
The fact is that jquery.fileupload.js searching for its vendor:
But in context where jquery.fileupload.js is trying to import dependency, of course, it can't be found (resolved). So I add it to project instead.
P.S. It's just my opinion about how does all work. But this way has helped me.
jquery.fileupload.js checks for AMD require first which results in this error. You can teach webpack not to use AMD style for this file. (Make sure to npm install imports-loader for this method to work.):
require('imports?define=>false!blueimp-file-upload')
It should correctly register the module as CommonJS and will require the jquery.ui.widget from the right location.
Read more here: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles
You can add an alias to jquery.ui.widget's main file - it unfortunately doesn't specify one in its package.json, so webpack can't find it otherwise.
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
first install two plugins
npm i blueimp-file-upload --save
npm i jquery-ui --save
then require in web pack
require('blueimp-file-upload/js/jquery.fileupload')
actually you can solve this by changing your webpack config, just add the path to resolve (for example I am using bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
In webpack 3.x, the syntax will look like this:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}