-1

I'm trying to set up an environment for a nuxt.js app. but I'm getting this error every time.

'NUXT_ENV_STAGE' is not recognized as an internal or external command, operable program or batch file.

What does this mean and how can I solve this problem?

package.json

{
  "name": "4u2-frontend-business",
  "version": "1.0.0",
  "description": "4u2 for business",
  "author": "fjzy-web",
  "private": true,
  "workspaces": [
    "4u2-common"
  ],
  "scripts": {
    "dev": "NUXT_ENV_STAGE=dev PORT=3100 NODE_ENV=development nodemon server/index.js --watch server",
    "build": "NUXT_ENV_STAGE=production NODE_ENV=production nuxt build",
    "start": "NUXT_ENV_STAGE=production NODE_ENV=production node server/index.js",
    "prettier": "prettier  --write \"**/*.{vue,js,jsx,json,css}\" --ignore-path .prettierignore && npm run lint",
    "generate": "NUXT_ENV_STAGE=production NODE_ENV=production nuxt generate",
    "lint": "eslint --fix --ignore-path .gitignore ./src/**/*.{vue,js}",
    "et": "node_modules/.bin/et -w -c src/assets/element-variables.scss -o ./assets/theme",
    "styleguide": "vue-styleguidist server --config styleguide.config.js",
    "styleguide:build": "vue-styleguidist build --config styleguide.config.js",
    "test:unit": "jest -c ./jest/jest.config.unit.js --watch",
    "test:e2e": "JEST_PUPPETEER_CONFIG=./jest/jest-puppeteer.config.js jest -c ./jest/jest.config.e2e.js --watch"
  },
  "dependencies": {
    "@sentry/integrations": "5.10.2",
    "@shopify/app-bridge": "^1.28.0",
    "core-js": "3",
    "vue-codemirror-lite": "1.0.4"
  },
  "devDependencies": {
    "@vue/test-utils": "1.0.0-beta.31",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "25.1.0",
    "jest": "25.1.0",
    "jest-puppeteer": "4.4.0",
    "puppeteer": "2.1.1",
    "sass-loader": "7.3.1",
    "vue-jest": "3.0.5",
    "vue-styleguidist": "3.22.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix --cache --ignore-path .gitignore --ext .js",
      "git add"
    ],
    "src/**/*.vue": [
      "eslint --fix --cache --ignore-path .gitignore --ext .vue",
      "git add"
    ]
  }
}

And my nuxt.config.js file

//  my nuxt.config.js file
/* eslint-disable global-require */
const path = require('path')
const webpack = require('webpack')
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin')
const i18n = require('./4u2-common/config/i18n')
require('dotenv').config({ path: `.env.${process.env.NUXT_ENV_STAGE}` })
const isProduction = process.env.NODE_ENV === 'production'
const resolve = (dir) => path.join(__dirname, dir)

