Error: Cannot find module 'svg-baker-runtime/symbol'

[ghost]

Do you want to request a feature, report a bug or ask a question?
Ask a question

What is the current behavior?
Error: Cannot find module 'svg-baker-runtime/symbol'

I have submodule (kit for component) and main project. I tested svg-sprite-loader in kit and it was ok. Then I added this rules to main project ( https://gist.github.com/pSHCH/cb03ff5469df85439f4fe42969430330 ).

My component in kit:

import React from 'react';
import user from './img/user.svg';

var svg = {
  user
};

function Icon(props) {
  return <i>
    <svg className={st['icon-path']} viewBox={svg[props.type].viewBox}>
      <use xlinkHref={'#${svg[props.type].id}'}/>
    </svg>
  </i>;
}

export default Icon;

and use at page:

<Icon type='user'/>

What is the expected behavior?

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.
The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).
It you don't want to create a repository - create a gist with multiple files

If this is a feature request, what is motivation or use case for changing the behavior?

Please tell us about your environment:

• Node.js version: 7.4.0
• webpack version: 2.2.0
• svg-sprite-loader version: 3.2.4
• OS type & version: OS X El Capitan

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[draperunner]

I had a similar problem with Module not found: Error: Can't resolve 'svg-baker-runtime/browser-symbol', using v3.2.5. Reverting back to v3.2.1 resolved the problem.

[kisenka]

@pSHCH @draperunner still reproduces with latest version?

[kisenka]

@pSHCH @draperunner ping

[draperunner]

I can't reproduce the issue with version 3.2.4, 3.2.5, nor 3.2.6. Maybe svg-baker-runtime was updated?

[kisenka]

Probably it was error while publishing an 3.2.4 version. Closing this one.

[thien-do]

I'm seeing this issue at 3.4.1 :(

[kisenka]

@dvkndn could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files. Also it will be useful if you provide name of your package manager and it's version.

[derrickpelletier]

I'm seeing the error too. Error was only occurring when running npm install --production on our project. Will see if i can get a smaller test case together if I find time.

Edit: looks like it was between 3.4.0 and 3.4.1

[kisenka]

@pSHCH @draperunner @dvkndn @derrickpelletier I can help you only if anyone of you guys demonstrate this error in git repo/gist. I need only package.json with lock npm/yarn file, webpack config and small piece of your code.

[ghost]

Hello @kisenka, I tried the last v and still have problems. So, my template the same (component in UI-KIT and it using in other projects, see my first message).

So, my kit config (https://gist.github.com/pSHCH/ec32a422959f2cb73119e9a7e4b6cb7a) and everything ok, I see my svg icons. Then I use UI-KIT in other project like submodule. My config in other project: https://gist.github.com/pSHCH/927318b70c2fc1edb9e559d1e6576573 and package.json in this project: https://gist.github.com/pSHCH/2ba50e417b81f52c4b2985dbd5821c43

Resalt:

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#undefined"></use>

[kisenka]

@pSHCH thanks for response. I have no time to setup project manually I don't know what UI-KIT is and how you use sprite loader as submodule. Could you please setup project, where I can run npm script and have an error?

[ghost]

@kisenka sorry, I can't. So, if I move component (svg icons) from submodule to project - it works ok. If i use component from submodule - I have error. So, I can make test project to show it at weekend.

[kisenka]

@pSHCH will be great!

[do-diegoortiz]

@pSHCH didn't you find a way to make it work from submodules?

[sunil-jhamnani-zz]

Was facing this issue with version 4.1.6. Downgraded this to version 4.1.3 and it's gone. Config I used:

{
        test: /\.svg$/,
        include: SVG_SPRITE_PATH_LIST,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              // Keeping false for now, this means that
              // SVG will be inlined with the JS. Ideally
              // it should be served separately via CDN.
              extract: false,
              // Creates sprite sheet for each type of SVG?
              spriteFilename: svgPath => `sprite-sheet${svgPath.substr(-4)}`,
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              svgo: {
                removeComments: true,
                removeTitle: true,
                convertColors: {
                  shorthex: true
                }
              }
            }
          }
        ]
}

[ahmadalfy]

Can confirm @sunil-jhamnani solution is working.

[semirart]

Still doesn't work on 4.2.5.

[kisenka]

@semirart could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[semirart]

@kisenka I'm not sure that the gist is needed.
My problem is related to next-optimized-images (a plugin for Next.js).
I'm trying to use SVG sprites (here is the docs). The related issue (mentioned above) – cyrilwanner/next-optimized-images#75.

[kisenka]

@semirart I'm ready to help, but I need minimal setup next.js project with svg-sprite-loader where error occurs.

[semirart]

@kisenka Thank you! Here's the repo.

You can bootstrap it like this:

yarn create next-app --example https://github.com/semirart/next-with-svg-sprites
# or
npm init next-app --example https://github.com/semirart/next-with-svg-sprites

To run the project:

yarn dev
# or
npm run dev

[kisenka]

@semirart I'm getting following error:

[semirart]

@kisenka Sorry, forgot to add all files. I've updated the repo, you can try it again.

[kisenka]

Fixed in [email protected]

[semirart]

@kisenka I confirm, that the issue is resolved in 5.0.0. Thank you!