Webpack 5 Aliases not resolving correctly - reactjs

Question

I've just updated my project from webpack 3 to 5 and now none of my imports/aliases are working anywhere.
Webpack is in the root directory.
webpack.config.js Below:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var mode = process.env.NODE_ENV || 'development';
const config = {
entry: {
main: path.resolve(__dirname, 'src/index.js'),
Dashboard: path.resolve(__dirname, 'src/shared/pages/dashboard/index.js'),
Driver: path.resolve(__dirname, 'src/shared/pages/driver/index.js'),
Drivers: path.resolve(__dirname, 'src/shared/pages/drivers/index.js'),
FAQ: path.resolve(__dirname, 'src/shared/pages/faq/index.js'),
Home: path.resolve(__dirname, 'src/shared/pages/home/index.js'),
Job: path.resolve(__dirname, 'src/shared/pages/job/index.js'),
Jobs: path.resolve(__dirname, 'src/shared/pages/jobs/index.js'),
Signin: path.resolve(__dirname, 'src/shared/pages/signin/index.js')
} ,
// performance: {
// hints: "error"
// },
output: {
filename: '[name].[contenthash].js'
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor:{
test: /[\\/]node_modules[\\/]/,
name(module){
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
}
}
}
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s(a|c)ss$/,
use: [ 'style-loader', 'css-loader','sass-loader'],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
use: 'url-loader?limit=100000'
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'bundle.scss'}
),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
})
],
resolve: {
alias: {
shared: path.resolve(__dirname, 'src/shared/'),
client: path.resolve(__dirname, 'src/client/'),
server: path.resolve(__dirname, 'src/server/'),
sass: path.resolve(__dirname, 'src/sass/')
},
extensions: ['.js', '.sass', '.scss']
},
devtool: (mode === 'development') ? 'inline-source-map' : false,
mode: mode,
devServer: {
disableHostCheck: true,
historyApiFallback: true,
inline: true,
contentBase: path.join(__dirname, "dist"),
publicPath: '/provider/',
hot: true,
proxy: {
'/api/**': {
target: 'http://localhost:3333/',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
module.exports = config;
Example Import that isn't working:
import { meFromToken } from 'shared/actions/user'
Change that fixes it:
import {meFromToken} from '../../actions/user'
What am I doing wrong? I don't want to refactor all our imports because the aliases aren't resolving properly.

Answer 1

You'd need to add the same config for tsconfig.json or jsconfig.json
Eg:
{
"compilerOptions": {
"baseUrl": ".",
"module": "commonjs",
"paths": {
"#shared/*": ["./src/shared/*"]
}
}
}