Importing issue via webpack

[magicspon]

Hello,

Super smashing module. Top work

However, I do have an issue

import Smooth from 'smooth-scrolling'

const section = document.querySelector('.test')
const smooth = new Smooth({
    native: true,
    section: section,
    ease: 0.1
})

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Which points to this line:

module.exports = window.Smooth = Smooth in index.js

If I import the compiled script import Smooth from '../../node_modules/smooth-scrolling/smooth-scrolling.js' I get a different webpack error

__WEBPACK_IMPORTED_MODULE_6__node_modules_smooth_scrolling_smooth_scrolling_js___default.a is not a constructor

Any thoughts

I'm using webpack version 2. note. I also had this issue when I was using rollup to build my scripts

[baptistebriel]

Hi @magicspon,

Indeed it's an issue because of the way we export/import the module. It's working with browserify and I don't use webpack so I'm not sure which syntax to use... It's a big complex mess.

Instead of import, could you maybe use require?

require('smooth-scrolling').default

Or maybe switch the module.exports to export default Smooth in the node_modules folder, just to see if this fixes the issue?

Also, @jesperlandberg and @jackismissing had a similar issue. I think they fixed it with a JSON loader (don't ask me why!), see issue #24. Hope it helps.

Sorry about that!

[magicspon]

hello, thanks for getting back to me.

I'm using webpack 2 which handles json files by default.

require('smooth-scrolling').default throws some other flavour of error

 Uncaught TypeError: Super expression must either be null or a function, not undefined

and changing the modules export to export default Smooth causes another different error, something to do with the new key word (even though I am using new)...

how very bizarre.

not to worry, if I copy the source file into one of my own project files it works. something is going wrong en route from node_modules to my project. Muchos odd.

Not to worry... if I have time at the weekend I might take a fork and have a deep look.

Thanks again

[baptistebriel]

Yes, indeed. Seems like @jesperlandberg had to do the same and copy the smooth-scrolling folder into the project directory.

Let me know if you find anything, and do not hesitate to post a PR if you managed to make it work using webpack!

[JordanMachado]

@jesperlandberg

Have you got the ify loader for your node_modules ?

[jesperlandberg]

What I did for the project I used it on was to just copy the non built file (index.js) into my project directory. However since I will soon use this (great) module again it would be nice to do it the "proper" way, so if anyone comes up with a solution, let us know=)

[noeldelgado]

I think it has to do with mixing CommonJS and ES2015 module imports/exports.

Choosing either direction did the trick for me (both using rollup and webpack v2).

CommonJS

const classes = require('dom-classes')
...
class Smooth {
...
module.exports = window.Smooth = Smooth

ES2015

import classes from 'dom-classes'
...
export default class Smooth {
...
window.Smooth = Smooth

Not sure about browserify though.

Hope it helps.

[baptistebriel]

Thanks for the help @JordanMachado & @noeldelgado! I just switched to ES2015 exports.

npm i smooth-scrolling@2.3.7 --save

...should now work with webpack! (🤞)

[magicspon]

Turbo belting... top works boys and girls!