Error using svg with webpack and storybook

user_16398224 0
Viewed 617

When using svg with webpack and storybook, I get this error.

Error in storybook

ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js 18:12 Module parse failed: Unexpected token (18:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | const AssetSourceResolver = require('./AssetSourceResolver'); |

import type {ResolvedAssetSource} from './AssetSourceResolver'; | | let _customSourceTransformer, _serverURL, _scriptURL;

I have tried to install by: npm i react-native-svg-web, and add this to webpack config : Added line in webpack.config

module.exports = async ({ config }) => { config.resolve.alias = { 'react-native$': 'react-native-web', 'react-native-svg': 'react-native-svg-web' };

Is it a valid import, for webpack, or has anyone experienced the same issue?

storybook react-native webpack svg
1 Answers

In the webpack.config.js file, adding the following line fixed it for me:

module.exports = ({config}) => {
  // ...
  config.resolve.extensions.unshift('.web.js'); // added this line
  // ...
  return config;
};

The reason for this is described here.

user_22920560
Related