Typescript 2.0.3 with @types definitions, Webpack, Foundation, jQuery is not defined

Question

I'm trying to build an application with TypeScript 2.0.3 with @types definitions and want to use foundation-sites and bundle everything with webpack. As soon as I try to import foundation, I get the console error message that jQuery is not defined. When I don't import foundation, jQuery works fine!

If anyone could explain, what I'm doing wrong and how to load e.g. Foundation Tooltip from a .ts file, that would be really awesome.

You can check out the complete source here: https://github.com/Der-Alex/typescript-foundation-webpack

What I am doing is kind of basic: I've got an ./app folder. Inside there is an app.ts, main.scss and index.html.

I installed the following npm packages:

...
"dependencies": {
  "@types/foundation-sites": "^6.1.28",
  "@types/jquery": "^2.0.33",
  "css-loader": "^0.25.0",
  "foundation-sites": "^6.2.3",
  "jquery": "^2.1.0",
  "node-sass": "^3.10.1",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.1",
  "ts-loader": "^0.9.1",
  "typescript": "^2.0.3",
  "webpack": "^1.13.2"
},
"devDependencies": {
  "webpack-dev-server": "^1.16.2"
}

My webpack.config.js:

module.exports = {
  entry: './app/app.ts',
  output: {
    filename: './app/bundle.js'
  },
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.ts$/, loader: 'ts-loader'
      },
      {
        test: /\.scss/, loaders: ['style', 'css', 'sass']
      }
    ]
  }
};

my ./app/app.ts:

import './main.scss';
import * as $ from 'jquery';
import 'foundation-sites';

$(() => {
  $(document).foundation();
});

There are no transpile / compile errors. When I run webpack-dev-server and check the result in the browser, the styles are loaded but I get this error message 'jQuery is not defined'. The browser understands $ but for example not $(...).on(...); So what am I doing wrong?

Stubb0rn · Answer 1 · 2016-10-16T08:29:52.307

1

I think in this case problem is caused by the fact that if jQuery is imported using webpack (CommonJS style by default) it doesn't create global jQuery variable that foundation-sites is relying on. You could try to expose it in your code and see if it fixes the problem:

import * as $ from 'jquery'; window.jQuery = $; import 'foundation-sites';

edited Oct 16 '16 at 08:29

answered Oct 16 '16 at 08:22

Stubb0rn

1,229
12
17

Thank you so much, Stubb0rn! – Der Alex Oct 16 '16 at 08:29
I had to change window.$ to window['jQuery']. TypeScript doesn't allow to add a property in . syntax. But now it works! Thanks! – Der Alex Oct 16 '16 at 08:30

score 0 · Answer 2 · answered Oct 24 '16 at 15:55

0

You should add this to the compilerOptions of your tsconfig.json file:

"typeRoots": [
    "node_modules/@types"
]

answered Oct 24 '16 at 15:55

Macondiana

53
5

Hi @Macondiana. I am not sure, how this should help me with my problem. typeRoots only tells typescript, where to look for which typings. My problem is, that webpack doesn't include a global jQuery. – Der Alex Nov 27 '16 at 11:46

score 0 · Accepted Answer · edited May 23 '17 at 10:29

Finally I got it to work with webpack only! With some important info from a dev colleague I found that post: Managing jQuery plugin dependency in webpack

This gave me the following hint:

Require jquery under the global namespace

global.jQuery = require('jquery');
Add an alias

resolve: { extensions: ['', '.ts', '.js'], alias: { jquery: "jquery/src/jquery" } }
Add $ and jQuery as a plugin

new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })

This makes jQuery a global object and can be used inside .ts files like so:

import * as $ from 'jquery';
$(document).foundation();

I think, this is the cleanest way of loading jQuery with webpack. So I would really appreciate if this answer is voted up.

Typescript 2.0.3 with @types definitions, Webpack, Foundation, jQuery is not defined

3 Answers3