const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin
module.exports = {
entry: './src/index.ts',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.[hash].js'
},
devServer: {
host: '0.0.0.0',
port: 4040,
open: true,
liveReload: true,
historyApiFallback: true,
static: {
directory: path.join(__dirname, 'public')
}
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
alias: {
'@': path.resolve(__dirname, 'src')
}
},
mode: 'development',
module: {
rules: [
{
test: /\.(ts|tsx)?$/,
loader: 'ts-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
new ModuleFederationPlugin({
name: 'workspace',
filename: 'remoteEntry.js',
exposes: { },
shared: {
react: { singleton: true, eager: true },
'react-dom': { singleton: true, eager: true }
}
})
]
}
I think that is a problem with the style import line at the cropper usage component and it integration with webpack loaders:
import React, { useState } from 'react'
import { CropperRef, Cropper } from 'react-advanced-cropper'
import 'react-advanced-cropper/dist/style.css'
export default () => {
const [image] = useState(
'https://images.unsplash.com/photo-1599140849279-1014532882fe?fit=crop&w=1300&q=80'
)
const onChange = (cropper: CropperRef) => {
console.log(cropper.getCoordinates(), cropper.getCanvas())
}
return (
<Cropper
src={image}
onChange={onChange}
className={'cropper'}
/>
)
}
The styles just not works, so, the cropper not appears.
Thank you!