0

I installed through npm in WebStorm this library

npm install basicscroll

The IDE highlights the words of the package, and everything seems fine until I try to see the project in the browser:

The console gives me this issue:

applicative.js:15 Uncaught ReferenceError: basicScroll is not defined
    at applicative.js:15
    at NodeList.forEach (<anonymous>)
    at applicative.js:6

So I added at the beginning of my JS file this statement:

const basicScroll = require('basicscroll')

The result this time is that the library remains highlighted, but the method called on it not. And in browser this is the error prompt by the console:

Uncaught ReferenceError: require is not defined

I checked my node_modules directory, I can see the sub-directory, so I think the installation process went right. I also checked the package.json file:

"dependencies": {
    "basicscroll": "^3.0.2",
    [...]

I honestly don't know where the problem is. I'm new to web development and online I found that the webpack module-bounder could help me, but I don't even know where to start. What is wrong ? Thank'you !

Community
  • 1
  • 1
WebStormer
  • 286
  • 3
  • 17
  • Test with `import basicScroll from 'basicscroll'` – Jonathan Larouche Oct 31 '19 at 21:17
  • I get this error [Uncaught TypeError: Failed to resolve module specifier "basicscroll". Relative references must start with either "/", "./", or "../".] I even added a slash before '/basicscroll' I get this error: [GET http://localhost:63342/basicscroll net::ERR_ABORTED 404 (Not Found)] – WebStormer Oct 31 '19 at 21:24
  • You might have missing aliases for import in your config, if you import from './node_modules/basicscroll' it could work – Jonathan Larouche Oct 31 '19 at 21:53
  • 2
    is this in node or the browser? if it's in the browser you would need to transpile your code before running, the browser has no concept of npm modules. – Dan Starns Oct 31 '19 at 22:20
  • This guy had exactly the same issue (https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue). I think that @DanStarns has the closest answer. This errors are displayed in the browser, what you mean exactly for 'transpile' your code exactly? – WebStormer Oct 31 '19 at 22:54
  • Possible duplicate of [Client on node: Uncaught ReferenceError: require is not defined](https://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined) – Abanoub Istfanous Nov 01 '19 at 00:05
  • @WebStormer Transpiling 'taking source code written in one language and transforming into another' you can use tools such as [parcel](https://parceljs.org) to bundle modules & [babel](https://babeljs.io/) to transpile code. – Dan Starns Nov 01 '19 at 00:16

1 Answers1

3

It seems like you are trying to use server-side code in a client-side environment. As far as I know require is a NodeJS thing and doesn't exist in the browser.

Your easiest solution would be to use a <script> tag in your html to import the files you need. Something like <script src="dist/basicScroll.min.js"></script>

This answer mentions some other tools you could use to manage that sort of thing: https://stackoverflow.com/a/19059825/1801137

Chris Hughes
  • 342
  • 1
  • 8