Я нашел множество сообщений об ошибке Webpack:
Uncaught ReferenceError: process is not defined
, большинство из которых предлагают добавить плагин к webpack.config.js:
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
// ...
]
, однако это не похоже насделать трюк в моем случае.
Чтобы упростить задачу, я создал репо с минимальным значением для настройки SemanticUI-React с Webpack, который должен быть простым для навигации.Мой конфиг в webpack.config.js в значительной степени вдохновлен этим недавним уроком , который, похоже, содержит много положительных комментариев.
Чтобы воспроизвести ошибку, просто клонируйте репо на вашем компьютере (я используюyarn, но это должно работать и с npm):
git clone https://github.com/sheljohn/minimal-semantic-react
cd minimal-semantic-react/
yarn install
yarn run serve
, который открывается в localhost:3000, и ошибка может быть замечена в консоли разработчика.
Насколько далеконасколько я понимаю, кажется, что когда React загружается, он пытается определить, установлен ли режим производства или разработки, используя переменную process.env.NODE_ENV, которая не определена в браузере.
Это может быть связано сПоле target в конфигурации Webpack (по умолчанию установлено web);но поскольку React загружается из CDN, до пакета, я думаю, он не знает о том, что делает WebPack, что вызывает у меня недоумение, почему добавление плагина в конфигурацию может изменить что-либо ...
Отсюда мой вопрос: Можно ли использовать semantic-ui-реагировать, объявляя большие библиотеки (React, ReactDOM, semantic) внешними? Все работает нормально, если я связываю их, но пакет заканчивается вокруг4 МБ, что довольно много.
Дополнительные сведения
Ошибка, видимая в Chrome (OSX High Sierra, v66.0.3359.181, консоль разработчика):
react.development.js:14 Uncaught ReferenceError: process is not defined
at react.development.js:14
(anonymous) @ react.development.js:14
и фрагмент кода в строке 14:
if (process.env.NODE_ENV !== "production") {
Файл webpack.config.js
const path = require("path");
const webpack = require("webpack");
const publicFolder = path.resolve(__dirname, "public");
module.exports = {
entry: "./src/index.jsx",
target: "web",
output: {
path: publicFolder,
filename: "bundle.js"
},
devServer: {
contentBase: publicFolder,
port: 3000
},
externals: {
'jquery': 'jQuery',
'lodash': '_',
'react': 'React',
'react-dom': 'ReactDOM',
'semantic-ui-react': 'semantic-ui-react'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
new webpack.HotModuleReplacementPlugin()
]
};
Файл .babelrc
{
"presets": ["env", "react"]
}