From 8c641a76ab06f89bb8ec8d6a86123f0772d24423 Mon Sep 17 00:00:00 2001 From: Webb Pinner Date: Sat, 24 Jul 2021 07:57:39 -0400 Subject: [PATCH 1/3] applying fixes for webpack5 integration --- .eslintrc | 1 + package.json | 51 ++++++++++++------------ src/components/user_permissions_modal.js | 2 + src/index.js | 13 ++++++ 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/.eslintrc b/.eslintrc index 63e1ee6..ec09adf 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,6 @@ { "plugins": [ + "react", "react-redux" ], parser: "babel-eslint", diff --git a/package.json b/package.json index 128b551..b6f75b1 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,9 @@ }, "main": "index.js", "scripts": { - "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development", + "start": "webpack serve --mode development --node-env development", "test": "echo \"Error: no test specified\" && exit 1", - "build": "webpack --mode production", + "build": "webpack --mode production --node-env production", "lint": "eslint . --ext .js", "lint-fix": "eslint . --ext .js --fix" }, @@ -31,8 +31,8 @@ "axios": "^0.21.1", "bootstrap": "^4.6.0", "connected-react-router": "^6.9.1", - "filepond": "^4.27.1", - "highcharts": "^9.1.0", + "filepond": "^4.28.2", + "highcharts": "^9.1.2", "highcharts-react-official": "^3.0.0", "immutable": "^3.8.2", "jquery": "^3.6.0", @@ -45,7 +45,7 @@ "pretty-bytes": "^5.6.0", "rc-slider": "^9.7.2", "react": "^16.14.0", - "react-bootstrap": "^1.6.0", + "react-bootstrap": "^1.6.1", "react-copy-to-clipboard": "^5.0.3", "react-datetime": "^3.0.4", "react-dom": "^16.14.0", @@ -64,35 +64,34 @@ "universal-cookie": "^4.0.4" }, "devDependencies": { - "@babel/core": "^7.14.0", - "@babel/plugin-proposal-class-properties": "^7.13.0", - "@babel/plugin-transform-runtime": "^7.13.15", - "@babel/preset-env": "^7.14.1", - "@babel/preset-react": "^7.13.13", - "@babel/runtime": "^7.14.0", - "@fontsource/roboto": "^4.3.0", + "@babel/core": "^7.14.8", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-transform-runtime": "^7.14.5", + "@babel/preset-env": "^7.14.8", + "@babel/preset-react": "^7.14.5", + "@babel/runtime": "^7.14.8", + "@fontsource/roboto": "^4.5.0", "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.2", - "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^6.4.1", - "css-loader": "^4.3.0", - "eslint": "^7.26.0", - "eslint-plugin-import": "^2.22.1", - "eslint-plugin-react": "^7.23.2", + "copy-webpack-plugin": "^9.0.1", + "css-loader": "^6.2.0", + "eslint": "^7.31.0", + "eslint-plugin-import": "^2.23.4", + "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-redux": "^3.3.2", - "file-loader": "^6.2.0", - "html-webpack-plugin": "^4.5.2", - "mini-css-extract-plugin": "^1.6.0", - "node-sass": "^4.14.1", - "sass-loader": "^10.2.0", - "style-loader": "^1.3.0", - "webpack": "^4.46.0", - "webpack-cli": "^3.3.12", + "html-webpack-plugin": "^5.3.2", + "mini-css-extract-plugin": "^2.1.0", + "process": "^0.11.10", + "sass": "~1.32.13", + "sass-loader": "^12.1.0", + "style-loader": "^3.2.1", + "webpack": "^5.46.0", + "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" } } diff --git a/src/components/user_permissions_modal.js b/src/components/user_permissions_modal.js index bf41aab..2ab82cd 100644 --- a/src/components/user_permissions_modal.js +++ b/src/components/user_permissions_modal.js @@ -97,6 +97,8 @@ class UserPermissionsModal extends Component { return lowering_permissions; }, permissions); + + this.setState({ permissions }) } } diff --git a/src/index.js b/src/index.js index aecc723..6b2172d 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import { Provider } from 'react-redux'; import { ConnectedRouter } from 'connected-react-router'; import { Route, Switch } from 'react-router'; import Cookies from 'universal-cookie'; +import L from 'leaflet'; // eslint-disable-next-line no-unused-vars import momentDurationFormatSetup from 'moment-duration-format'; @@ -69,6 +70,18 @@ import 'rc-slider/assets/index.css'; import 'leaflet/dist/leaflet.css'; import "./assets/scss/sealog.scss?v=1.1.0"; +import icon from 'leaflet/dist/images/marker-icon.png'; +import iconShadow from 'leaflet/dist/images/marker-shadow.png'; + +let DefaultIcon = L.icon({ + iconUrl: icon, + shadowUrl: iconShadow, + conSize: [25, 41], + iconAnchor: [13, 41] +}); + +L.Marker.prototype.options.icon = DefaultIcon; + import configureStore from './store'; import history from './history'; From 571af7a59b16055afddd06218872212c4cd2d7df Mon Sep 17 00:00:00 2001 From: Webb Pinner Date: Sat, 24 Jul 2021 09:01:50 -0400 Subject: [PATCH 2/3] version increment --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b6f75b1..c70275f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sealog-client-vehicle", - "version": "2.0.8", + "version": "2.1.0", "license": "MIT", "description": "Sealog Client intended for use with vehicles deployed from research vessels such as ROVs, AUVs and HOVs", "bugs": { From c3935c126e1aad8c36e020cdc17caebe36f17a74 Mon Sep 17 00:00:00 2001 From: Webb Pinner Date: Sat, 24 Jul 2021 09:13:40 -0400 Subject: [PATCH 3/3] updated webpack config for webpack5 --- webpack.config.js.dist | 130 +++++++++++++++++------------------------ 1 file changed, 55 insertions(+), 75 deletions(-) diff --git a/webpack.config.js.dist b/webpack.config.js.dist index 64e9f6f..a807eca 100644 --- a/webpack.config.js.dist +++ b/webpack.config.js.dist @@ -1,119 +1,99 @@ const { ROOT_PATH, HEADER_TITLE } = require('./src/client_config'); +const webpack = require('webpack'); const path = require('path'); const CopyPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -const isDevelopment = process.env.NODE_ENV === 'development' +const ProvidePlugin = require('process'); module.exports = { - devtool: 'source-map', - entry: './src/index.js', output: { - filename: '[name].bundle.js', - path: path.resolve(__dirname, 'dist'), + path: path.join(__dirname, '/dist'), + filename: 'js/index.bundle.js', publicPath: ROOT_PATH }, devServer: { - contentBase: path.resolve(__dirname, 'dist'), + port: 8080, + contentBase: './dist', publicPath: ROOT_PATH, historyApiFallback: { disableDotRule: true, index: ROOT_PATH } }, - plugins: [ - new HtmlWebpackPlugin({ - title: HEADER_TITLE, - filename: 'index.html', - template: path.resolve(__dirname, 'src/assets/index.html') - }), - new CopyPlugin({ - patterns: [ - { from: path.resolve(__dirname, 'node_modules/leaflet/dist/images/'), to: 'style/images' }, - { from: path.resolve(__dirname, 'src/assets/images/'), to: 'images' }, - ] - }), - new MiniCssExtractPlugin({ - filename: isDevelopment ? 'style/[name].css' : 'style/[name].css', - chunkFilename: isDevelopment ? 'style/[id].css' : 'style/[id].css', - }) - ], + devtool: "source-map", module: { rules: [ { - test: /\.js$/, + test: /\.(js|jsx)$/, exclude: /node_modules/, use: { - loader: "babel-loader" + loader: 'babel-loader' } }, { test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'] + }, + { + test: /\.s[ac]ss$/i, use: [ + process.env.NODE_ENV !== "production" + ? "style-loader" + : MiniCssExtractPlugin.loader, { - loader: 'style-loader', + loader: "css-loader", options: { - injectType: 'linkTag', + sourceMap: true, } }, { - loader: 'file-loader', + loader: "sass-loader", options: { - outputPath: 'style', - publicPath: ROOT_PATH + 'style' + sourceMap: true } } - ] + ], }, { - test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, - use: [{ - loader: 'file-loader', - options: { - name: '[name].[ext]', - outputPath: 'style/fonts', - publicPath: ROOT_PATH + 'style/fonts' - } - }] + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + type: 'asset/resource', + generator: { + filename: 'fonts/[hash][ext][query]' + } }, { - test: /\.s(a|c)ss$/, - exclude: /\.module.(s(a|c)ss)$/, - loader: [ - isDevelopment ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, options: {publicPath: './style'}}, - 'css-loader', - { - loader: 'sass-loader', - options: { - sourceMap: isDevelopment - } - } - ] + test: /\.(png|jpg|jpeg)$/, + type: 'asset/resource', + generator: { + filename: 'images/[hash][ext]' + } }, { - test: /\.module\.s(a|c)ss$/, - loader: [ - isDevelopment ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, options: {publicPath: './style'}}, - { - loader: 'css-loader', - options: { - modules: true, - sourceMap: isDevelopment, - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: isDevelopment - } - } - ] + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + type: 'asset/resource', + generator: { + filename: 'fonts/[hash][ext][query]' + } } ] }, - node: { - Buffer: false, - process: false, - }, -}; \ No newline at end of file + plugins: [ + new webpack.ProvidePlugin({ + process: 'process/browser', + }), + new HtmlWebpackPlugin({ + title: HEADER_TITLE, + template: './src/assets/index.html', + }), + new MiniCssExtractPlugin({ + filename: "style/[name].css", + chunkFilename: "style/[id].css", + }), + new CopyPlugin({ + patterns: [ + { from: path.resolve(__dirname, 'src/assets/images/'), to: 'images' }, + ] + }), + ], +}