Comments (6)
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']
}
from react-azure-maps.
@devdeer-emeissner
Can you attach your web-pack.config js and package.json?
from react-azure-maps.
@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"
}
}
from react-azure-maps.
@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.
from react-azure-maps.
@msasinowski @psrednicki Thank you for the quick response. Sadly adding the alias did not resolve my problem.
from react-azure-maps.
@msasinowski Thank you for your support!
The solution was to entirely remove the react-dom resolving from the alias section.
from react-azure-maps.
Related Issues (20)
- getting mapContext for AzureMapFeature HOT 3
- "source '[layer name]-RasterSource" not found" when using Tile Layer HOT 1
- @sangeetha321 , can you try our [`v1.0.0-beta.3` version](https://www.npmjs.com/package/react-azure-maps/v/1.0.0-beta.3)? You should be able to see consistent map style. We'll release our formal `v1.0.0` soon in case you want to use it on production site.
- Error after updating to version 1.0.0 from 0.1.4 - Cannot read properties of undefined (reading 'Map') HOT 3
- Error, after updating to version 1.0.0 from 0.1.4 - uncaught ReferenceError: _wrapNativeSuper is not defined HOT 2
- Error, after updating to version 1.0.0 from 0.1.4 - Error in azure-maps-indoor module HOT 3
- Is thre a reason for removing the dependency @testing-library/react-hooks in version 1.0.0 HOT 1
- After migrating to version 1.0.0 - Error encountered while running the test case: 'Cannot find module 'react-azure-maps' from 'src/map/Componentx.tsx'. HOT 1
- Popup content is non-interactive (react components are rendered as static markup in Popup content) HOT 6
- Animation does not work when using mapRef.setCamera with animation HOT 2
- Map not loading HOT 7
- azure map not loading in production with subscription key HOT 9
- Azure Map not loading correct in prod HOT 4
- Azure Map Popup rendering issue HOT 5
- Popup is showing bottom of the screen with latest version HOT 4
- IAzureMapLayerType and SymbolLayerOptions not found HOT 1
- Map loads in local, but does not load in azure dev environment HOT 4
- Control containers are outside of the map canvas HOT 1
- Support for JS project HOT 3
- Custom cluster HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-azure-maps.