Closed jikkujose closed 8 years ago
Looks like there is some problem with installation and the babel-plugin-syntax-jsx
is somehow left out. I tried with a fresh install of the loader from npm and used it on your input file - cloud.svg
and it works fine.
Just manually installed & tried it with the example. But again stuck in error, following was the result:
Hash: 86254af6453284f9b495
Version: webpack 2.1.0-beta.4
Time: 5364ms
Asset Size Chunks Chunk Names
bundle.js 689 kB 0 [emitted] main
+ 159 hidden modules
ERROR in ./index.js
Module not found: Error: Can't resolve 'function (content) {
this.cacheable && this.cacheable(true);
this.addDependency(this.resourcePath);
var query = _loaderUtils2.default.parseQuery(this.query);
var cb = this.async();
Promise.resolve(String(content)).then(optimize(query.svgo))
// .then(r => (console.log(r), r))
.then(transform({
es5: query.es5
})).then(function (result) {
cb(null, result.code);
}).catch(function (err) {
cb(err);
});
}?{"es5":false,"svgo":{"pretty":true}}' in '/Users/jikkujose/ReactJS/svg-loader/example'
@ ./index.js 11:11-31
ERROR in ./index.js
Module not found: Error: Can't resolve 'function (content) {
this.cacheable && this.cacheable(true);
this.addDependency(this.resourcePath);
var query = _loaderUtils2.default.parseQuery(this.query);
var cb = this.async();
Promise.resolve(String(content)).then(optimize(query.svgo))
// .then(r => (console.log(r), r))
.then(transform({
es5: query.es5
})).then(function (result) {
cb(null, result.code);
}).catch(function (err) {
cb(err);
});
}?{"es5":false,"svgo":{"pretty":true}}' in '/Users/jikkujose/ReactJS/svg-loader/example'
@ ./index.js 15:13-35
ERROR in ./index.js
Module not found: Error: Can't resolve 'function (content) {
this.cacheable && this.cacheable(true);
this.addDependency(this.resourcePath);
var query = _loaderUtils2.default.parseQuery(this.query);
var cb = this.async();
Promise.resolve(String(content)).then(optimize(query.svgo))
// .then(r => (console.log(r), r))
.then(transform({
es5: query.es5
})).then(function (result) {
cb(null, result.code);
}).catch(function (err) {
cb(err);
});
}?{"es5":false,"svgo":{"pretty":true}}' in '/Users/jikkujose/ReactJS/svg-loader/example'
@ ./index.js 19:13-35
There is something wrong that you're doing here. Can you share your config that I can try it out ?, or some open sample project where this issue is replicated ?
Sure, please take a look at this: https://github.com/JikkuJose/svg-loader-example
The problem is with your webpack config. I suppose this is a bug upstream that it doesn't accept plain functions. But you need not require and provide a function as the loader argument. You can simply pass in the string, (as it is done for 'babel') and webpack will resolve it.
Oh cool, thanks! it worked!
I tried to use the package within the project & also via CLI, it fails in both cases. I was trying to convert a simple SVG optimised using the online SVGO site. I ran:
<path>/svg2react cloud.svg
to get the following: