Reputation: 854
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?
Upvotes: 0
Views: 1601
Reputation: 854
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.
Upvotes: 0
Reputation: 63
You should add this to the compilerOptions of your tsconfig.json file:
"typeRoots": [
"node_modules/@types"
]
Upvotes: 0
Reputation: 1402
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';
Upvotes: 1