I installed this npm module and upon npm start, it gives me
ERROR in ./~/react-native-accordion/src/index.js
Module parse failed: C:\Users...\node_modules\react-native-accordion\src\index.js Line 95: Unexpected token <
You may need an appropriate loader to handle this file type.
| return (
| /*jshint ignore:start */
| <View
| style={{
| overflow: 'hidden'
# ./~/react-native-accordion/index.ios.js 1:17-39
Until this module, my webpack.config.js has survived all other stuff thrown at it. From reading around, apparentely it's not meant to be parsing node_modules anyway since they're only expected to conform to ES5, so I tried excluding the modules path with
exclude: [
path.resolve(__dirname, "node_modules"),
],
but to no avail. Here's my complete webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3333',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/static/'
},
resolve: {
extensions: ['', '.jsx', '.scss', '.js', '.json'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules')
]
},
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('style.css')
],
exclude: [
path.resolve(__dirname, "./node_modules"),
],
module: {
noParse: /node_modules\/json-schema\/lib\/validate\.js/,
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
},
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" },
{
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap!toolbox')
},
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.svg$/, loader: 'svg-loader?pngScale=2' }
]
},
postcss: [autoprefixer]
};
Related
I am upgrading webpack on my application from v4 to v5. I am receiving this error on npx webpack:
[webpack-cli] Error: Conflict: Multiple chunks emit assets to the same filename style.css (chunks app and vendor)
at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Compilation.js:4610:12
at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Cache.js:91:34
at Array.<anonymous> (C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\cache\MemoryCachePlugin.js:45:13)
at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Cache.js:91:19
at Hook.eval [as callAsync] (eval at create (C:\workspace\my-lib\my-lib-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:19:1)
at Cache.get (C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Cache.js:75:18)
at ItemCacheFacade.get (C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\CacheFacade.js:111:15)
at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Compilation.js:4556:22
at arrayEach (C:\workspace\my-lib\my-lib-ui\node_modules\neo-async\async.js:2405:9)
at Object.each (C:\workspace\my-lib\my-lib-ui\node_modules\neo-async\async.js:2846:9)
My webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const MODE = process.env.NODE_ENV || 'development';
module.exports = {
entry: {
app: path.join(__dirname, 'src/main/js/index')
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'react': path.resolve('./node_modules/react'),
'react-dom': path.resolve('./node_modules/react-dom')
}
},
output: {
path: path.resolve(__dirname, 'target/classes/public'),
filename: '[name].js',
assetModuleFilename: '[name]-[hash:7][ext]',
sourceMapFilename: '[name].js.map',
chunkFilename: '[name]-[hash:7].js'
},
mode: MODE,
module: {
rules: [
{
test: /\.(js|jsx)?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
exclude: /node-modules/
}
}
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader'
]
},
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
]
},
{
test: /\.(less)$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
]
},
plugins: [
new ESLintPlugin({extensions: ['js', 'jsx']}),
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new CopyPlugin({
patterns: [{from: path.join(__dirname, 'node_modules/core-js/client/shim.min.js'), to: 'shim.js'}],
}),
],
optimization: {
chunkIds: 'named',
splitChunks: {
cacheGroups: {
vendor: {
filename: 'vendor.js',
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
},
default: false
}
},
},
devtool: MODE === 'development' ? 'inline-source-map' : false
};
and package.json:
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
"mini-css-extract-plugin": "^2.6.0",
change filename: '[name].js', to filename: "[name].[contenthash].js"
Webpack is trying to split CSS files into chunks as well, but your MiniCssExtractPlugin is configured to output only one name filename: style.css. Change that to filename: [name].css. Don't forget to update your HTML template accordingly, as your root CSS file name will change.
I have a react project that was created by CRA. Now i installed webpack because i wanted to add Jquery into config. Now I am getting this error after initializing webpack:
Could someone help me?
cli image
Webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "./bundle.js",
},
mode: 'development',
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env','#babel/react'],
plugins: ['#babel/proposal-class-properties', '#babel/plugin-proposal-object-rest-spread', '#babel/plugin-syntax-dynamic-import']
}
}
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader' },
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: "./dist/index.html",
filename: './index.html',
favicon: './dist/favicon.ico'
}),
new InterpolateHtmlPlugin({
PUBLIC_URL: 'static' // can modify `static` to another name or get it from `process`
})
],
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
please help
I have this project architecture:
Root
Project1
package.json
webpack.config
Project2
package.json
webpack.config
Common
file1.js
I want to be able to use file1.js in side each project.
I am using old webpack 1.13.1.
I have tried using an alias:
resolve: {
alias: {
commons: path.resolve(__dirname, ".../../Common/")
}
}
I have tried both ways:
import ProcessTree from '../../Common/file1';
import ProcessTree from 'commons/file1';
Any ideas?
this is my webpack config:
import webpack from 'webpack';
import path from 'path';
let commonPath= path.resolve(__dirname, '..', '..', 'Common');
export default {
devtool: 'eval-source-map',
entry: [
'./src/index'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
alias: {
commons: commonPath
}
},
devServer: {
contentBase: './src'
},
module: {
loaders: [
{
test: /\.js$/,
include: [
path.join(__dirname, 'src'),
commonPath
],
loaders: ['babel']
},
{ test: /(\.css)$/, loaders: ['style', 'css?sourceMap'] },
{ test: /(\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?mimetype=image/svg+xml' }
]
},
node: {
fs: "empty",
child_process: 'empty',
}
};
Make sure the path is included in whichever module loader rule you want to process files within the Common folder with.
For example:
module: {
loaders: [
{
test: /\.js?$/,
include: [
path.resolve(__dirname),
path.resolve(__dirname, "../../Common")
],
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
Hellor there, I am working with react-fontawesome and webpack 4.33 version and I have this issue when I use a IconComponent it throws me an error TypeError: Object(...) is not a function.
It seems that the code points right here:
var renderedIcon = Object(_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__["icon"])(iconLookup, _objectSpread({}, classes, transform, mask, {
symbol: symbol,
title: title
}));
I have this in my webpack dev config file:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: {
app: path.resolve(__dirname,'src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: 'http://localhost:9001/',
chunkFilename: 'js/[id].[chunkhash].js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true,
port: 9001,
hot: true,
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.jpg|png|gif|woff|woff2|eot|ttf|svg|mp4|webm$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'assets/',
}
}
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html')
}),
],
}
I think I didn't add some configuration to my webpack file or should I report this as bug in the repository of react-fontawesome?
I am trying to load images from local storage but i have tried all options left on stackoverflow but not working yet.Below is the folder structure
And below is the code for file-loader
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
I tried using import Star from '../images/star.svg'; and then <img src={Star} alt="star" /> but getting below error
ERROR in ./client/images/star.svg
Module parse failed: C:\Users\muaz\Desktop\learn-redux - Copy\client\images\star.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
And also tried src={require("../images/star.svg")} and getting same result.But i have already installed file-loader on dev depencies:
My full devServe.js code is
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.css$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {},
},
]
}
};