CODEWITHSUNDEEP
javascriptnpmwebpack
Abneco
Abneco

Reputation: 113

I encounter a problem when installing an npm module

here I start in javascript and nodejs / npm / webpack / theme-bootstrap, I encounter a problem when installing an npm module, I do not understand why ... I tried with various packages, so I say it must be a misunderstanding ...


    root/
      ├── .babelrc
      ├── .gitignore
      ├── package.json
      ├── postcss.config.js
      ├── webpack.config.js
      ├── src/
      │   ├── js/
      │   │   ├── modules/
      │   │   ├── vendor/
      │   │   └── app.js
      └── dist/
          └── js/
              └── app.js

1) npm i html-to-text (https://www.npmjs.com/package/html-to-text)
2) npm install
3) import file in app.js

    import "./modules/htmltotext";

4) import module in htmltotext.js (I created this file)

import "html-to-text";
const htmlToText = require('html-to-text');

5) npm run build
6) Start the HTML page with the web server and I encounter an error

error : Uncaught ReferenceError: htmlToText is not defined at localhost/:20


    <!DOCTYPE html>
    <html lang="fr">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="dist/js/app.js"></script>
    </head>

    <body>
        <div id="root">
            <h1>Hello World</h1>
        </div>
    </body>
    <script>
        const text = htmlToText.fromString('<h1>Hello World</h1>', {
            wordwrap: 130
        });
        console.log(text); // Hello World
        alert(text);
    </script>

    </html>

Do I have to do something else in webpack? or did I miss something else? I watched a lot of tutorials without understanding why it didn't work ... can you help me? thank you

Upvotes: 1

Views: 223

Answers (2)

Abneco
Abneco

Reputation: 113

if I try this, I get an error, because it is no longer in my node_module

npm install html-to-text -g

if i install it in the normal way -> construction is well done

npm install html-to-text

and the size of the app.js file increases after construction

The path to the library is incorrect ?
I don't know if it's the right method to import but it seems to work during construction ...

import "html-to-text";
const htmlToText = require('html-to-text');

Js file loads before the document is actually loaded ? I added $ (document) .ready (function () in my code but that doesn't change anything

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="dist/js/app.js"></script>
</head>

<body>
    <div id="root">
        <h1>Hello World</h1>
    </div>
</body>
<script>
$( document ).ready(function() {
    console.log( "ready!" ); // ok
    const text = htmlToText.fromString('<h1>Hello World</h1>', {
        wordwrap: 130
    });
    console.log(text); //Uncaught ReferenceError: htmlToText is not defined
    alert(text);
});
</script>

</html>

because of Uglify ?
uglify-js is not in the npm package list

the problem does not happen with the package (html-to-text), generally I cannot use a package that I add by myself ...

the packages that I install are in the node_modules folder but it is as if I did not call them correctly ... or that something is missing.

if i can give you more info tell me ...

Upvotes: 1

Achraf
Achraf

Reputation: 56

So you know your main problem is that it is not recognizing htmlToText. This could be because of different reasons.

Did you already try to install html-to-text Globally with:

npm install html-to-text -g

What I sometimes also like to do is try to look in the node_modules folder and check if it is actually in there. So just open the node_modules folder and scroll down (alphabetically ordered) and see if it is in there (so where the modeles are that start with 'H'.

if it is in there , I only see 2 other possibilities:

  • The path to the library is incorrect

  • Js file loads before the document is actually loaded.

Btw try to stay inside the app.js file. Webpack does some weird stuff if you start with putting things (js) in the html itself. Suddenly htmlToText becomes the letter "e" for example because of Uglify.

Upvotes: 0

Related Questions