Dependency not found: !handsontable/dist/handsontable.full.css

[RobertoPrevato]

Hi, I followed the instructions described here : https://github.com/handsontable/vue-handsontable-official/wiki/Installation-guide; using official Vue.js project template and installed properly HandsonTable pro using npm.

I am getting the following error:

* -!../../css-loader/index.js?{"minimize":false,"sourceMap":false}!handsontable/dist/handsontable.full.css in ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-0e50d93a","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./node_modules/vue-handsontable-official/src/HotTable.vue

What piece of information is missing?

Best Regards,

[alexon1234]

This seems like is a problem with webpack. Could you show your webpack.config file?

[RobertoPrevato]

Thanks for replying so quickly. I am using the official Vue.js template, obtained using the following commands:

$ npm install -g vue-cli
$ vue init webpack my-project

I didn't modify the build configuration, hence webpack.base.conf contains:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

and webpack.dev.conf.js contains:

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

I installed handsontable-pro using npm install, and followed the instructions to have the alias resolving "handsontable" to the "pro" name, which is the only change I did to build configuration (as a side note, here I copy-pasted a clean project obtained with the cli, so it doesn't include the alias configuration).

Since the css was missing, I also tried to install the community version, too, always using npm install.

[cordeirovs]

Hello,

I'm having the exact same error as @RobertoPrevato. It happens when I add handsontable: path.resolve(__dirname, 'node_modules/handsontable-pro'), on 'webpack.base.conf'.

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        handsontable: path.resolve(__dirname, 'node_modules/handsontable-pro'),
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
    }
},

Regards, Diogo Cordeiro

[n-sikka]

I'm having a similar error in a nuxt vue project. Module build failed: Error: Failed to find '~handsontable/dist/handsontable.full.css'

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  css: [
    // bootstrap
    '@/assets/bootstrap/scss/bootstrap.scss',
    // handsontable
    '~/node_modules/handsontable/dist/handsontable.full.css'
  ],

  /*
  ** Build configuration
  */
  build: {
    vendor: ['highcharts', 'axios', 'colorbrewer', 'moment', 'numeral', 'handsontable', 'vue-handsontable-official'],
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

[cordeirovs]

I fixed it by replacing handsontable: path.resolve(__dirname, 'node_modules/handsontable-pro') with handsontable: resolve('node_modules/handsontable-pro')

[PhilAndrew]

@n-sikka Did you solve the problem? I am having the same problem with Nuxt.js, specifically this one https://github.com/nuxt-community/koa-template

[n-sikka]

@PhilAndrew I couldn't in any way other than doing this -> const Handsontable = process.browser ? require('handsontable') : null its basically a nuxt variable that checks if the browser is there or not and then loads it.

I directly required it where i needed it instead of putting it in the nuxt.config.js

[PhilAndrew]

Where did you place that line? Sorry I'm not very familiar with Nuxt.js, new to it.

[n-sikka]

@PhilAndrew it's in place of the import statement in your component, where you wanna use it.

[PhilAndrew]

Hi @n-sikka , actually I don't understand and I think I will drive you crazy if I keep saying I don't understand, but thanks for the hint, I got it to work by doing the following.

In nuxt.config.js I added mode: 'spa', // Required if using the tag no-ssr

in node_modules/vue-handsontable-official/src/HotTable.vue I changed the file as follows.

https://gist.github.com/PhilAndrew/ec2f1cbe59ef5a5abf0d1cd358d0e271

Note the two changes 1. the no-ssr tag and 2. import statement at bottom not using ~

Maybe this is a potential clue to fixing the general problem.

Actually this seems not a good idea as it prevents server side rendering, and I just realised that mostly the mode: 'spa' is what makes it work.

[PhilAndrew]

I found this is a valid solution for me now as it renders the handsontable in client side and prevents server side rendering. https://gist.github.com/PhilAndrew/0c35112451bbc15a9999b7e867390e4b

I still had to wrap it in a no-ssr tag

[amc1999]

Same problem just out of the box:

vue init webpack ht-hello
cd ht-hello
npm install --save-dev babel-preset-es2015
npm install vue-handsontable-official
npm install

Replace content of vue standard src/components/HelloWorld.vue with any of Handsontable vue example and result is:

npm run dev
........
Module build failed: Error: Failed to find '~handsontable/dist/handsontable.full.css'
in [
    ....../ht-hello/node_modules/vue-handsontable-official/src
  ]
......

No changes done in vue, webpack, Handsontable, etc. and this is not Handsontable Pro, it is out-of the box "Hello world" vue-handsontable-official.

As quick temporary fix I can modify ...../node_modules/vue-handsontable-official/src/HotTable.vue and replace '~handsontable/dist/handsontable.full.css' with 'handsontable/dist/handsontable.full.css' That works for today, until next npm install. And I would really appreciate if out of the box npm install vue-handsontable-official would be compatible with out of the box npm vue webpack, thank you.

[kscarrot]

I get same problem.Then i found that the path in '/node_modules/vue-handsontable-official/src/HotTable.vue',style>@'blablaxxxx'</style is not right,you can fix it to a right path,and copy .full.css file to it.

[gralance]

@amc1999 's workaround solution just works! thank you

[eljefedelrodeodeljefe]

Is there an official workaround. Going into node_modules? is out of the question.

[amc1999]

I am humbling to create PR just to to remove ~ in the @import "~handsontable/..." and sincerely hope it would be fixed in the next release. In the meantime I am using npm i handsontable and do include modified vue-handsontable-official as part of /src/ (my project MIT-licensed).

Other reason to modify vue-handsontable-official is to apply vue default out-of-the-box linting. It is also trivial formal changes (removing semicolons and extra spaces) and I prefer to keep vue default style for all sources.

If anyone else interested I certainly can clone modified (linted) vue-handsontable-official and create pull request.

[GiuMagnani]

Any workaround for this without editing node_modules package?

[amc1999]

There is already a pull request standing in line since January 11, not sure when it is going to be committed.

[jansiegel]

We made quite a big refactor of the wrapper structure, so it would be easier to configure. Could you check if installing it as @handsontable/vue (or @handsontable-pro/vue for the Pro version) fixes your problems? As it's a problem with the css files, it might help, as now handsontable's css files are not a part of the build (need to be included separately)

For more information on how to install it from version 2.0.0-beta1 onwards, see: https://github.com/handsontable/vue-handsontable-official/wiki/Installation-guide

[hanxue]

@jansiegel could you re-open and consider a solution? I still have the same problem, and had to manually replace

@import "~handsontable/dist/handsontable.full.css";

with

@import "handsontable/dist/handsontable.full.css";

Installing the 2.0.0-beta1 version directly from github does not get resolved by npm / yarn - #49

[jansiegel]

@hanxue Could you check if installing it as @handsontable/vue (as I explained in #49) fixes your problem?

[mrpiotr-dev]

I think we can close this issue. Feel free to reopen if you find the same bug in v2.0.0-beta1+

[BBroerse]

Maybe this should be added to the code examples in the readme.