CODEWITHSUNDEEP
javascriptwebpack
Mad Wombat
Mad Wombat

Reputation: 15105

Load javascript in webpack

I am new to javascript dev in general and webpack in particular. I want to use this chess board module (https://github.com/oakmac/chessboardjs/) in my project. It sees to be exporting ChessBoard object. My project is using ES6, so I would love to be able to

import { ChessBoard } from 'chessboard'

or

import ChessBoard from 'chessboard'

I understand that I need some sort of loader for this. I have tried to add expose loader in the same way I use it for jQuery

{test: require.resolve("jquery"), loader: "expose?$!expose?jQuery"},
{test: require.resolve("chessboard"), loader: "expose?ChessBoard!./vendor/chessboard/js/chessboard-0.3.0.min.js"}

But I get "Error: Cannot find module 'chessboard'" error. Same if I replace ChessBoard with $. Not sure what I am doing wrong. Is expose even the right loader for what I am trying to do?

Here is my webpack config for reference (without the broken chessboard expose test)

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {test: require.resolve("jquery"), loader: "expose?$!expose?jQuery"},
      {test: /\.jsx?$/, exclude:  /(node_modules|bower_components)/, loader: 'babel', query: {presets: ['react', 'es2015']} }, 
      /* CSS loaders */
      {test: /\.css$/, loader: 'style!css'},
      {test: /\.less$/, loader: 'style!css!less'},
      /* font loaders for bootstrap */
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Test',
      inject: false,
      template: 'node_modules/html-webpack-template/index.ejs',
      appMountId: 'app',
      devServer: 'http://localhost:8080',
    })
  ]
};

Upvotes: 3

Views: 6809

Answers (4)

Legends
Legends

Reputation: 22662

You have to do two things:

1.) under plugins add:

new webpack.ProvidePlugin({
   "window['jQuery']": "jquery"
})

2.) Install the script-loader plugin and import the script like this:

import 'script-loader!./chessboard.js';

Upvotes: 0

Trantor
Trantor

Reputation: 766

I guess you will need something like this in your webpack.config.js:

...
       resolve: {
            modules: [
                'node_modules',
                path.join( __dirname, 'node_modules' ),
                path.resolve( './src' ),
...

Upvotes: 0

Salus Sage
Salus Sage

Reputation: 678

The problem seems to be that the chessboard.js is just a anonymous function and not a AMD or CommonJS module, and you may have to look at adding shims using webpack.

Not all JS files can be used directly with webpack. The file might be in an unsupported module format, or not even in any module format. https://github.com/webpack/docs/wiki/shimming-modules

Upvotes: 3

David Bradshaw
David Bradshaw

Reputation: 13077

Without seeing your entire webpack.config.js file it's tricky to say what the issue is. Basically you need to tell webpack to include `/node_modules/' into the list of paths it looks in for js modules.

You will need to add something like this to the resolve section of webpack.config.js.

 modulesDirectories: ["node_modules"]

Upvotes: 0

Related Questions