Абсолютный импорт в ReactJS

#javascript #reactjs #babeljs

#javascript #reactjs #babeljs

Вопрос:

Недавно я создал приложение ReactJS, однако я не могу заставить работать распознаватель модулей babel. Я не запускал проект, используя CRA, а инициализацию npm.

Ошибка, которую я получаю, это

 Module not found: Error: Can't resolve '@src/components/Component' in '/Users/path/to/app/src' 

Это мой файл babel.config ts:

 module.exports = {
    presets: ['@babel/preset-env', '@babel/react'],
    plugins: [
        [
            'module-resolver',
            {
                extensions: ['.ts', '.tsx', '.js'],
                root: ['.'],
                alias: {
                    '@src': './src',
                }
            }
        ]
    ]
}; 

В моем tsconfig.json я также добавил следующие строки:

   "paths": {
    "@src/*": ["./src/*"]
  },
  "include": ["src"] 

И это версия решателя модуля babel из моего package.json dev dependencies:

     "babel-plugin-module-resolver": "^4.1.0", 

Кто-нибудь знает, как решить эту проблему?

Ответ №1:

Если у кого-то возникают подобные проблемы, мне удалось заставить его работать, используя webpack для абсолютного импорта, и я отказался от babel-module-resolver.

Я только что добавил следующее в свой webpack.config.ts:

     resolve: {
            extensions: ['.ts', '.tsx', '.js'],
            alias: {
                '@src': path.resolve(__dirname, 'src/'),
            }
    }
 

И другая часть из моего tsconfig, которую я опубликовал выше.