Workaround explorer project not working

Web Development
1

When I import the workaround functions to Main.js the program stops working. I cannot figure out why?

2

From what I remember, you have to import modules from salaryData.js to the workaroundExplorer file and import modules from that file to main.js.
Open the browser’s console and check the error messages: If it logs that a file can’t be found, you probably have an error in your file path. If it logs that anything is undefined or null, you probably imported modules in the wrong file.

3

How do I open the browser console to check the errors? Would’ve been very helpful when I started the project lol. I was like I can’t check errors and there is no video! :rofl::rofl:

2 Likes
4

I know. Once you took the wrong turn in this project, you can get lost completely.
I think the development tools are preinstalled on almost all browsers now. So right click on any element in your project. I’m not 100% sure which english term will appear: It must be something like ‘inspect’. If you click that, it opens the dev toolbar with the console.

1 Like
5 
      workAroundModule.js

import {getDataByRole, getDataByCompany} from ‘./modules./salaryData.js’;
import salaryData from ‘./modules./salaryData.js’

This is where the problem was. File path was incorrect. I changed it to ‘./salaryData.js’ and everything is working now. Thank you for your help! The inspect window showed the console errors and eventually led me to this solution.
I still feel the correct file path is ‘./modules/salaryData.js’ because salary.js is in the modules folder but for some reason the program won’t run with that file path.

2 Likes
6

So you found the issue, nice job!
The files workAroundModule.js and salaryData.js are in the same directory. If you import modules to workAroundModule.js from salaryData.js and the path is ./modules./salaryData.js the program will look for the folder /modules in the very same folder.

1 Like
7

I went through this multiple times today (not restarting, just checking every hint) and around step 6 it was working but displaying $0. Then i continued on and it went back to not displaying anything. In my import calls in main.js to the two files is ‘./modules/filename.js’ (filename just placeholder for the 2 files for brevity). I went through to step 9 and changed the = 0 to reflect the function calls as per the hint. Still nothing. I’ve triple checked my imports and exports per hints and not sure what went south.

8

I actually got it working except for the extra challenge. I did get the code to display but not the results after using the formatNumber.format(function_and_rest_of_code).

1 Like
9

Soo annoying, when I import the utilities.js into main.js the website breaks and only displays “details”.

import {formatNumber} from './modules/utilities.js'

that’s my import, exported it like this:

export {formatNumber};

anyone know why this is the case?

(everything works fine up to this point)

Cheers!
Andy

1 Like
10

I am having the exact same problem. Can you give a hint as to where you found the fix? I have gone over this so many times…

1 Like
11

Hello, @andy_b.

Try opening your browser’s console, and see what error messages are there.

12

Hello, @lynda9408018042.

If you’d like to post your relevant code, someone can try to help.

Link to the project for reference.

13

I’m having issues with this lesson as well. I hit step 8 and the whole program breaks. I try;

import {getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from './modules/workAroundModule.js';

it doesn’t work and then when I go to inspect the issue it tells me;

Loading module from “https://5e818b7f5ab142a68b73451fd630d89f.cc-propeller.cloud/modules/modules/salaryData.js” was blocked because of a disallowed MIME type (“text/plain”).

and I can’t quite figure out what that means exactly. I’ve tried it in other browsers with the same issue. Disabled my ad blockers, still nothing.

2 Likes
14

I have found another solution for this.
When i simply add a line in main.js:

import { getRoles, getCompanies } from './modules/salaryData.js';

Chrome dev tools console tells:

Uncaught SyntaxError: Cannot use import statement outside a module

So I just simply edit the html script line:

<script type="module" src="main.js" defer></script>

and now it’s working fine. Hope it will help.

1 Like
15

I’m stuck on the same part, I had it working up until the last checkpoint. It was returning values just fine, then I added utilities.js and exported functions, imported in main.js and I get that same “disallowed MIME type “text/plain”)” type error in the console. Im scratchin my head trin to figure it out. I’ve already added the “module” type to the html file, as per a previous checkpoint…

16

did you end up finding a fix for this? I did the same thing and now it gives this error in console:

Loading module from “https://7c1fa89909c44a2c952aae51ba46c3e9.cc-propeller.cloud/utilities.js” was blocked because of a disallowed MIME type (“text/plain”). 7c1fa89909c44a2c952aae51ba46c3e9.cc-propeller.cloud

I’m re-checking filepaths again…gahhhhh
EDIT
It was the filepath lol whodathunkit?!?!

1 Like
17

how do I open the browser console?

18

Press F12, usually. :slight_smile:

19

Can you say what was the correct filepath?

20

Try this at the bottom of you utitlities.js file:

export default formatNumber;