Problem when using Webpack with react-azure-maps

[devdeer-emeissner]

Hi, i'm trying to use react-azure-maps in one of my projects but i'm having difficulties with Webpack not being able to bundle my project.

I'm getting this error during the bundle process:
ModuleNotFoundError: Module not found: Error: Can't resolve 'react-dom/server' in 'C:\Dev\oak\Ui\Ui.WebApp\ClientApp\node_modules\react-azure-maps\dist'

I'm hoping this is the right place for these kinds of issues and any help is greatly appreciated.

[msasinowski]

@devdeer-emeissner
Can you attach your web-pack.config js and package.json?

[devdeer-emeissner]

@msasinowski Thank you for your quick response, here are the files

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

const TerserPlugin = require('terser-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const outputPath = path.join(__dirname, 'dist');
const commonPath = path.resolve(__dirname, '../../Ui.Common/Scripts');

const isProduction = process.argv.includes('-p');

// Configuration for client-side bundle suitable for running in browsers
module.exports = () => {
    /**
     * This log output is important for AspDotNet to recognize that the server is running.
     * https://github.com/dotnet/aspnetcore/blob/master/src/Middleware/SpaServices.Extensions/src/ReactDevelopmentServer/ReactDevelopmentServerMiddleware.cs#L98
     **/
    if (!isProduction) {
        console.log('Starting the development server');
    }
    return {
        // exit bundling on first error
        bail: true,
        entry: { main: './BootClient.tsx' },
        // NOTE: Combination of the redux stores does not work if mode is set to 'development'.
        mode: 'production',
        module: {
            rules: [
                {
                    // transpile typescript to javascript
                    test: /\.tsx?$/,
                    include: [__dirname, commonPath],
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                },
                {
                    // scss loader
                    test: /\.s?css$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: { sourceMap: !isProduction }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: !isProduction,
                                includePaths: [path.resolve(__dirname, 'Styles'), path.resolve(commonPath, 'Styles')]
                            }
                        }
                    ]
                },
                {
                    // image and font file loader
                    test: /\.(png|svg|jpg|gif|ico|woff|woff2|eot|ttf|otf)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                // if files are 20kb or smaller, transform to base64-string
                                limit: 20480,
                                // else, just reference the file
                                fallback: {
                                    loader: 'file-loader',
                                    options: {
                                        name: '[name].[ext]',
                                        publicPath: './dist/'
                                    }
                                }
                            }
                        }
                    ]
                }
            ]
        },
        devServer: {
            contentBase: './dist',
            port: process.env.PORT,
            hot: true,
            transportMode: 'ws',
            host: '127.0.0.1'
        },
        optimization: {
            minimizer: [
                new TerserPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: !isProduction
                })
            ],
            minimize: isProduction,
            // don't emit anything faulty
            noEmitOnErrors: true,
            // split out a chunk that is needed to runtime
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    material: {
                        name: 'material_bundle',
                        test: (module) => {
                            if (!module.resource) {
                                return false;
                            }
                            const materials = [`@material-ui${path.sep}core`, `@material-ui${path.sep}icons`];
                            return materials.some((material) => module.resource.includes(`${path.sep}${material}${path.sep}`));
                        }
                    },
                    react: {
                        name: 'react_bundle',
                        test: (module) => {
                            if (!module.resource) {
                                return false;
                            }
                            const reacts = [
                                'connected-react-router',
                                'prop-types',
                                'react',
                                'react-dom',
                                'react-i18next',
                                'react-jss',
                                'react-jsx-highcharts',
                                'react-redux',
                                'react-router',
                                'react-router-dom',
                                'react-table',
                                'react-textfit',
                                'redbox-react'
                            ];
                            return reacts.some((react) => module.resource.includes(`${path.sep}${react}${path.sep}`));
                        }
                    },
                    vendor: {
                        name: 'vendor_bundle',
                        test: (module) => {
                            if (!module.resource) {
                                return false;
                            }
                            const vendors = [
                                `@aspnet${path.sep}signalr`,
                                `@aspnet${path.sep}signalr-protocol-msgpack`,
                                `@fortawesome${path.sep}fontawesome-svg-core`,
                                `@fortawesome${path.sep}free-solid-svg-icons`,
                                `@fortawesome${path.sep}react-fontawesome`,
                                `@stripe${path.sep}react-stripe-js`,
                                `@stripe${path.sep}stripe-js`,
                                'classnames',
                                'email-validator',
                                'react-azure-maps',
                                'highcharts',
                                'history',
                                'i18next',
                                'i18next-xhr-backend',
                                'jss',
                                'query-string',
                                'redux',
                                'tslib'
                            ];
                            return vendors.some((vendor) => module.resource.includes(`${path.sep}${vendor}${path.sep}`));
                        }
                    }
                }
            }
        },
        output: {
            // output to specified folder and include a content hash for correct caching behavior
            // ContentHash and HMR cannot be used together.
            filename: isProduction ? '[name].[hash].js' : '[name].js',
            publicPath: '/dist/',
            path: outputPath
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new CleanWebpackPlugin(),
            new webpack.SourceMapDevToolPlugin({
                exclude: ['material.dll.js', 'react', 'vendors.dll.js'],
                // Point sourcemap entries to the original file locations on disk
                moduleFilenameTemplate: path.relative(outputPath, '[resourcePath]')
            }),
            // check the scss code style
            new StyleLintPlugin()
        ],
        resolve: {
            alias: {
                '@app': __dirname,
                'project.placeholder.ui.common': commonPath,
                // force the common project to resolve these dependencies from this project
                // there can only be one react instance per app!
                react: require.resolve('react'),
                'react-dom': require.resolve('react-dom'),
                // single instance for size optimization
                '@material-ui/core': path.join(__dirname, 'node_modules', '@material-ui', 'core')
            },
            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss', '.css'],
            modules: ['node_modules']
        }
    };
};

