problem with import about reactive-blueimp-gallery HOT 7 CLOSED

Hi @ssageghi
There was a missing config in package.json that led to other issues.
They're all solved in v 0.1.7

Reinstall reactive-blueimp-gallery, and make sure you have v >= 0.1.7 in your package.json

Thanks for report it!
Let me know if you can make it work 💪

from reactive-blueimp-gallery.

that problem was solved
but I have this Error now :)
ERROR in ./~/blueimp-gallery/img/loading.gif
Module parse failed: E:\Project\Archigate\ArchigateV2\node_modules\blueimp-gallery\img\loading.gif Unexpected character '�' (1:6)
You may need an appropriate loader to handle this file type.

from reactive-blueimp-gallery.

You're right, but I can't include loaders into the lib, you should configure in your devel environment the way your project will handle resources.
Are you using webpack? I made an implementation with a minimal React + Webpack config and I saw the loaders errors, first for css and later for images (svg, png and gif).
I fixed it installing style-loader, css-loader, file-loader and image-webpack-loader packages, configuring webpack loaders like this:

module: {
    loaders: [{
      test: /\.css$/,
      loaders: [ 'style-loader', 'css-loader' ]
    },{
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader'
      ]
    }
...

using node v6.10.3 (npm v3.10.10)

Hope that help!

from reactive-blueimp-gallery.

Seems like more webpack config issues. Maybe related to scss loaders. Can you share your webpack config?

from reactive-blueimp-gallery.

this is my config
`import webpack from 'webpack'
import cssnano from 'cssnano'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import config from '../config'
import _debug from 'debug'

const debug = _debug('app:webpack:config')
const paths = config.utils_paths
const {DEV, PROD, TEST} = config.globals

debug('Create configuration.')
const webpackConfig = {
name: 'client',
target: 'web',
devtool: config.compiler_devtool,
resolve: {
root: paths.client(),
extensions: ['', '.js', '.jsx', '.json']
},
module: {}
}

webpackConfig.node = {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
// ------------------------------------
// Entry Points
// ------------------------------------
const APP_ENTRY_PATHS = [
paths.client('main.js')
]

webpackConfig.entry = {
app: DEV
? APP_ENTRY_PATHS.concat(webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr)
: APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}

// ------------------------------------
// Bundle Output
// ------------------------------------
webpackConfig.output = {
filename: [name].[${config.compiler_hash_type}].js,
path: paths.dist(),
publicPath: config.compiler_public_path
}

// ------------------------------------
// Plugins
// ------------------------------------
webpackConfig.plugins = [
new webpack.DefinePlugin(config.globals),
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('static/favicon.svg'),
filename: 'index.html',
inject: 'body',
minify: {
collapseWhitespace: true
}
})
]

if (DEV) {
debug('Enable plugins for live development (HMR, NoErrors).')
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
)
} else if (PROD) {
debug('Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false
}
})
)
}

// Don't split bundles during testing, since we only want import one bundle
if (!TEST) {
webpackConfig.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
)
}

// ------------------------------------
// Pre-Loaders
// ------------------------------------
/*
[ NOTE ]
We no longer use eslint-loader due to it severely impacting build
times for larger projects. npm run lint still exists to aid in
deploy processes (such as with CI), and it's recommended that you
use a linting plugin for your IDE in place of this loader.

If you do wish to continue using the loader, you can uncomment
the code below and run npm i --save-dev eslint-loader. This code
will be removed in a future release.

webpackConfig.module.preLoaders = [{
test: /.(js|jsx)$/,
loader: 'eslint',
exclude: /node_modules/
}]

webpackConfig.eslint = {
configFile: paths.base('.eslintrc'),
emitWarning: DEV
}
*/

// ------------------------------------
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.loaders = [{
test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0']
}
},
{
test: /.json$/,
loader: 'json'
}]

// ------------------------------------
// Style Loaders
// ------------------------------------
// We use cssnano with the postcss loader, so we tell
// css-loader not to duplicate minimization.
const BASE_CSS_LOADER = 'css?sourceMap&-minimize'

// Add any packge names here whose styles need to be treated as CSS modules.
// These paths will be combined into a single regex.
const PATHS_TO_TREAT_AS_CSS_MODULES = [
// 'react-toolbox', (example)
]

// If config has CSS modules enabled, treat this project's styles as CSS modules.
if (config.compiler_css_modules) {
PATHS_TO_TREAT_AS_CSS_MODULES.push(
paths.client().replace(/[^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]]/g, '\$&') // eslint-disable-line
)
}

const isUsingCSSModules = !!PATHS_TO_TREAT_AS_CSS_MODULES.length
const cssModulesRegex = new RegExp((${PATHS_TO_TREAT_AS_CSS_MODULES.join('|')}))

// Loaders for styles that need to be treated as CSS modules.
if (isUsingCSSModules) {
const cssModulesLoader = [
BASE_CSS_LOADER,
'modules',
'importLoaders=1',
'localIdentName=[name][local]_[hash:base64:5]'
].join('&')

webpackConfig.module.loaders.push({
test: /.scss$/,
include: cssModulesRegex,
loaders: [
'style',
cssModulesLoader,
'postcss',
'sass?sourceMap'
]
})

webpackConfig.module.loaders.push({
test: /.css$/,
include: cssModulesRegex,
loaders: [
'style',
cssModulesLoader,
'postcss'
]
})
}

// Loaders for files that should not be treated as CSS modules.
const excludeCSSModules = isUsingCSSModules ? cssModulesRegex : false
webpackConfig.module.loaders.push({
test: /.scss$/,
exclude: excludeCSSModules,
loaders: [
'style',
BASE_CSS_LOADER,
'postcss',
'sass?sourceMap'
]
})
webpackConfig.module.loaders.push({
test: /.css$/,
exclude: excludeCSSModules,
loaders: [
'style',
BASE_CSS_LOADER,
'postcss'
]
})
webpackConfig.module.loaders.push({
test: /.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
})

// ------------------------------------
// Style Configuration
// ------------------------------------
webpackConfig.sassLoader = {
includePaths: paths.client('styles')
}

webpackConfig.postcss = [
cssnano({
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
})
]

// File loaders
/* eslint-disable /
webpackConfig.module.loaders.push(
{ test: /.woff(?.)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
{ test: /.woff2(?.)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
{ test: /.otf(?.)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
{ test: /.ttf(?.)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
{ test: /.eot(?.)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
{ test: /.svg(?.)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
{ test: /.(png|jpg)$/, loader: 'url?limit=8192' }
)
/ eslint-enable */

// ------------------------------------
// Finalize Configuration
// ------------------------------------
// when we don't know the public path (we know it only when HMR is enabled [in development]) we
// need to use the extractTextPlugin to fix this issue:
// http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
if (!DEV) {
debug('Apply ExtractTextPlugin to CSS loaders.')
webpackConfig.module.loaders.filter((loader) =>
loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0]))
).forEach((loader) => {
const [first, ...rest] = loader.loaders
loader.loader = ExtractTextPlugin.extract(first, rest.join('!'))
Reflect.deleteProperty(loader, 'loaders')
})

webpackConfig.plugins.push(
new ExtractTextPlugin('[name].[contenthash].css', {
allChunks: true
})
)
}

export default webpackConfig
`

from reactive-blueimp-gallery.

I can't see the error in comments anymore, but try replacing the loader 'style' by 'style-loader'

from reactive-blueimp-gallery.

close this since issue about import is fixed.

from reactive-blueimp-gallery.