Compile process hangs when using images in Windows

🙋Get Help
1

I try to integrate my own local images in my theme using the following import in my header:
import mylogo from './../assets/images/logo.jpg';

but the compilation process hangs, even if I just import the file without displaying my logo.
Latest message during compilation:

SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module

The process consumes almost 100% of CPU, I could assume that it comes from webpack, but can’t figure out how to solve that issue. Importing CSS files works fine, but this issue happens when importing jpg or png files.

Step to reproduce:

  1. Add a valid logo.png file in src/assets/images folder in local mars theme
  2. Add import mylogo from './../assets/images/logo.jpg'; line to header.js in mars-theme
  3. Run npx frontity dev

Am I missing something here? I’m using Win 10, not using any additional packages or whatever, just doing the steps described above.

2

No, it should work fine.

  • Could you please do npx frontity info in your Frontity folder and paste the info here?
  • Also, could you please share your logo.jpg file with us so we can take a look at it?
3

Sure:

System:

  • OS: Windows 10
  • CPU: (8) x64 Intel® Core™ i7-4702MQ CPU @ 2.20GHz
  • Memory: 2.37 GB / 7.66 GB

Binaries:

  • Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
  • npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

Browsers:

  • Edge: 42.17134.1.0
  • Internet Explorer: 11.0.17134.1

npmPackages:

  • @frontity/core: ^1.2.0 => 1.2.0
  • @frontity/html2react: ^1.1.10 => 1.1.10
  • @frontity/mars-theme: ./packages/mars-theme => 1.1.10
  • @frontity/tiny-router: ^1.0.13 => 1.0.13
  • @frontity/wp-source: ^1.2.0 => 1.2.0
  • frontity: ^1.3.0 => 1.3.0

npmGlobalPackages:

  • frontity: Not Found
  • npx: Not Found

Logo (just chosed the react one. I tried also several others, always the same problem):
logo

4

Hello @cobra, can you share the code where you are using the logo after import. For reference i am using the following code and the image is working perfectly.

import LogoPath from "../res/logo.jpg";

    const Header = ({ state }) => (
      <>
        <Container>
            <LogoContainer>
                <Logo src={LogoPath}/>
            </LogoContainer>
       </Container>
      </>
    );

export default connect(Header);

1 Like
5

Yes, now I’ve copied the code you’ve used and am still having the same problem.

import React from "react";
import { connect } from "frontity";
import LogoPath from "../assets/logo.jpg";

const Header = ({ state }) => (
  <>
    <Container>
      <LogoContainer>
        <Logo src={LogoPath} />
      </LogoContainer>
    </Container>
  </>
);

export default connect(Header);

So, I’ll try the same with my mac again tomorrow and let you know the result. I have the feeling it has something to do with the os. I’ve updated Node to 10.16.3 and npm to 6.9.0 now, no difference…

6

I’ve found the issue.
The regex in @frontity/core/src/webpack/modules.ts is not working on Windows:

const filename = /([^\/]+)\.(?:png|jpe?g|gif|svg)$/.exec(file) || [, "image"];

I guess that happens because of the backslashes in filenames.
It gives me the whole filename, instead of cutting it off like on Mac OS where the whole thing is working.
C:\Users\cobra\Documents\app\packages\mars-theme\src\assets\images\logo.jpg

For now, I will use the customized regex
const filename = /([\w-]+)\.(?:png|jpe?g|gif|svg)$/.exec(file) || [, "image"];
Could that be an official solution in the upcoming release? I’m not a regex expert :smiley:

Don’t know why webpack stucks and doesn’t give any errors, but I assume it happens because of illegal path characters in the file name on Windows.

1 Like
7

Absolutely. Thanks for the catch, @cobra. I’ve opened an issue: https://github.com/frontity/frontity/issues/189

Your proposed solution makes sense. We’ll take a look and include it in a release as soon as possible :relaxed:

8

@luisherranz Always happy to help. Thanks for opening the issue!

1 Like
9

@cobra. I forgot to mention it here, but this was solved a while ago: https://github.com/frontity/frontity/issues/189

2 Likes
10

The same problem occurs today in Mac OS. I have added a logotype, both tested in a Static folder and in assets folder under src. The logo turns up once, but after update there is a problem with webpack.
I have this code:

import molnGrey from "../assets/moln_grey.png";

const Header = ({ state }) => {
  
  return (
    <>
      <Container>
        <StyledLink link="/">
          <Title>
            <span>
              <Logo src={molnGrey} />
            </span>
11

A fix of this problem is discussed here: Frontity release: Dynamic Public Path - #6 by luisherranz