Значения dotenv не загружены в nextjs
Я изо всех сил пытаюсь загрузить .env
файл в моем приложении NextJS. Вот мой код:
мой .env
в корне /
мой index.js
в /pages/index.js
Вот мой index.js
:
require("dotenv").config({ path: __dirname + '/../.env' })
import React, {Component} from 'react'
import Layout from '../components/layout'
import axios from 'axios'
class Import extends Component{
uploadCSV = (evt) => {
evt.preventDefault();
const uploadURL = process.env.MY_UPLOAD_URL
let data = new FormData(evt.target)
axios.post(uploadURL, data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res) => {
console.log(res)
})
}
render() {
return (
<div>
<Layout title="Import Chatbot Intents" description="Import Chatbot Intents">
<form onSubmit={this.uploadCSV} name="import_csv" className="import_csv">
<h2>Import CSV</h2>
<div className="form-group">
<label htmlFor="csv_file">Upload file here: </label>
<input type="file" name="csv_file" id="csv_file" ref="csv_file" />
</div>
<div className="form-group">
<input type="hidden" id="customer_id" name="customer_id" ref="customer_id" value="1"/>
<button className="btn btn-success">Submit</button>
</div>
</form>
</Layout>
</div>
)
}
}
export default Import
Я наблюдаю, что я могу распечатать .env
содержание в render()
функция, но я не могу сделать это в uploadCSV
функция.
Для вашей информации:
- используя только
require("dotenv").config()
не работает - с помощью
require("dotenv").config({path: "../"})
не работает
обновленный
мой env-config.js
:
module.exports = {
'CSV_UPLOAD_URL': "http://localhost:3000/uploadcsv"
}
Мой babel.config.js:
const env = require('./env-config')
console.log(env)
module.exports = function(api){
// console.log({"process": process.env})
api.cache(false)
const presets = [
"next/babel",
"@zeit/next-typescript/babel"
]
const plugins = [
"@babel/plugin-transform-runtime",
[
'transform-define',
env
]
]
return { presets, plugins }
}
мой package.json
{
"name": "Botadmin",
"scripts": {
"dev": "next -p 3001",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@babel/runtime": "^7.1.5",
"@zeit/next-less": "^1.0.1",
"@zeit/next-typescript": "^1.1.1",
"@zeit/next-workers": "^1.0.0",
"axios": "^0.18.0",
"forever": "^0.15.3",
"less": "^3.8.1",
"multer": "^1.4.1",
"next": "7.0.2",
"nprogress": "^0.2.0",
"papaparse": "^4.6.2",
"react": "16.6.3",
"react-dom": "16.6.3",
"typescript": "^3.1.6",
"worker-loader": "^2.0.0"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.1.0",
"babel-plugin-transform-define": "^1.3.0",
"dotenv": "^6.1.0",
"fork-ts-checker-webpack-plugin": "^0.4.15"
}
}
Ошибка:
Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: Property property of MemberExpression expected node to be of a type ["Identifier","PrivateName"] but instead got "StringLiteral"
5 ответов
Если вы хотите использовать env в Nextjs
- устанавливать
babel-plugin-transform-define
создайте файл env-config.js и определите свои переменные
const prod = process.env.NODE_ENV === 'production' module.exports = { 'process.env.BACKEND_URL': prod ? 'https://api.example.com' : 'https://localhost:8080' }
Создайте файл.babelrc.js
const env = require('./env-config.js') module.exports = { presets: ['next/babel'], plugins: [['transform-define', env]] }
Теперь у вас есть доступ к env в вашем коде
process.env.BACKEND_URL
Альтернативы: следующий env
Начиная с Next.js 9.4 существует встроенное решение для установки переменных среды https://nextjs.org/docs/basic-features/environment-variables
Спасибо за @Alex за ответ. Еще один способ решить эту проблему - установить dotenv-webpack
с помощью npm install -D dotenv-webpack
,
После установки. редактировать next.config.js
:
require('dotenv').config()
const Dotenv = require('dotenv-webpack')
const path = require('path')
const withTypescript = require('@zeit/next-typescript')
const withWorkers = require('@zeit/next-workers')
const withLess = require('@zeit/next-less')
module.exports = withWorkers(withLess(withTypescript({
context: __dirname,
generateEtags: false,
entry: './pages/index.js',
distDir: 'build',
pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
cssModules: false,
webpack: (config, options) => {
config.plugins = config.plugins || []
config.plugins = [
...config.plugins,
// Read the .env file
new Dotenv({
path: path.join(__dirname, '.env'),
systemvars: true
})
]
// Fixes npm packages that depend on `fs` module
config.node = {
fs: 'empty'
}
return config
}
})))
Я знаю, что немного опоздал, но вы можете просто установить dotenv и использовать его внутри вашего файла next.config.js.
require("dotenv").config();
const environment = process.env.NODE_ENV || "dev";
если вам нужно реплицировать загрузку env next.js в другие файлы (setupTests.ts, next-logger.config.js), сделайте следующее:
const { loadEnvConfig } = require('@next/env')
loadEnvConfig(__dirname, true, {
info: () => null,
error: console.error,
})