Babel 7 не может разрешить относительные пути node_modules

Я обновил свой код, чтобы использовать Babel 7.0 (уже в webpack 4) из Babel 6. Я также переименовал все свои JSX-файлы в TSX - никаких изменений кода не произошло. Это приводит к множеству ошибок компиляции, когда относительные пути в модулях узлов не разрешаются:

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

Почти все используемые нами пакеты выдают похожие ошибки, включая «react-dom», «react-intl» и другие.

Добавление моего файла webpack.config:

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(),
  ]

};

Мой файл .babelrc:

{
"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"
] }

Это больше похоже на то, что вы неправильно сконфигурировали что-то в своей конфигурации Webpack. Вы можете это включить?

loganfsmyth 19.09.2018 03:13

@loganfsmyth Я только что добавил свой файл webpack.config.

sangupta 19.09.2018 03:22

У вас есть репо, которое может воспроизвести проблему?

Adam 19.09.2018 19:59

Привет @Adam - к сожалению, еще не было времени воссоздать в меньшем репо - пробую сегодня в приложении hello-world

sangupta 20.09.2018 00:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
1 399
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
extensions: [
  '.ts', '.tsx', '*.js', '*.jsx', '.json'
],

перед расширениями есть дополнительные символы *, поэтому Webpack не сможет найти файл, поскольку файла ../moment*.js нет. Ваш extensions должен быть

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

Другие вопросы по теме