Create-react-app: Can't import SVG components from external packages

[stepankuzmin]

Can you reproduce the problem with latest npm?

Yes, I can.

Description

Can't import react components that contain SVG elements like <svg>, <g>, etc from external packages.

Expected behavior

Files should be imported correctly.

Actual behavior

I'm getting

Module parse failed: /Users/stepan/projects/velobike/node_modules/@urbica/components/src/Chart/index.jsx Unexpected token (43:6)
You may need an appropriate loader to handle this file type.
| 
|     return (
|       <svg height={this.props.height} width={this.props.width}>
|         <g transform={transform}>
|           {children}

Environment

1. npm ls react-scripts (if you haven’t ejected):

[email protected] /Users/stepan/projects/velobike
└── [email protected] 

1. node -v: 7.10.0

2. npm -v: 4.6.1

3. Operating system: macOS 10.12.5

Reproducible Demo

To reproduce this issue you can try to import any component from @urbica/components.

Eg.

import { Axis, Area, Chart } from '@urbica/components';

FYI this library uses jsnext:main param in package.json

[gaearon]

Sounds like a bug. Did it work before?

[stepankuzmin]

Yep, it works fine with 0.9.5.

[gaearon]

Cool. Want to dig into it? I'll have time later today but there are more pressing bugs which I'll likely look at first.

[stepankuzmin]

Yep, I'm trying to investigate this bug. This works fine with local SVG components, only external packages are facing it, btw.

[gaearon]

I’d expect it to be related to https://github.com/facebookincubator/create-react-app/pull/1305.

[Timer]

This looks more like intended functionality than a bug. We don't compile node_modules (you're using JSX syntax).

0.9.x used webpack 1 which did not support jsmain:next or module properties, which are now respected (so 0.9.x grabs dist/main.js, 1.0.0 src/index.js).

You'll need to fix @urbica/components by compiling it during publish; checkout babel-preset-react-app!

Thanks!

[stepankuzmin]

Thanks for response @Timer! Removing module and jsnext:main did the trick

[gaearon]

Thanks for the investigation.

[WillowHQ]

I'm experiencing a similar problem, can @Timer or @stepankuzmin add a bit more detail. How did you get the external module to compile ?

[Timer]

@WillowHQ, the package that needed changed was controlled by @stepankuzmin. It was not a 3rd party package.

I suggest you open an issue on the repository you're having issues with and ask them to fix their build so that it may be consumed by browsers. 😄

[WillowHQ]

it's material- ui and I believe I've found the solution.
Is there any point in documenting this anywhere once I solve ?

[Timer]

If the solution is generic enough, sure! We could document it here.
If it's specific to material-ui, maybe a PR to their docs would be better suited?