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

Salus Sage · Accepted Answer · 2017-10-19 02:32:50Z

3

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

answered Oct 19, 2017 at 2:32

Salus Sage

6783 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Bradshaw · Accepted Answer · 2016-02-23 22:50:31Z

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, 2016 at 22:50

David Bradshaw

13.2k3 gold badges45 silver badges76 bronze badges

8 Comments

Mad Wombat Over a year ago

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.

David Bradshaw Over a year ago

Have you tried including the path in your import statement?

David Bradshaw Over a year ago

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.

Mad Wombat Over a year ago

I know. How do I do that?

Johannes Ewald Over a year ago

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

|

Trantor · Accepted Answer · 2017-11-02 10:30:54Z

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 2, 2017 at 10:30

Trantor

7761 gold badge9 silver badges29 bronze badges

Comments

Legends · Accepted Answer · 2018-05-29 13:23:48Z

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, 2018 at 13:23

answered Mar 14, 2018 at 6:54

Legends

22.9k17 gold badges102 silver badges133 bronze badges

Collectives™ on Stack Overflow

Load javascript in webpack

4 Answers 4

Comments

8 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

Comments

Comments

Linked

Related