getting `Malformed unicode` error when importing png file with and without `--preprocess='file-loader'` #118

tcoopman · 2018-08-31T13:20:28Z

This is the error message

node_modules/.bin/fpack --development --preprocess='file-loader' src/index.js

Project Directory: /home/thomas/Workspace/playpass/argus/dashboard/assets
Mode: development
Call Stack:
        '../../logo.png' from module: src/widgets/logo_with_clock.js
'./logo_with_clock' from module: src/widgets/index.js
'./widgets/index' from module: src/dashboard.js
'./dashboard' from module: src/index.js
'./src/index.js' from module: $fp$main
Processing Module: logo.png

Parse Error
File: logo.png
        (0:0) - (0:0): Malformed unicode

To be sure it wasn't my image I also tried this one: http://pngimg.com/uploads/simpsons/simpsons_PNG96.png, same error.

zindel · 2018-08-31T13:52:16Z

Hi @tcoopman! Thanks for the report! In fact, the command-line shown is a little incorrect. Try this one:

node_modules/.bin/fpack --development --preprocess='\.png$:file-loader' src/index.js

One additional note on the file-loader. You may want to add the publicPath option to it. I.e.:

node_modules/.bin/fpack --development --preprocess='\.png$:file-loader?publicPath=http://your.com/path/to/bundle/' src/index.js

The reason for the change above is the fact that fastpack does not set the __webpack_public_path__ default.

Alternatively, you may want to simplify the config using the url-loader:

node_modules/.bin/fpack --development --preprocess='\.png$:url-loader' src/index.js

tcoopman · 2018-08-31T14:01:32Z

@zindel thanks, so now I've run into some more issues with the same command:

> node_modules/.bin/fpack --development --preprocess='*.png$:file-loader' src/index.js
fpack: option `--preprocess': Pattern regexp parse error. Use POSIX syntax
Usage: fpack [OPTION]... [ENTRY POINTS]...
Try `fpack --help' for more information.

I guess, this could receive some better error handling, but that was easy enough to fix:

node_modules/.bin/fpack --development --preprocess='^*\.png$:file-loader' src/index.js
fpack: internal error, uncaught exception:
       Not_found
       Raised at file "src/core/lwt_pqueue.ml", line 78, characters 15-30
       Called from file "src/core/lwt_pqueue.ml", line 86, characters 12-24
       Re-raised at file "src/core/lwt.ml", line 3008, characters 20-29
       Called from file "src/unix/lwt_main.ml", line 42, characters 8-18
       Called from file "Fastpack/Fastpack.ml" (inlined), line 253, characters 2-52
       Called from file "bin/fpack.ml", line 45, characters 12-45
       Called from file "src/cmdliner_term.ml", line 27, characters 19-24
       Called from file "src/cmdliner.ml", line 27, characters 27-34
       Called from file "src/cmdliner.ml", line 106, characters 32-39

trying the url-loader results in different errors:

node_modules/.bin/fpack --development --preprocess='\.png$:url-loader' src/index.js

Project Directory: /home/thomas/Workspace/playpass/argus/dashboard/assets
Mode: development
Call Stack:
        './logo_with_clock' from module: src/widgets/index.js
'./widgets/index' from module: src/dashboard.js
'./dashboard' from module: src/index.js
'./src/index.js' from module: $fp$main
Processing Module: src/widgets/logo_with_clock.js


Cannot find package path
  Resolving '../../logo.png'. Base directory: '/home/thomas/Workspace/playpass/argus/dashboard/assets/src/widgets'
  Resolving preprocessors 'url-loader'
  Resolving preprocessor 'url-loader', base directory '/home/thomas/Workspace/playpass/argus/dashboard/assets/src/widgets'
  Resolving 'url-loader'.
  Mocked package?
  ...no.
  Resolving 'url-loader' through "browser"
  ...not found.
  Resolving package path
  Path exists? '/home/thomas/Workspace/playpass/argus/dashboard/assets/src/widgets/node_modules/url-loader'
  ...no.
  Path exists? '/home/thomas/Workspace/playpass/argus/dashboard/assets/src/node_modules/url-loader'
  ...no.
  Path exists? '/home/thomas/Workspace/playpass/argus/dashboard/assets/node_modules/url-loader'
  ...no.
While processing dependency request:
        '../../logo.png' from module: src/widgets/logo_with_clock.js

but:

ls /home/thomas/Workspace/playpass/argus/dashboard/assets/node_modules/url-loader
CHANGELOG.md  dist/  LICENSE  node_modules/  package.json  README.md

zindel · 2018-08-31T14:34:16Z

