I assume webpack loaders don't apply to files resolved through the alias. Have someone faced with such an issue? Or could someone refute this assumption?
Full context:
I develop my own npm package my-package. Also, I have a test-project using this my-package. For improving development experience I want to create a separate webpack config which would replace my-package from node_modules with local package src files.
It works but I got next error in one of my-package files:
Support for the experimental syntax 'classProperties' isn't currently enabled (35:20):
33 |
34 | class AddressForm extends PureComponent {
> 35 | static propTypes = {
| ^
36 | // eslint-disable-next-line react/require-default-props
37 | onSubmit: (props, propName) => {
38 | if (
Add @babel/plugin-proposal-class-properties
I have @babel/plugin-proposal-class-properties in my .babelrc file and I use class properties in test-project files.
Here is my webpack config:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: {
'integration-test-page': './src/integration-test-page/index.jsx',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './src/integration-test-page/index.html',
filename: './index.html',
}),
],
resolve: {
alias: {
'my-package': path.resolve(
__dirname,
'../my-package/src/index.js'
),
},
extensions: ['.js', '.jsx'],
},
};