Closed RobertoPrevato closed 6 years ago
This seems like is a problem with webpack. Could you show your webpack.config file?
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.
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
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)/
})
}
}
}
}
I fixed it by replacing
handsontable: path.resolve(__dirname, 'node_modules/handsontable-pro')
with
handsontable: resolve('node_modules/handsontable-pro')
@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
@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
Where did you place that line? Sorry I'm not very familiar with Nuxt.js, new to it.
@PhilAndrew it's in place of the import statement in your component, where you wanna use it.
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.
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
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.
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.
@amc1999 's workaround solution just works! thank you
Is there an official workaround. Going into node_modules
? is out of the question.
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.
Any workaround for this without editing node_modules
package?
There is already a pull request standing in line since January 11, not sure when it is going to be committed.
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
@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
@hanxue Could you check if installing it as @handsontable/vue
(as I explained in #49) fixes your problem?
I think we can close this issue. Feel free to reopen if you find the same bug in v2.0.0-beta1+
Maybe this should be added to the code examples in the readme.
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:
What piece of information is missing?
Best Regards,