Webpack / canjs 3 : can-util module loaded many time

CanJS
1

Hi All,

I’m upgarding my project from canjs 2 (and require :confounded:) to canjs 3 (and webpack 1). I identify that the can-util/xxx modules are loaded by many can-xxx modules. Example for “can-util/dom/events/attributes/attributes” with webpack log :

…
./~/can-stache-bindings/~/can-util/dom/events/attributes/attributes.js 2.29 kB {0} [built]
…
/~/can-stache/~/can-util/dom/events/attributes/attributes.js 2.29 kB {0} [built]
…
./~/can-view-live/~/can-util/dom/events/attributes/attributes.js 2.29 kB {0} [built]
…

That generate bugs.

Examples :

  • the “inserted” event is never throw for my components (I think make-mutation-event loaded many time).
  • canViewModel(element) always return undefined .
    …

I try different webpack configuration (DedupePlugin,…). Finally I fix this behaviour using alias in webpack :

alias: {
“can-util”: __dirname + ‘/node_modules/can-util’
…
}

There is another better solution ?

I can’t generate this problem with jsbin. Sorry

2

Hey @jcarbou, I haven’t been able to reproduce these issues.

I made a branch with an example webpack setup: https://github.com/chasenlehara/canjs-webpack-example/tree/forum-post-520

It has a component that depends on can-view-model and the inserted event: https://github.com/chasenlehara/canjs-webpack-example/blob/forum-post-520/src/component.js#L16-L19

If you follow the readme to install the dependencies and build the bundle, you should be able to load index.html and see “Inserted was called” on the page.

It’d be great if you could fork that branch and come up with a minimal case where it fails, or if you could share a minimal example from the code you’re working with, that would work too.

[Also, since you’re making the switch, have you considered StealJS for your module loading/bundling needs? If you have but decided against it, I’d love to understand why it wasn’t a good fit for you!]

3

Hi Chasen,

First, thank you for the very prompt response (and the wonderful canjs project !). With your fork everthing work well ! I tried to reproduce these issues with my package.json, webpack config… no effect, everthing work well… :angry:

Finally I delete my “node-modules” directory and then re-run an npm install for my project => No more issues :slight_smile:

Next time, I will try that if a stange behaviour appears…

For the choice “steal vs webpack” is not my main priority because I migrate my code from requirejs/canjs 2 using strict ES6 syntax without extra webpack loader prefix :
import "myFile.css"
no
import “css!./stylesheet.css”.

So I think I will switch to steal.js without code migration. I’ like webpack loaders for js / css / sass / stache / svg (svg to font). I lose stache compilation on build (can-complile)…

Next step : mocha integration for test (webpack + babel + canjs + mocha…)

I will try steal.js after for the same project to compare these 2 solutions and validate a final choice.

1 Like
4

node_modules issues are a pain. I’m glad it’s working now!

When you decide to check out StealJS, be sure to check out the website to find plugins for mocha, sass, stache, svg, etc. Always feel free to post here if you have any questions. :blush:

1 Like