根目录外的 webpack /src

Question

I'm trying to specify a webpack entry point that's not located underneath my react project's root directory. Essentially I want to move my whole /src directory somewhere else so it can be shared. Here's my directory structure & webpack config:

monorepo/
|-- webpack-project/
|-- |-- package.json
|-- |-- webpack.config.json
|-- |-- old-src/
|-- |-- |-- index.js
|-- other-project
|-- |-- src/
|-- |-- |-- index.js

module.exports = {
    entry: {
        app: `${__dirname}/../other-project/src/index.js`
    },
    output: {
        path: path.resolve(`${__dirname}/wwwroot`),
        publicPath: '/',
        filename: '[name].js',
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
        ],
    },
}

When I specify ${__dirname}/old-src/index.js , my project builds fine. When I specify the path to the other-project/src it has issues. The error I'm getting from the babel loader is at the first line of JSX in the entry file: Support for the experimental syntax 'jsx' isn't currently enabled .

Does anyone know if what I'm trying to do is even possible, or if I should take a different approach?

Answer 1

Add path as dev dependency and use it:

const path = require('path');
...
app: path.join(__dirname, '../other-project/src/index.js'),

Answer 2

Fixed by making 2 changes:

The first major one, I renamed by .babelrc to babel.config.js. More about why this fixes an issue here .

I also added resolve.modules config to add the webpack-project's node_modules.

  ...

  resolve: {
      modules: [ path.resolve(__dirname, 'node_modules') ],
  },

  ...