I think the issue may be connected with cache (I am working on a fix now, so perhaps in a few days it'll be gone). For the meantime please try:

node_modules/.bin/fpack --no-cache --development --preprocess='\.png$:url-loader' src/index.js

Or, alternatively, remove the node_modules/.cache/fpack before running.

The file-loader command should use the similar regexp (i.e. remove ^* from the beginning of it):

node_modules/.bin/fpack --development --preprocess='\.png$:file-loader' src/index.js

tcoopman · 2018-08-31T14:41:41Z

It is indeed an issue with the cache, but now I get the same error for both:

node_modules/.bin/fpack --no-cache --development --preprocess='\.png$:url-loader' src/index.js
fpack: internal error, uncaught exception:
       Not_found
       Raised at file "Fastpack/Fastpack.ml", line 223, characters 9-18
       Called from file "src/core/lwt.ml", line 2068, characters 23-28
       Re-raised at file "Fastpack/Fastpack.ml", line 228, characters 7-440
       Re-raised at file "src/core/lwt.ml", line 3008, characters 20-29
       Called from file "src/unix/lwt_main.ml", line 42, characters 8-18
       Called from file "Fastpack/Fastpack.ml" (inlined), line 253, characters 2-52
       Called from file "bin/fpack.ml", line 45, characters 12-45
       Called from file "src/cmdliner_term.ml", line 27, characters 19-24
       Called from file "src/cmdliner.ml", line 27, characters 27-34
       Called from file "src/cmdliner.ml", line 106, characters 32-39

and

node_modules/.bin/fpack --no-cache --development --preprocess='\.png$:file-loader' src/index.js
fpack: internal error, uncaught exception:
       Not_found
       Raised at file "src/core/lwt_pqueue.ml", line 78, characters 15-30
       Called from file "src/core/lwt_pqueue.ml", line 86, characters 12-24
       Re-raised at file "src/core/lwt.ml", line 3008, characters 20-29
       Called from file "src/unix/lwt_main.ml", line 42, characters 8-18
       Called from file "Fastpack/Fastpack.ml" (inlined), line 253, characters 2-52
       Called from file "bin/fpack.ml", line 45, characters 12-45
       Called from file "src/cmdliner_term.ml", line 27, characters 19-24
       Called from file "src/cmdliner.ml", line 27, characters 27-34
       Called from file "src/cmdliner.ml", line 106, characters 32-39

zindel · 2018-08-31T15:00:33Z

@tcoopman could you reproduce it using with the limited set of files? Like package.json, index.js & logo.png for instance? Also, what does fpack --version say?

tcoopman · 2018-08-31T15:07:07Z

node_modules/.bin/fpack --version
0.5.4 (Commit: eaa749a)

it was easy to reproduce. Running node_modules/.bin/fpack --development --preprocess='\.png$:url-loader' src/index.js on this repo https://github.com/tcoopman/fastpack-issue-118

The logo is empty here touch logo.png but it's the exact same issue as with my repo

zindel · 2018-08-31T15:28:51Z

Thank you for the reproducible repo! There is definitely an issue in how it looks for the node-connection code... I will add an issue for that. In the meantime if you still want to experiment - here is what may work for you (based on the repo above - notice the "loader-runner" in the package.json):

~/ocaml/fastpack-issue-118 [master]$ cat package.json
{
  "name": "fastpack-issue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "fpack:url": "fpack --preprocess='\\.png$:url-loader' --dev src/index.js",
    "fpack:file": "fpack --preprocess='\\.png$:file-loader' --dev src/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fpack": "^0.5.4",
    "url-loader": "^1.1.1"
  },
  "devDependencies": {
    "file-loader": "^2.0.0",
    "loader-runner": "^2.3.0"
  }
}
~/ocaml/fastpack-issue-118 [master]$ npm i

> [email protected] postinstall /Users/zindel/ocaml/fastpack-issue-118/node_modules/fpack
> node postinstall.js

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

added 18 packages in 1.107s
~/ocaml/fastpack-issue-118 [master]$ npm run fpack:url

> [email protected] fpack:url /Users/zindel/ocaml/fastpack-issue-118
> fpack --no-cache --preprocess='\.png$:url-loader' --dev src/index.js

Packed in 0.145s. Bundle: 2Kb. Modules: 3. Cache: disabled. Mode: development.
~/ocaml/fastpack-issue-118 [master]$ npm run fpack:file

> [email protected] fpack:file /Users/zindel/ocaml/fastpack-issue-118
> fpack --no-cache --preprocess='\.png$:file-loader' --dev src/index.js

Packed in 0.143s. Bundle: 2Kb. Modules: 3. Cache: disabled. Mode: development.
~/ocaml/fastpack-issue-118 [master]$ npm run fpack:file

> [email protected] fpack:file /Users/zindel/ocaml/fastpack-issue-118
> fpack --no-cache --preprocess='\.png$:file-loader' --dev src/index.js

Packed in 0.144s. Bundle: 2Kb. Modules: 3. Cache: disabled. Mode: development.

tcoopman · 2018-08-31T15:43:25Z

Hmm, with or without loader-runner doesn't seem to make a difference (also with --no-cache). What does work if I run it without --dev or --development (not sure if there is difference between the 2).

zindel · 2018-08-31T15:48:47Z

So, it didn't work for you as shown on the screenshot above? Weird... Try removing the node_modules and run npm i again?

There is no difference between --dev and --development. It is the just the cmdliner lib which we are using to parse the command line is nice enough to us to accept the shortened options :)

tcoopman · 2018-08-31T19:22:39Z