module.exports = {
  telemetry: false,
  srcDir: 'src/',
  styleResources: {
    scss: '~/assets/css/variables.scss',
  },
  mode: 'spa',
  dir: {
    middleware: 'middleware',
  },
  head: {
    title: 'Distribute & Dropshipping Online Customization Products',
    meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
  },
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    ['nuxt-i18n', i18n],
    ['@nuxtjs/dotenv', { filename: `../.env.${process.env.NUXT_ENV_STAGE}` }],
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: process.env.GOOGLE_TAG_MANAGER_ID ? process.env.GOOGLE_TAG_MANAGER_ID : '',
    enabled: !!process.env.GOOGLE_TAG_MANAGER_ID,
  },
  env: {
    stage: 'dev',
  },
  plugins: [
    '~~/4u2-common/plugins/consoledev.js',
    '~~/4u2-common/plugins/lodash.js',
    '~/plugins/sentry.js',
    '~~/4u2-common/plugins/array-extends.js',
    '~~/4u2-common/plugins/i18n-patch.js',
    '~~/4u2-common/plugins/price-converter.js',
    '~~/4u2-common/plugins/axios/index.js',
    '~~/4u2-common/plugins/error-handler.js',
    '~~/4u2-common/plugins/dispatch.js',
    '~/plugins/init.js',
    '~~/4u2-common/plugins/route.js',
    '~~/4u2-common/plugins/foru-components.js',
    '~~/4u2-common/plugins/swiper.js',
    '~~/4u2-common/plugins/vee-validate.js',
    '~~/4u2-common/plugins/mixin-methods.js',
    '~~/4u2-common/plugins/mixin-filters.js',
    '~/plugins/auth',
    '~~/4u2-common/plugins/element-ui',
    '~/plugins/init-echarts',
    '~~/4u2-common/plugins/process',
    '~~/4u2-common/plugins/vue-waterfall',
    '~~/4u2-common/plugins/directives/directives',
    '~~/4u2-common/plugins/forudesigner.js',
  ],
  axios: {
    baseURL: process.env.API_BASE_URL + process.env.API_VERSION,
  },
  render: {
    resourceHints: false,
  },
  // 使vue-router query支持对象
  router: {
    // https://zh.nuxtjs.org/docs/2.x/features/nuxt-components/#disable-prefetching-globally
    prefetchLinks: false,
    parseQuery(q) {
      return qs.parse(q)
    },
    stringifyQuery(q) {
      q = require('~~/4u2-common/utils/helpers').clearEmpties(q)
      const r = qs.stringify(q, { arrayFormat: 'brackets' })
      return r ? '?' + r : ''
    },
  },
  /**
   * global css
   */
  css: [
    '~~/4u2-common/assets/css/foru-icon.css',
    '~~/4u2-common/assets/css/base.scss',
    '~/assets/css/foru-btn.scss',
    '~/assets/css/common.scss',
    'swiper/dist/css/swiper.css',
  ],
  /*
   ** Customize the progress bar color
   */
  loading: { color: '#3B8070' },
  /*
   ** Build configuration
   */
  build: {
    cache: true,
    parallel: true,
    optimization: {
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        maxAsyncRequests: 7,
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial',
          },
          elementUI: {
            name: 'chunk-elementUI',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
          },
          standardDesigner: {
            name: 'standard-designer',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?standard-designer(.*)/,
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      },
    },
    friendlyErrors: true,
    extractCSS: isProduction,
    filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : `${process.env.MARKETPLACE}.[name].[chunkhash].js`),
      chunk: ({ isDev }) => (isDev ? '[name].js' : `${process.env.MARKETPLACE}.[id].[chunkhash].js`),
      css: ({ isDev }) => (isDev ? '[name].css' : `${process.env.MARKETPLACE}.[name].[contenthash].css`),
      img: ({ isDev }) =>
        isDev ? '[path][name].[ext]' : `${process.env.MARKETPLACE}.img/[name].[contenthash].[ext]`,
      font: ({ isDev }) => (isDev ? '[path][name].[ext]' : `${process.env.MARKETPLACE}.fonts/[name].[ext]`),
      video: ({ isDev }) => (isDev ? '[path][name].[ext]' : `${process.env.MARKETPLACE}.videos/[name].[ext]`),
    },
    loaders: {
      imgUrl: {
        limit: isProduction ? 0.1 : 1000,
      },
      vue: {
        productionMode: isProduction,
        transformAssetUrls: {
          video: 'src',
          source: 'src',
          object: 'src',
          embed: 'src',
        },
      },
    },
    publicPath: '/assets/',
    babel: {
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false,
            targets: {
              browsers: ['> 0.1%, edge >= 14, opera >= 60, safari > 11, chrome >= 74, firefox >= 66'],
            },
            useBuiltIns: 'usage',
            corejs: 3,
          },
        ],
      ],
      plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        [
          '@babel/transform-modules-commonjs',
          {
            allowTopLevelThis: true,
          },
        ],
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk',
          },
          'element-ui',
        ],
        '@babel/transform-async-to-generator',
        '@babel/transform-runtime',
        '@babel/syntax-dynamic-import',
      ],
      comments: true,
    },
    plugins: [
      new webpack.ProvidePlugin({
        qs: 'qs',
      }),
      new FilterWarningsPlugin({
        exclude: /extract-css-chunks-webpack-plugin[^]*Conflicting order/,
      }),
    ],
    /**
     * Run ESLint on save
     * @param {object} config config
     */
    extend(config) {
      if (isProduction) {
        config.devtool = 'source-map'
      }
      // use fast-sass-loader instead of sass-loader for now
      config.module.rules = config.module.rules.map((rule) => {
        // sass-loader is only inside "oneOf" attribute
        if (!rule.oneOf) {
          return rule
        }
        const new_rule = rule
        new_rule.oneOf.map((r) => {
          if (!r.use.some((l) => l.loader === 'sass-loader')) {
            return r
          }
          const new_loaders = r
          new_loaders.use = new_loaders.use.reduce((loaderAcc, loader) => {
            if (loader.loader !== 'sass-loader') {
              return [...loaderAcc, ...[loader]]
            }

            return [
              ...loaderAcc,
              ...[
                {
                  loader: 'fast-sass-loader',
                  options: {
                    ...loader.options,
                    includePaths: [path.join(__dirname, '/')],
                  },
                },
              ],
            ]
          }, [])
          return new_loaders
        })
        return new_rule
      })
    },
  },
}
kissu
  • 40,416
  • 14
  • 65
  • 133
