Блог

У меня есть проект mapbox, построенный в gatsby.
Я размещаю его на Netlify.
Он работает локально, но не в netlify.

https://unruffled-lichterman-25e46c.netlify.app/
Нажмите Исследовать.

Посмотрите на консоль вашего браузера:

 Uncaught ReferenceError: m is not defined
 

Я предполагаю, что вам не хватает переменных среды на стороне Netlify. При работе с Gatsby Netlify вам необходимо добавить ко всем переменным среды префикс GATSBY_ :

Любые переменные среды с префиксом GATSBY_ обрабатываются Gatsby и становятся доступными в браузере для доступа к JavaScript на стороне клиента. Для получения дополнительной информации посетите документы Gatsby о переменных среды.

Итак, добавьте их, а также локально и в панель управления Netlify, это будет по адресу: https://app.netlify.com/sites/YOUR_SITE_NAME/settings/deploys#environment

Не забудьте также изменить ссылки в вашем коде.

Похоже, вам нужна правильная конфигурация webpack.config.js .

Вы также можете централизованно настроить рабочий загрузчик в webpack.config.js :

 module.exports = {
    module: {
        rules: [
            {
                test: /bmapbox-gl-csp-worker.jsb/i,
                use: { loader: 'worker-loader' }
            }
        ]
    }
};
 

Для получения дополнительной информации, пожалуйста, обратитесь к документации

У меня была та же проблема, я попытался добавить конфигурацию webpack, но у меня это не сработало. В конце попробуйте добавить символ! при импорте, подобном этому:

 import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax 

и это сработало