Пакет React npm: мне нужна другая конфигурация webpack для безопасности ssr? - PullRequest
Новая
       71

Пакет React npm: мне нужна другая конфигурация webpack для безопасности ssr?

0 голосов
/ 30 апреля 2020

У меня небольшой пакет npm, и сейчас я пытаюсь использовать его на сайте Gatsby. Я не эксперт по веб-пакетам, и я изо всех сил стараюсь сделать мой пакет npm ssr безопасным.

В настоящее время, если я попытаюсь gatsby build, будет выдано следующее сообщение об ошибке:

failed Building static HTML for pages - 0.829s WebpackError: ReferenceError: window is not defined

componentDidMount = () => {
  window.addEventListener( 'click', this.onClickCloseMenu, false );
}

Я добавил следующий файл в свой пакет: 

// allows us to use window server-side
const safeWindow = (typeof window === 'undefined') ? {
    addEventListener() {},
    removeEventListener() {},
  } : window;

export default safeWindow;

и импортировал объект в мой код: 

import safeWindow from './safeWindow';
...
    componentDidMount = () => {
        safeWindow.addEventListener( 'click', this.onClickCloseMenu, false );
    }

Но, к сожалению, это не помогло. Я уже использовал окно только в useEffect / componentDid (Un) Mount, но я догадался, так как это была ошибка компиляции, которую мне нужно было определить. Следующее мое предположение состоит в том, что сборка / минимизация моего пакета для публикации sh его до npm сломала это снова, но я не уверен.

Это мой конфиг веб-пакета: 

var path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/DataListInput.jsx',
    output: {
        path: path.resolve('lib'),
        filename: 'DataListInput.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /^(?!.*?\.module).*\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.module\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                }]
            }
        ]
    }
}

Любая помощь очень важна!

Найдите npm пакет здесь

ОБНОВЛЕНИЕ

Теперь я почти уверен, что у него есть что-то связанное с упаковкой веб-пакетов css вместе с javascript в минимизированном файле, что требует вызовов как окна, так и документа. Кто-нибудь испытывал нечто подобное? Как решить эту проблему?

ОБНОВЛЕНИЕ 2

Я решил проблему, удалив css. Я создал новый пакет ssr safe npm без css. Это больше похоже на обходной путь, чем на решение, поэтому мне все еще интересно, есть ли способ связать css + javascript и быть совместимым с ssr.

1 Ответ

1 голос
/ 30 апреля 2020

Изменение safeWindow из константы в функцию getSafeWindow должно исправить это.

Константа оценивается до того, как модуль может быть импортирован. В то время как версия функции будет обращаться к окну только тогда, когда оно вызывается во время выполнения. 

const getSafeWindow = () => (typeof window === 'undefined') ? {
    addEventListener() {},
    removeEventListener() {},
  } : window;
...