Import error - You may need an appropriate loader to handle this file type

[mshearer0]

Including

import { Bee } from '@ethersphere/bee-js'

I get 2 errors:

error  in ./node_modules/ky/distribution/core/Ky.js

Module parse failed: Unexpected token (16:12)
You may need an appropriate loader to handle this file type.

and

error  in ./node_modules/ky/distribution/utils/merge.js

Module parse failed: Unexpected token (40:32)
You may need an appropriate loader to handle this file type.

I'm trying to incorporate into a Vue App.

Any help appreciated.

[vojtechsimetka]

Hi @mshearer0 may I ask you what is your setup? Which version of bee-js are you using? 3.3.3? Are you using typescript? What is your build tooling?

[mshearer0]

Hi, thanks for helping. I get the error using 3.3.3. Downgrading to 3.3.2 and minimum dependencies (ky: '0.25.1' and 'ky-universal': '0.8.2',) removes the errors but instead i get:

error  in ./node_modules/@ethersphere/bee-js/dist/mjs/index.js

Module parse failed: Unexpected token (3:9)
You may need an appropriate loader to handle this file type.
| import { Bee } from "./bee.js";
| import { BeeDebug } from "./bee-debug.js";
| export * as Utils from "./utils/expose.js";
| export * from "./types/index.js";
| export * from "./utils/error.js";

 @ ./src/main.js 13:0-42
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I can run the react example from https://github.com/ethersphere/examples-js ok.

I'm trying to run the Dapp Auction Vue example from: https://github.com/ethereumbook/ethereumbook to help me learn decentralised apps. I couldn't get Bee to accept an http post of multipart formdata due to absence of content type, so it was recommended (see ethersphere/bee#2864) that i try Bee-js instead. I saw your post #28 (comment) - not sure if Bee supports formdata yet?

Does that help?

[AuHau]

Hey there,
hmm this is a bit weird. The ky@2.5.1 does not have folder distribution. Can you verify that you have really installed ky with version 2.5.1? Eq. have look in node_modules/ky/package.json.

My expectation is that somehow you have a newer version of Ky that is ESM only and hence the error message.

[mshearer0]

Many thanks, did you mean 2.5.1 or 0.25.1?

i don't get the original errors if i downgrade to ky 0.25.1:

frontend@1.0.0 /home/mshearer/ethereumbook/code/auction_dapp/frontend
├─┬ @ethersphere/bee-js@3.3.2
│ └── ky@0.25.1 deduped
├─┬ ky-universal@0.8.2
│ └── ky@0.25.1 deduped
└── ky@0.25.1

node_modules/ky/package.json begins with:

{
        "name": "ky",
        "version": "0.25.1",
        "description": "Tiny and elegant HTTP client based on the browser Fetch API",

but i then get:

error  in ./node_modules/@ethersphere/bee-js/dist/mjs/index.js

as above.

[AuHau]

Many thanks, did you mean 2.5.1 or 0.25.1?

Sorry yeah, I meant 0.25.1.

So you are also using ky in your frontend? As I see it you have it as a direct dependency as well.

Please definitely use bee-js@v3.3.3 which should fix the error. Then if you update the ky as a direct dependency for your front-end then you should know that the latest Ky supports only ESM which is most probably problem for your stack. So please try if works for you bee-js@v3.3.3 and ky@0.25.1.

[mshearer0]

Hi, with 3.3.3 I get:

 error  in ./node_modules/ky/index.js

Module parse failed: Unexpected token (84:19)
You may need an appropriate loader to handle this file type.
|                               }
| 
|                               returnValue = {...returnValue, [key]: value};
|                       }
| 

 @ ./node_modules/ky-universal/browser.js 1:0-27
 @ ./node_modules/@ethersphere/bee-js/dist/mjs/utils/http.js
 @ ./node_modules/@ethersphere/bee-js/dist/mjs/bee.js
 @ ./node_modules/@ethersphere/bee-js/dist/mjs/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

npm list:

frontend@1.0.0 /home/mshearer/ethereumbook/code/auction_dapp/frontend
├─┬ @ethersphere/bee-js@3.3.3
│ └── ky@0.25.1 deduped
├─┬ ky-universal@0.8.2
│ └── ky@0.25.1 deduped
└── ky@0.25.1

[AuHau]

Hmmm, I see. That seems like your build stack does not handle the [key] or the spread ...returnValue both of which have been in JS already for a while 😳

I am afraid this is not related to bee-js but to the built stack that the example uses which seems very much outdated.

Looking at https://github.com/ethereumbook/ethereumbook/blob/develop/code/auction_dapp/frontend/package.json the example is already quite old (4 years!). They for example use old dependencies like webpack 3 and old versions of Babel as well. If you want to run this example with bee-js, I am afraid you will have to update these dependencies which in my experience with these tools might not be trivial nor quick thing to do :-(

I am gonna close this issue, but let me know if it won't work even when you update to some more modern build setup.

[mshearer0]

Upgrading the application build setup to Webpack 4 and Babel 7 allowed the import to compile and bee-js to be used.

Thanks to @AuHau for support