package.json:

{
  "name": "project",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "yarn install && webpack --colors --display-error-details",
    "build-common": "yarn --cwd ../../Ui.Common/Scripts run build",
    "build-common-production": "yarn --cwd ../../Ui.Common/Scripts run gulp-production",
    "build-production": "yarn run build-common-production && yarn install && webpack -p --colors --display-error-details",
    "development": "yarn run build-common && yarn run build && webpack-dev-server",
    "fix": "eslint --fix --color . --ext tsx,ts,jsx,js,json",
    "lint": "eslint --color . --ext tsx,ts,jsx,js,json",
    "start": "cd .. && dotnet watch run --launch-profile UiLocalApiDev",
    "start-local": "cd .. && dotnet watch run --launch-profile AllLocal"
  },
  "dependencies": {
    "@aspnet/signalr": "^1.1.4",
    "@aspnet/signalr-protocol-msgpack": "^1.1.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.5",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "@stripe/react-stripe-js": "^1.1.1",
    "@stripe/stripe-js": "^1.3.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.5.2",
    "email-validator": "^2.0.4",
    "highcharts": "^7.1.3",
    "history": "^4.9.0",
    "i18next": "^15.1.0",
    "i18next-xhr-backend": "^2.0.1",
    "immutable": "3.8.1",
    "jss": "^9.8.7",
    "prop-types": "^15.7.2",
    "query-string": "^6.11.0",
    "react": "^16.13.1",
    "react-azure-maps": "^0.1.3",
    "react-dom": "^16.13.1",
    "react-i18next": "^9.0.10",
    "react-jss": "^8.6.1",
    "react-jsx-highcharts": "^3.6.1",
    "react-redux": "6.0.1",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-table": "^6.10.0",
    "react-textfit": "^1.1.0",
    "redbox-react": "^1.6.0",
    "redux": "^4.0.4",
    "seamless-immutable": "7.1.3",
    "tslib": "^1.10.0"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.9",
    "@types/highcharts": "^5.0.44",
    "@types/history": "^4.7.2",
    "@types/node": "^12.7.2",
    "@types/prop-types": "^15.7.1",
    "@types/query-string": "^6.3.0",
    "@types/react": "^16.9.5",
    "@types/react-dom": "^16.9.5",
    "@types/react-jss": "^8.6.4",
    "@types/react-redux": "^7.1.2",
    "@types/react-router": "^5.0.3",
    "@types/react-router-dom": "^4.3.4",
    "@types/react-table": "^6.8.5",
    "@types/webpack": "^4.32.1",
    "@types/webpack-env": "^1.14.0",
    "@typescript-eslint/eslint-plugin": "^2.20.0",
    "@typescript-eslint/parser": "^2.20.0",
    "assets-webpack-plugin": "^3.9.10",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "cross-env": "^5.2.0",
    "css-loader": "^3.2.0",
    "eslint": "^6.1.0",
    "eslint-config-adjunct": "^3.0.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-webpack": "^0.12.1",
    "eslint-plugin-array-func": "^3.1.3",
    "eslint-plugin-eslint-comments": "^3.1.2",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsdoc": "^21.0.0",
    "eslint-plugin-json-format": "^2.0.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-markdown": "^1.0.1",
    "eslint-plugin-no-constructor-bind": "^1.2.7",
    "eslint-plugin-no-secrets": "^0.3.4",
    "eslint-plugin-no-use-extend-native": "^0.4.1",
    "eslint-plugin-only-error": "^1.0.2",
    "eslint-plugin-optimize-regex": "^1.1.7",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "eslint-plugin-simple-import-sort": "^5.0.1",
    "eslint-plugin-sonarjs": "^0.5.0",
    "eslint-plugin-switch-case": "^1.1.2",
    "eslint-plugin-unicorn": "^16.1.1",
    "file-loader": "^4.2.0",
    "html-typings": "^1.1.2",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.2.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.0.0",
    "stylelint": "^13.3.3",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-webpack-plugin": "^2.0.0",
    "terser-webpack-plugin": "^1.4.1",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "typescript-tslint-plugin": "^0.5.4",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.10.3",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-manifest-plugin": "^2.0.4"
  },
  "resolutions": {
    "@material-ui/core": "^3.9.3",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0"
  }
}

[msasinowski]

This is more the .net Core web-pack configuration problem. I will first try to add this to the aliases.

    resolve: {
            alias: {
                '@app': __dirname,
                'project.placeholder.ui.common': commonPath,
                // force the common project to resolve these dependencies from this project
                // there can only be one react instance per app!
                react: require.resolve('react'),
                'react-dom': require.resolve('react-dom'),
                'react-dom/server': require.resolve('react-dom/server'),
                // single instance for size optimization
                '@material-ui/core': path.join(__dirname, 'node_modules', '@material-ui', 'core')
            },
            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss', '.css'],
            modules: ['node_modules']
        }

[psrednicki]

@devdeer-emeissner
Please let us known is that resolve your problem.
Anyway this issue is not related to ours lib - its .net core webpack configuration.

[devdeer-emeissner]

@msasinowski @psrednicki Thank you for the quick response. Sadly adding the alias did not resolve my problem.

[devdeer-jens]

@msasinowski Thank you for your support!
The solution was to entirely remove the react-dom resolving from the alias section.