Error after deploying application on browser console

Support
,
1

Hello! I’ve always deployed applications on netlify without problems. However , this time i’m getting an error after the app has already been deployed. This is the error that i get on the browser console:

Uncaught TypeError: Failed to resolve module specifier “lodash/assign”. Relative references must start with either “/”, “./”, or “…/”.

This is the app link : https://6334abcb5cb3110056c00204--animated-biscuit-db798b.netlify.app/

I can’t paste the log because i’m a new member. It’s saying that it cannot have more than 6 links.

Edit:
One important detail i forgot to mention : I’ve runned the application on production mode and it worked normaly.

2

Hi @alefebsp

In the JS file I see

import wA from"lodash/assign";

along with several other imports.

As the error states, when using import in a browser context you need to use a relative reference e.g.

import wA from "./lodash/assign";

Depending on the app you have, and how it is built/bundled, this approach may or may not work.

3

Hello! Thanks for the reply. Where did you saw this import ? I did’nt even used this dependecy.

4

The logged error references a JS file which is part of your site

Screen Shot 2022-09-29 at 9.33.01 pm
Screen Shot 2022-09-29 at 9.33.01 pm1960×492 116 KB

The file shows numerous lodash imports
https://6334abcb5cb3110056c00204–animated-biscuit-db798b.netlify.app/assets/index.2e9ed859.js

5

What could this be? I dont even know this dependecy

And on the console of my browser this is the file the error references : animated-biscuit-db798b.netlify.app/:1

6

Without seeing the code you are deploying, there is no way to know why this is included. Are you able to share the repository you are deploying from?

7

This is the repository : https://github.com/alefebspp/sapphire-frontend

8

Thanks @alefebsp

This isn’t an issue with Netlify. When I try building locally I see

% npm run build

> blog-app@0.0.0 build
> vite build

vite v3.1.4 building for production...
transforming (465) node_modules/react-focus-lock/dist/es2015/Lock.js'lodash/assign' is imported by lodash/assign?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/cloneDeep' is imported by lodash/cloneDeep?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/compact' is imported by lodash/compact?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/difference' is imported by lodash/difference?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/functions' is imported by lodash/functions?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/identity' is imported by lodash/identity?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/includes' is imported by lodash/includes?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/isArray' is imported by lodash/isArray?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/isElement' is imported by lodash/isElement?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/isFunction' is imported by lodash/isFunction?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/isPlainObject' is imported by lodash/isPlainObject?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/isString' is imported by lodash/isString?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/merge' is imported by lodash/merge?commonjs-external, but could not be resolved – treating it as an external dependency
'lodash/trim' is imported by lodash/trim?commonjs-external, but could not be resolved – treating it as an external dependency
✓ 753 modules transformed.
dist/assets/safira.b1769941.png   17.59 KiB
dist/index.html                   0.44 KiB
dist/assets/index.f827ba85.css    4.64 KiB / gzip: 0.76 KiB
dist/assets/index.2e9ed859.js     681.31 KiB / gzip: 218.69 KiB

While you haven’t used lodash explicitly as a dependency, several other packages have. I don’t have the answer as I haven’t used ViteJS much. You might have check out the Vite documentation and/or community resources.

9

Thanks for the information. I’ll try to get information about this on the vite community as you said.

1 Like
10

I’ve used webpack to bundle the application. Now i’m getting a new error on the console :

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

This is the new link for the application : https://imaginative-croissant-00a3f4.netlify.app/
Does anyone have any idea of why i’m getting this error?

11

That’s because it is an unbundled JSX file, not a bundled JS file.

You might find these articles helpful

and

12

I’ve followed the tutorial an got this new error : ReferenceError: React is not defined. Followed a bunch of solutions on stack overflow and could not resolve this error.

Edit : Nevermind. I found out the problem. I was setting babel configuration on both webpack and babel config files.

1 Like