[v2] gatsby-plugin-svg-sprite

arodionova commented 6 years ago

Description

I've been using gatsby-plugin-svg-sprite with previous Gatsby version. After migrating to v2 it stopped working. No svg sprite is cteated and no errors in log

Steps to reproduce

install gatsby-plugin-svg-sprite
add plugin to gatsby-config
import svg to any component

Expected result

After import svg sprite should be created and added to page. `Import Icon from './icon.svg' should import file object You could use to import it

Actual result

No sprite is created. `Import svg from './file.svg' imports only file path.

Environment

System:
    OS: macOS High Sierra 10.13.4
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.4.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.87
    Safari: 11.1
  npmPackages:
    gatsby: next => 2.0.0-beta.1 
    gatsby-image: next => 2.0.0-beta.1 
    gatsby-plugin-lodash: next => 3.0.1-beta.1 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.1 
    gatsby-plugin-sass: next => 2.0.0-beta.1 
    gatsby-plugin-sharp: next => 2.0.0-beta.1 
    gatsby-plugin-styled-components: next => 3.0.0-beta.1 
    gatsby-plugin-svg-sprite: ^1.0.0 => 1.0.0 
    gatsby-remark-images: next => 2.0.1-beta.1 
    gatsby-source-filesystem: latest => 1.5.39 
    gatsby-transformer-json: next => 2.1.1-beta.1 
    gatsby-transformer-remark: next => 2.1.1-beta.1 
    gatsby-transformer-sharp: next => 2.1.1-beta.1 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/templates`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/locale`,
        name: 'locale',
      },
    },
    'gatsby-plugin-lodash',
    'gatsby-plugin-svg-sprite',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-sass',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    'gatsby-transformer-json',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [],
      },
    },
  ],
}

package.json:

{
  "name": "new-website",
  "description": "Example",
  "version": "1.0.0",
  "private": true,
  "author": "",
  "dependencies": {
    "babel-plugin-styled-components": "^1.5.1",
    "classnames": "^2.2.6",
    "gatsby": "next",
    "gatsby-image": "next",
    "gatsby-plugin-lodash": "next",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-sass": "next",
    "gatsby-plugin-sharp": "next",
    "gatsby-plugin-styled-components": "next",
    "gatsby-plugin-svg-sprite": "^1.0.0",
    "gatsby-remark-images": "next",
    "gatsby-source-filesystem": "latest",
    "gatsby-transformer-json": "next",
    "gatsby-transformer-remark": "next",
    "gatsby-transformer-sharp": "next",
    "lodash": "^4.17.5",
    "node-sass": "^4.9.0",
    "normalize.css": "^8.0.0",
    "polished": "^1.9.2",
    "prop-types": "^15.6.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "styled-components": "^3.3.2",
    "uuid": "^3.2.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "start": "run-p develop lint:watch",
    "lint:watch": "esw ./src -w",
    "lint": "eslint ./src --max-warnings 0",
    "prebuild": "run-p lokalise lint",
    "build": "gatsby build",
    "develop": "gatsby develop",
    "serve": "gatsby serve",
    "format": "prettier --write",
    "lokalise": "node ./scripts/refetchAndProcessLokalise.js && prettier ./src/locale/* --write"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "babel-eslint": "8.1.1",
    "babel-plugin-hyperscript-to-jsx": "^1.0.24",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-config-revolut-react": "^0.0.3",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-prettier": "2.5.0",
    "eslint-plugin-react": "7.4.0",
    "eslint-watch": "^3.1.5",
    "extract-zip": "^1.6.7",
    "form-data": "^2.3.2",
    "fs-extra": "^6.0.1",
    "npm-run-all": "^4.1.3",
    "prettier": "^1.13.2",
    "rimraf": "^2.6.2",
    "transliteration": "^1.6.2"
  }
}

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

KyleAMathews commented 6 years ago

The API to make changes to webpack was changed for v2. You could submit a PR to that repo to upgrade the plugin

https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#change-code-classlanguage-textmodifywebpackconfigcode-to-code-classlanguage-textoncreatewebpackconfigcode

oobidin commented 6 years ago

@KyleAMathews hey! I tried to change the code of that plugin but I couldn't. Could you please take a look at my code?

The original code of that plugin:

exports.modifyWebpackConfig = ({ config }, options = {}) => {
  config.loader('url-loader', {
    test: /\.(jpg|jpeg|png|gif|mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/[name].[hash:8].[ext]',
    },
  });

  config.loader('svg-sprite', {
    loader: 'svg-sprite-loader',
    test: /\.svg$/,
    query: options,
  });

  return config;
};

My version:

exports.onCreateWebpackConfig = ({ actions, loaders }, options = {}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.(jpg|jpeg|png|gif|mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
          use: [
            loaders.url({
              limit: 10000,
              name: 'static/[name].[hash:8].[ext]',
            }),
          ],
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: require.resolve('svg-sprite-loader'),
              options,
            },
          ],
        },
      ]
    }
  })
};

I got the config that looks properly but the plugin still doesn't work.

Is there anything wrong?

KyleAMathews commented 6 years ago

Hard to say without trying it out locally. Your code looks good but you should try submitting a PR in the repo for the plug-in and enlist the maintainer there's help upgrading the plug-in.

oobidin commented 6 years ago

Thanks!

ericxyly commented 6 years ago

@oobidin I'd like to know your final solution to this issue. Thanks!

oobidin commented 6 years ago

@ailuyao I've just created PR to the plugin repo. https://github.com/marcobiedermann/gatsby-plugin-svg-sprite/pull/6 You can wait for the merge a bit or just use my piece of code inside you gatsby-node.js or plugins folder.

gatsbyjs / gatsby