Load javascript in webpack

Question

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',
    })
  ]
};

score 3 · Answer 1 · answered Oct 19 '17 at 02:32

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

score 0 · Answer 2 · answered Feb 23 '16 at 22:50

0

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"]

answered Feb 23 '16 at 22:50

David Bradshaw

11,859
3
41
70

I already have NPM packages loading just fine. The module I am trying to load is distributed as source, not as a package. I will post my entire webpack config. – Mad Wombat Feb 23 '16 at 23:04
Have you tried including the path in your `import` statement? – David Bradshaw Feb 23 '16 at 23:08
Basically you need to tell webpack to add the path to wherever the code you want to import is. So it knows where to look. – David Bradshaw Feb 23 '16 at 23:11
I know. How do I do that? – Mad Wombat Feb 23 '16 at 23:28
When you `import ChessBoard from 'chessboard'`, it must be located under `node_modules` or inside one of the folders you have specified at `resolve.root` in your `webpack.config.js` – Johannes Ewald Feb 24 '16 at 09:39
Well node_modules is for NPM packages, I don't want to put software in there that NPM is not aware of. I will try with resolve.root. I was under impression that I could use a loader of some sort to specify where to look for it. – Mad Wombat Feb 24 '16 at 16:01
Mind you that I get "Cannot find module" when I run webpack, not when I access my pages. – Mad Wombat Feb 24 '16 at 16:03
When loading packages that aren't node modules you need to specify them like `import './myFile.js'`or `import Something from './myFile.js'`or `import MyComponent from 'components/MyComponent'`. You can't use just its name as it will always resolve to node_modules. – Vlatko Vlahek Sep 05 '17 at 23:02

score 0 · Answer 3 · answered Nov 02 '17 at 10:30

0

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' ),
...

answered Nov 02 '17 at 10:30

Trantor

768
1
8
27

Legends · Answer 4 · 2018-05-29T13:23:48.413

0

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';

edited May 29 '18 at 13:23

answered Mar 14 '18 at 06:54

Legends

21,202
16
97
123

Load javascript in webpack

4 Answers4