I am using legacy appltion of react. I did some update and installed some dependecies like i18next react-i18next but I am getting below error now.
below is my file webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
// Try the environment variable, otherwise use root
const ASSET_PATH = process.env.ASSET_PATH || '/';
module.exports = (env = {}) => {
return {
entry: {
index: [SRC_DIR + '/index.js'],
},
output: {
path: BUILD_DIR,
filename: '[name].bundle.js',
publicPath: ASSET_PATH,
},
resolve: {
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
extensions: ['', '.js'],
},
// watch: true,
// devtool: 'inline-source-map',
devServer: {
contentBase: BUILD_DIR,
// port: 9001,
compress: true,
hot: true,
open: true,
watchOptions: {
// Delay the rebuild after the first change
aggregateTimeout: 300,
ignored: /node_modules/,
// Poll using interval (in ms, accepts boolean too)
poll: 1000,
},
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['es2015', 'react'],
plugins: ['transform-class-properties'],
},
},
},
{
test: /.html$/,
loader: 'html-loader',
},
{
test: /.(scss)$/,
use: ['css-hot-loader'].concat(
extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { alias: { '../img': '../public/img' } },
},
{
loader: 'sass-loader',
},
],
})
),
},
{
test: /.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
{
test: /.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]',
},
},
],
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
loader: 'file-loader',
options: {
name: './public/fonts/[name].[hash].[ext]',
},
},
],
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.css', '.scss'],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
new webpack.NamedModulesPlugin(),
extractCSS,
extractSCSS,
new HtmlWebpackPlugin({
inject: true,
template: './public/index.html',
favicon: './public/favicon.png',
}),
new CopyWebpackPlugin([{ from: './public/img', to: 'img' }], {
copyUnmodified: false,
}),
new webpack.EnvironmentPlugin(['API_URL', 'FRONT_URL']),
],
};
};
Below is package.json file.
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bootstrap": "^3.3.7",
"bowser": "^2.1.0",
"classnames": "^2.1.3",
"copy-webpack-plugin": "^4.2.1",
"core-js": "^2.5.4",
"create-react-class": "^15.7.0",
"css-hot-loader": "^1.3.4",
"css-loader": "^0.28.7",
"draft-js": "^0.10.5",
"extract-text-webpack-plugin": "^3.0.2",
"fbemitter": "^2.0.0",
"file-loader": "^1.1.5",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.1",
"html-react-parser": "^0.4.2",
"html-webpack-plugin": "^2.30.1",
"html2canvas": "^1.0.0-alpha.10",
"i18next": "^21.6.3",
"jquery": "^3.2.1",
"jspdf": "^1.3.5",
"moment": "^2.13.0",
"prop-types": "^15.7.2",
"randomstring": "^1.1.5",
"react": "^17.0.2",
"react-addons-test-utils": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-anything-sortable": "^1.7.2",
"react-bootstrap": "^0.31.5",
"react-bootstrap-date-picker-thecodingmachine": "^5.0.1",
"react-bootstrap-native-slider": "^2.0.1",
"react-bootstrap-slider": "^2.0.0",
"react-bootstrap-table": "^4.1.5",
"react-color": "^2.13.8",
"react-datepicker": "1.6.0",
"react-dropzone": "^4.2.3",
"react-i18next": "^11.15.1",
"react-modal": "^3.1.2",
"react-router-dom": "^4.2.2",
"react-scrollable-anchor": "^0.6.1",
"react-select": "^1.0.0-rc.5",
"react-signature-pad": "^0.0.6",
"react-spinners": "^0.4.5",
"react-star-rating": "^1.4.2",
"react-stepzilla": "^4.6.3",
"react-textarea-autosize": "^5.1.0",
"react-toastify": "^3.1.0",
"react-toggle": "^4.0.2",
"react-transition-group": "^1.2.1",
"reactjs-localstorage": "0.0.5",
"reactstrap": "^4.8.0",
"reflux": "^6.4.1",
"style-loader": "^0.19.0",
"superagent": "^3.8.1",
"transform-class-properties": "^1.0.0-beta",
"url-loader": "0.6.2",
"xss": "^0.3.4"
},
"peerDependencies": {
"react": "^16.0.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel": "6.23.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-register": "6.26.0",
"canvas": "1.6.7",
"css-loader": "^0.28.7",
"dotenv-cli": "2.0.1",
"draftjs-to-html": "^0.8.3",
"immutable": "^3.8.1",
"jsdom": "11.2.0",
"mocha": "^3.3.0",
"mocha-jsdom": "^1.1.0",
"node-libs-browser": "^2.0.0",
"node-sass": "^4.5.3",
"react-draft-wysiwyg": "1.10.12",
"react-hot-loader": "^1.2.7",
"react-tools": "0.13.3",
"sass-loader": "^6.0.6",
"source-map": "^0.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.4"
}
what mistake I am doing?