Ok, some very interesting results (I've pushed the repo with some small changes):

So a full log:

$ rm -rf node_modules/
$ npm i
> [email protected] postinstall /home/thomas/Workspace/tmp/fastpack-issue/node_modules/fpack
> node postinstall.js

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

added 18 packages from 13 contributors and audited 31 packages in 1.37s
found 0 vulnerabilities

 $ node_modules/.bin/fpack --preprocess='\\.png$:url-loader' --dev src/index.js
fpack: internal error, uncaught exception:
       Not_found
       Raised at file "src/core/lwt_pqueue.ml", line 78, characters 15-30
       Called from file "src/core/lwt_pqueue.ml", line 86, characters 12-24
       Re-raised at file "src/core/lwt.ml", line 3008, characters 20-29
       Called from file "src/unix/lwt_main.ml", line 42, characters 8-18
       Called from file "Fastpack/Fastpack.ml" (inlined), line 253, characters 2-52
       Called from file "bin/fpack.ml", line 45, characters 12-45
       Called from file "src/cmdliner_term.ml", line 27, characters 19-24
       Called from file "src/cmdliner.ml", line 27, characters 27-34
       Called from file "src/cmdliner.ml", line 106, characters 32-39
 $ npm run fpack:url

> [email protected] fpack:url /home/thomas/Workspace/tmp/fastpack-issue
> fpack --preprocess='\.png$:url-loader' --dev src/index.js

Packed in 0.122s. Bundle: 2Kb. Modules: 3. Cache: used. Mode: development.
$ node_modules/.bin/fpack --preprocess='\\.png$:url-loader' --dev src/index.js
Packed in 0.016s. Bundle: 2Kb. Modules: 3. Cache: used. Mode: development.
$ node_modules/.bin/fpack --no-cache --preprocess='\\.png$:url-loader' --dev src/index.js
fpack: internal error, uncaught exception:
       Not_found
       Raised at file "Fastpack/Fastpack.ml", line 223, characters 9-18
       Called from file "src/core/lwt.ml", line 2068, characters 23-28
       Re-raised at file "Fastpack/Fastpack.ml", line 228, characters 7-440
       Re-raised at file "src/core/lwt.ml", line 3008, characters 20-29
       Called from file "src/unix/lwt_main.ml", line 42, characters 8-18
       Called from file "Fastpack/Fastpack.ml" (inlined), line 253, characters 2-52
       Called from file "bin/fpack.ml", line 45, characters 12-45
       Called from file "src/cmdliner_term.ml", line 27, characters 19-24
       Called from file "src/cmdliner.ml", line 27, characters 27-34
       Called from file "src/cmdliner.ml", line 106, characters 32-39

So running it manually the first time doesn't work. Running it (same command!!) from package.json scripts works, if I run the command manually again, then it works (as long as I don't remove node_modules. Running it with --no-cache doesn't work.

Some more info: npm version 6.1.0 on linux.

zindel · 2018-09-01T17:44:28Z

Thank you for narrowing it down! I think I know what the issue is. In fact it is a combination of two problems:

how fastpack determines where the node-related glue code is located.
Cache invalidation.

Both are reproducible quite well using the script above, so thank you again for a great testing :)
I am planning to have both of these issues fixed and released early next week.

zindel · 2018-09-10T16:09:39Z

One week later, but still :) Could you please give it a try installing the latest fpack from npmjs?

tcoopman · 2018-09-10T18:46:35Z

It seems to be better, but I still got the error a few times, I don't know how to reproduce it yet though. Going to try to find out.

tcoopman · 2018-09-10T18:50:02Z

Having a bad pattern in the loader can make it fail with the same error:

node_modules/.bin/fpack --dev src/index.js --preprocess='^\\.png$:url-loader'

Parse error
/home/thomas/Workspace/playpass/argus/dashboard/assets/logo.png

--------------------
Malformed unicode at (0:0) - (0:0):

  1 │ PNG

This is probably a different bug, but it looks like the error message should at least be improved for this.

zindel self-assigned this Sep 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getting `Malformed unicode` error when importing png file with and without `--preprocess='file-loader'` #118

getting `Malformed unicode` error when importing png file with and without `--preprocess='file-loader'` #118

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018 •

edited

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018 •

edited

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018

zindel commented Sep 1, 2018

zindel commented Sep 10, 2018

tcoopman commented Sep 10, 2018

tcoopman commented Sep 10, 2018

getting Malformed unicode error when importing png file with and without --preprocess='file-loader' #118

getting Malformed unicode error when importing png file with and without --preprocess='file-loader' #118

Comments

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018 • edited

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018 • edited

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018

zindel commented Aug 31, 2018

tcoopman commented Aug 31, 2018

zindel commented Sep 1, 2018

zindel commented Sep 10, 2018

tcoopman commented Sep 10, 2018

tcoopman commented Sep 10, 2018

getting `Malformed unicode` error when importing png file with and without `--preprocess='file-loader'` #118

getting `Malformed unicode` error when importing png file with and without `--preprocess='file-loader'` #118

zindel commented Aug 31, 2018 •

edited

tcoopman commented Aug 31, 2018 •

edited