boopathi / react-svg-loader

A loader for webpack, rollup, babel that loads svg as a React Component
MIT License
638 stars 86 forks source link

Unable to convert any svg to react component #43

Closed jikkujose closed 8 years ago

jikkujose commented 8 years ago

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:

ERROR ERROR ERROR cloud.svg ReferenceError: Unknown plugin "syntax-jsx" specified in "base" at 0, attempted to resolve relative to "/Users/jikkujose/Desktop"
    at /usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:179:17
    at Array.map (native)
    at Function.normalisePlugins (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:155:20)
    at OptionManager.mergeOptions (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:277:36)
    at OptionManager.init (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10)
    at File.initOptions (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at /usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/lib/loader.js:71:37
    at process._tickCallback (internal/process/next_tick.js:103:7)
ERROR ERROR ERROR cloud.svg ReferenceError: Unknown plugin "syntax-jsx" specified in "base" at 0, attempted to resolve relative to "/Users/jikkujose/Desktop"
    at /usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:179:17
    at Array.map (native)
    at Function.normalisePlugins (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:155:20)
    at OptionManager.mergeOptions (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:277:36)
    at OptionManager.init (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10)
    at File.initOptions (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (/usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at /usr/local/Cellar/node/5.11.0/lib/node_modules/react-svg-loader/lib/loader.js:71:37
    at process._tickCallback (internal/process/next_tick.js:103:7)
boopathi commented 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.

jikkujose commented 8 years ago

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
boopathi commented 8 years ago

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 ?

jikkujose commented 8 years ago

Sure, please take a look at this: https://github.com/JikkuJose/svg-loader-example

boopathi commented 8 years ago

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.

  1. No need to require react-svg-loader - https://github.com/JikkuJose/svg-loader-example/blob/4dbd8f400156cdd8f370907a0a82d93bcf853a59/webpack.config.js#L1
  2. Change to the commented string instead of the Fn name - https://github.com/JikkuJose/svg-loader-example/blob/4dbd8f400156cdd8f370907a0a82d93bcf853a59/webpack.config.js#L16
jikkujose commented 8 years ago

Oh cool, thanks! it worked!