DHAVAL KANJARIYA
  • 31
  • 3
  • Where do you call `NUXT_ENV_STAGE`? Please give us more context. – kissu Aug 10 '21 at 12:56
  • I am calling it on my nuxt.config.js file and try to get from the package.json file for a running developments server – DHAVAL KANJARIYA Aug 10 '21 at 13:14
  • here is my package.json script "scripts": { "dev": "NUXT_ENV_STAGE=dev PORT=3100 NODE_ENV=development nodemon server/index.js --watch server", "build": "NUXT_ENV_STAGE=production NODE_ENV=production nuxt build", "start": "NUXT_ENV_STAGE=production NODE_ENV=production node server/index.js", }, – DHAVAL KANJARIYA Aug 10 '21 at 13:15
  • You're not supposed to dump the content of your `package.json` into comments. Nobody will read it. Also, if you're talking about some files, just edit your question with those files. – kissu Aug 10 '21 at 13:16
  • Context is important. And the amount of effort put into the question will be more decisive than anything else to succeed into a solution here. – kissu Aug 10 '21 at 13:17
  • Do you have any idea how can I share my env and config with you? @kissu – DHAVAL KANJARIYA Aug 10 '21 at 13:28
  • I am trying to set up env module by package,json script – DHAVAL KANJARIYA Aug 10 '21 at 13:31
  • Take your files, copy each of them and paste them in your question. Hide the sensitive info, like tokens and passwords if any. Even if you should not have any in those 2 files tbh. – kissu Aug 10 '21 at 13:32
  • Please share the whole properly indented files. Not parts of them. – kissu Aug 10 '21 at 13:40
  • Alright, I've edited your question. Now we can see what is the matter with all of this. – kissu Aug 10 '21 at 14:01
  • Hi, did my answer helped somehow? – kissu Aug 11 '21 at 08:48
  • yes, I got a reference from it but still, I am stuck with some issues. it will be fine, thanks, buddy. – DHAVAL KANJARIYA Aug 11 '21 at 11:01

1 Answers1

1

Some quick notes of things to fix in your nuxt.config.js before proceeding:

  • You have some ESlint errors, fix those at some point to prevent further issues.

  • You have an old way of importing and using packages in your nuxt.config.js file. Since Node v14, and since a lot time on the frontend now, you should rather use import.

  • As stated on the official page of nuxt/dotenv

With Nuxt v2.13 you might want to migrate from @nuxtjs/dotenv module to use the new runtime config.

So yeah, assuming that you have some kinda latest Nuxt version (and you should), you could ditch dotenv since it's already baked in.

  • You don't have any nuxt package in your package.json btw. Not sure why nor how you expect your Nuxt app to work.

  • mode: 'spa' is obsolete. As pointed in this answer, only target and ssr are valid keys as of right now. So the equivalent to mode: spa would be ssr: false.

  • Not sure what you're renaming in dir. middleware to middleware?

  • It looks like you're having some dropshipping service here looking at title: 'Distribute & Dropshipping Online Customization Products'.
    I should probably stop my answer here, but I'll continue because I'm trying to be professional here.

  • The condition here: id: process.env.GOOGLE_TAG_MANAGER_ID ? process.env.GOOGLE_TAG_MANAGER_ID : '', is pretty useless because it's already the behavior of not having a variable set.

  • enabled: !!process.env.GOOGLE_TAG_MANAGER_ID will always be true, no matter what is inside of GOOGLE_TAG_MANAGER_ID. And btw, you can only have string here, so even if you pass to it false, it will be 'false' at the end, and the result will be !!'false' >> true.

  • code like this: stage: 'dev', shows that there is some lack of understanding how to properly handle the various environments. You should not rely on hardcoded variables to set this up. But on a single .env with variables inside of it.
    NODE_ENV is usually already set for you and you can just rely on this for your env booleans (even if this should be again, rarely needed)

  • the rest of the configuration would also probably need some love (won't dive deep in the logical parts of it for obvious time reasons).

Still, to answer your initial question, you can follow the link below. Having NUXT_ENV_STAGE=dev or setting it into a .env will lead to the same results and is used the same way (aka process.env.NUXT_ENV_STAGE).

https://stackoverflow.com/a/67705541/8816585

kissu
  • 40,416
  • 14
  • 65
  • 133