React - экспорт из корневого файла app.js не работает

Если мой проект выглядит так:

/app.js <--- specified as the application entry point in webpack.config.js /test.js /components/aComponent.js

а app.js содержит это:

export const aString = "hello"; require('./components/aComponent.js');

а test.js содержит это:

export const bString = "wassup";

а /components/aComponent.js содержит это:

import { aString } from '../app'; import { bString } from '../test'; console.info("a string: " + aString); console.info("b string: " + bString);

Результатом будет:

a string: undefined b string: 'wassup'

Таким образом, любой файл, будь то в подкаталоге или рядом с app.js, не может получить доступ к экспорту. Как обычно, ошибок компиляции из webpack не возникает, если я сделаю опечатку в имени файла импорта, экспорт всегда будет возвращать undefined.

Все остальные компоненты, действия, редукторы, селекторы и утилиты в моем проекте экспортируются / импортируются, как ожидалось, и я пробовал как './../app', так и '../app' в пути, но еще раз , ошибок компиляции нет, поэтому я не думаю, что это проблема.

Я предполагаю, что это как-то связано с циклическими зависимостями. Это определенно не очень хорошая практика, и вам следует по возможности переместить свои константы из app.js. app.js импортирует ./components/aComponent.js, который импортирует test.js, который импортирует app.js, который импортирует ./components/aComponent.js ... Я не на 100% уверен, является ли это причиной, но в идеале ваша точка входа должна импортировать все зависимости, необходимые для вашего пакета, и никакие файлы js не должны зависеть от этого. Переместите константы в файл constants.js или что-то в этом роде и импортируйте его туда, где нужны константы.

Jake Miller 14.06.2018 03:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
153
1

Ответы 1

Благодаря Джейку Миллеру - мне удалось обнаружить циклическую зависимость в моем коде. Мне удалось переместить константы из файла app.js и решить проблему. Благодарю.

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