Babel 7 unable to resolve node_modules relative paths

Question

I upgraded my code to use Babel 7.0 (already on webpack 4) from Babel 6. I also renamed all my JSX files to TSX - there has been no code change. This results in a lot of compilation errors where relative paths within node modules are not being resolved:

ERROR in ./node_modules/moment/locale/eo.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/eo.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

ERROR in ./node_modules/moment/locale/sq.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/sq.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

ERROR in ./node_modules/moment/locale/ss.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/ss.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

ERROR in ./node_modules/moment/locale/sv.js
Module not found: Error: Can't resolve '../moment' in '/Users/sangupta/git/adobe/asset-link/node_modules/moment/locale'
 @ ./node_modules/moment/locale/sv.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/App.tsx
 @ multi ./src/App.tsx

Almost all packages that we are using are throwing similar errors including 'react-dom', 'react-intl' and more.

Adding my webpack.config file:

module.exports = {
  
  context: __dirname,
  
  mode: 'production',
  
  entry: {
    app: [ './src/App.tsx' ],
  },

  watchOptions: {
    ignored: /node_modules/
  },

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
   
  devServer: {
    contentBase: path.join(__dirname, 'assets'),
    compress: true,
    port: 1309,
    hot: true,
    https: false,
    noInfo: false,
    historyApiFallback: true
  },
  
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },

  module: {
    rules: [
      {
        test: /\.(tsx?|es6\.jsx?)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        loader: 'babel-loader?cacheDirectory'
      },
      {
        test: /\.css$/,
        use: [ 
          {
            loader: 'style-loader'
          }
        ]
      },
      {
        test: /\.(gif|png|jpg|svg|eot|woff|woff2|ttf|mp4|cur|ico)$/,
        loader: 'file-loader'
      }
    ]
  },

  resolve: {
    // needed to not use relative paths in imports
    modules: [
      path.resolve('./src'),
      path.resolve('./node_modules')
    ],

    // extensions that are handled by webpack
    extensions: [
      '.ts', '.tsx', '*.js', '*.jsx', '.json'
    ],
    
    alias: {
      src: './src'
      // external libraries 
    }
  },

  output: {
    path: __dirname + '/dist',
    publicPath: '',
    filename: '[name].js'
  },
  
  devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',

  plugins: [

    new HtmlWebpackPlugin({ title: 'Test App', template: 'src/index.ejs', inject: 'body' }),
    new webpack.ProvidePlugin({"React": "react",}),
    new webpack.HotModuleReplacementPlugin(),
  ]

};

My .babelrc file is:

{
"presets":[
    "@babel/react",
    "@babel/typescript"
],
"plugins":[
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-modules-commonjs"
] }

Answer 1

extensions: [
  '.ts', '.tsx', '*.js', '*.jsx', '.json'
],

has extra * characters before the extensions, so Webpack will fail to find the file since there is no ../moment*.js file. Your extensions should be

extensions: [
  '.ts', '.tsx', '.js', '.jsx', '.json'
],