teambit / envs

Component development environments for the Bit community
https://bit.dev/bit/envs
Other
64 stars 9 forks source link

Component with only SVG fails in React Typescript #45

Open Tallyb opened 4 years ago

Tallyb commented 4 years ago

Describe the bug

Receiving error on build on file not found when trying to build react component that imports an svg file.

Steps to Reproduce

  1. create-react-app --typescript
  2. add a simple component (e.g. navbar - code bellow) that takes the logo.svg that is generated in the root
  3. Make the svg into a component under styles namespace
  4. make the navbar into a component.
  5. Use the following compiler: "bit.envs/compilers/react-typescript@3.0.26"
  6. bit build - you will get the error

Note that this will happen also if you remove the compiler to styles/*

import React from 'react';
import './navbar.css';
import logo from '../../logo.svg';

const Navbar: React.FC = () => {
  return (
    <div className="navbar">
      <header className="App-header">
        <p>I am something else</p>
        <i>{logo}</i>
      </header>
    </div>
  );
}

export default Navbar;

Expected Behavior

bit build should success.

Screenshots, exceptions and logs

` `` error: bit failed to build heading@0.0.2 with the following exception: ENOENT: no such file or directory, ensureSymlink '/var/folders/w2/frfs_j4n46s75383m2ld98xc0000gn/T/bit/capsule-69026/.dependencies/styles/logo/dist/logo.svg' Error: ENOENT: no such file or directory, ensureSymlink '/var/folders/w2/frfs_j4n46s75383m2ld98xc0000gn/T/bit/capsule-69026/.dependencies/styles/logo/dist/logo.svg'


If applicable, add screenshots, exceptions, and logs to help explain your problem.

### Specifications

- Bit version: 14.4.3
- Node version: 12.12.0
- npm / yarn version: yarn 1.19.1
- Platform: Macos
- Bit compiler (include version): see above
- Bit tester (include version): N/A

### Additional context

Add any other context about the problem here.
qballer commented 4 years ago

Can you try and add this in one of the component files ?

declare module ‘*.svg’ {
 const content: any;
 export const ReactComponent: any;
 export default content;
}
Tallyb commented 4 years ago

It does not really fail - but an index file is created.

qballer commented 4 years ago

Can you please share a tar of the project?

Tallyb commented 4 years ago

Do a create react app and make the logo.svg file into a component.