1

I am porting legacy code to Webpack and I have the following...

Dependency loader in TS

import "baconjs/dist/Bacon.js"

Module in Coffee

@stream = new Bacon.Bus()

When I try to run I get

zone.js?fad3:269 Uncaught ReferenceError: Bacon is not defined

I tried adding this to my webpack config....

new webpack.ProvidePlugin({
    ...
    Bacon: "Bacon"
}),

But it did not help.

Module not found: Error: Cannot resolve module 'Bacon' in ...

What can I do to solve this?

Tomasz Jakub Rup
  • 10,502
  • 7
  • 48
  • 49
Jackie
  • 21,969
  • 32
  • 147
  • 289

2 Answers2

1

Problem is probably in importing a module.

Import a module for side-effects only

Though not recommended practice, some modules set up some global state that can be used by other modules. These modules may not have any exports, or the consumer is not interested in any of their exports. To import these modules, use:

import "./my-module.js";

Bacon.js is a UMD module and You cannot import it in this way. Try

import {Bacon} from "baconjs/dist/Bacon.js";

Or in CS:

Bacon = require('baconjs/dist/Bacon.js')

And make sure is in path.

Community
  • 1
  • 1
Tomasz Jakub Rup
  • 10,502
  • 7
  • 48
  • 49
  • I think you missed the fact that this is CoffeeScript not Typescript, I don't think the import will work for CS. I did try this and I got `error TS2307: Cannot find module 'baconjs/dist/Bacon.js'.` I see the file in that location in node_modules. – Jackie Aug 27 '16 at 13:42
  • Then what is `// In TS import "baconjs/dist/Bacon.js"` in Your question? – Tomasz Jakub Rup Aug 27 '16 at 13:43
  • I have a TS file that loads the dependency but the Bacon variable is actually used in CS not TS. So My understanding is, even if I load a module using TS, it doesn't make it accessible to CS but I might be wrong. Either way I won't know for sure because of the error I get when I try. – Jackie Aug 27 '16 at 13:46
  • Could it be an older version of bacon that doesn't have the UMD module attached? I guess on second thought the import should be handled by the ES2015 polyfills anyway and not Typescript. So maybe you are right if we can fix the Webpack error. – Jackie Aug 27 '16 at 13:50
  • If You need `Bacon` in a CS module, You must load it in this module. – Tomasz Jakub Rup Aug 27 '16 at 13:50
  • You can try to load dependencies in TS module, and make it global. i.e. load Bacon and `window.Bacon = Bacon` – Tomasz Jakub Rup Aug 27 '16 at 14:01
  • I told you though I can't load in ts at all thanks to the message. I will try loading from cs – Jackie Aug 28 '16 at 14:32
0

The previous answer was on the right track but I was hesitant to have to include Bacon = require("baconjs/dist/Bacon.js") on each coffee script file that required it. So I went ahead and added the following to my Typescript dependencies file...

window['Bacon'] = require('baconjs/dist/Bacon.js');

This seems to have worked and does not require a require ;-) on each coffeescript file individually.

I originally tried 

window.Bacon = require('baconjs/dist/Bacon.js');

But Typescript doesn't like it (How do you explicitly set a new property on `window` in TypeScript?)

Community
  • 1
  • 1
Jackie
  • 21,969
  • 32
  • 147
  • 289