Invalid Option: 'production' is not a valid target

[soer7022]

I just setup snowpack for one of our internal React apps, and everything has been going great so far.
However I would like to enable bundling for building the app, I've followed the steps listed on your website

Now I get the following error:

 [error] 
  [error] ./_dist_/index.js
  Module build failed (from ../node_modules/babel-loader/lib/index.js):
  Error: [BABEL] /Users/my_user/git/snowpack_project/.build/_dist_/index.js: Invalid Option: 'production' is not a valid target
          Maybe you meant to use 'electron'? (While processing: "/Users/my_user/git/snowpack_project/node_modules/@babel/preset-env/lib/index.js")
      at validateTargetNames (/Users/my_user/git/snowpack_project/node_modules/@babel/helper-compilation-targets/lib/index.js:84:13)
      at getTargets (/Users/my_user/git/snowpack_project/node_modules/@babel/helper-compilation-targets/lib/index.js:189:17)
      at /Users/my_user/git/snowpack_project/node_modules/@babel/preset-env/lib/index.js:247:57
      at /Users/my_user/git/snowpack_project/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
      at /Users/my_user/git/snowpack_project/node_modules/@babel/core/lib/config/full.js:199:14
      at Generator.next (<anonymous>)
      at Function.<anonymous> (/Users/my_user/git/snowpack_project/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
      at Generator.next (<anonymous>)
      at step (/Users/my_user/git/snowpack_project/node_modules/gensync/index.js:254:32)
      at evaluateAsync (/Users/my_user/git/snowpack_project/node_modules/gensync/index.js:284:5)
      at Function.errback (/Users/my_user/git/snowpack_project/node_modules/gensync/index.js:108:7)
      at errback (/Users/my_user/git/snowpack_project/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
      at async (/Users/my_user/git/snowpack_project/node_modules/gensync/index.js:183:31)
      at onFirstPause (/Users/my_user/git/snowpack_project/node_modules/gensync/index.js:209:13)
      at Generator.next (<anonymous>)
      at cachedFunction (/Users/my_user/git/snowpack_project/node_modules/@babel/core/lib/config/caching.js:68:46)

Any help would greatly be appreciated 😃

[FredKSchott]

No problem, happy to help. Does this issue only appear when you add the Webpack plugin?

[cammiida]

Same here. It builds fine without @snowpack/plugin-webpack, but I get the same error as above with it.
My dev dependencies:

// package.json
"devDependencies": {
        "@babel/preset-react": "^7.12.1",
        "@babel/preset-typescript": "^7.12.1",
        "@miragejs/graphql": "^0.1.8",
        "@rollup/plugin-typescript": "^8.0.0",
        "@snowpack/app-scripts-react": "^1.12.5",
        "@snowpack/plugin-dotenv": "^2.0.4",
        "@snowpack/plugin-react-refresh": "^2.3.4",
        "@snowpack/plugin-typescript": "^1.0.2",
        "@snowpack/plugin-webpack": "^2.1.3",
        "@snowpack/web-test-runner-plugin": "^0.1.3",
        "@testing-library/react": "^11.1.0",
        "@types/chai": "^4.2.14",
        "@types/react": "^16.9.55",
        "@types/react-dom": "^16.9.9",
        "@types/snowpack-env": "^2.3.0",
        "@typescript-eslint/eslint-plugin": "^3.9.0",
        "@typescript-eslint/parser": "^3.9.0",
        "@web/test-runner": "^0.9.6",
        "chai": "^4.2.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.5",
        "lint-staged": "^10.2.11",
        "postcss": "^8.1.4",
        "postcss-cli": "^8.1.0",
        "postcss-flexbugs-fixes": "^4.2.1",
        "postcss-import": "^13.0.0",
        "postcss-normalize": "^9.0.0",
        "postcss-preset-env": "^6.7.0",
        "prettier": "^2.0.5",
        "snowpack": "^2.18.2",
        "typescript": "^4.0.5"
}

[Floffah]

the error is also a bit different from the one in the original discussion

[@snowpack/plugin-webpack] Error: Webpack failed with ./media/index.js
Module build failed (from D:/projects/unfinished/cappbetter/node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\projects\unfinished\cappbetter\core\web\build\media\index.js: @babel/helper-compilation-targets: 'production' is not a valid target
- Did you mean 'electron'? (While processing: "D:\\projects\\unfinished\\cappbetter\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at validateTargetNames (D:\projects\unfinished\cappbetter\node_modules\@babel\helper-compilation-targets\lib\index.js:85:13)
    at getTargets (D:\projects\unfinished\cappbetter\node_modules\@babel\helper-compilation-targets\lib\index.js:194:17)
    at D:\projects\unfinished\cappbetter\node_modules\@babel\preset-env\lib\index.js:258:57
    at D:\projects\unfinished\cappbetter\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at D:\projects\unfinished\cappbetter\node_modules\babel-loader\node_modules\@babel\core\lib\config\full.js:211:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (D:\projects\unfinished\cappbetter\node_modules\babel-loader\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (D:\projects\unfinished\cappbetter\node_modules\gensync\index.js:261:32)
    at evaluateAsync (D:\projects\unfinished\cappbetter\node_modules\gensync\index.js:291:5)
    at Function.errback (D:\projects\unfinished\cappbetter\node_modules\gensync\index.js:113:7)
    at errback (D:\projects\unfinished\cappbetter\node_modules\babel-loader\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (D:\projects\unfinished\cappbetter\node_modules\gensync\index.js:188:31)
    at onFirstPause (D:\projects\unfinished\cappbetter\node_modules\gensync\index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (D:\projects\unfinished\cappbetter\node_modules\babel-loader\node_modules\@babel\core\lib\config\caching.js:68:46) error(s).

[FredKSchott]

oh! so the issue isn't webpack, but babel. That's interesting, since I don't see us passing anything like the "production" string to babel-loader:

{
              test: /\.js$/,
              exclude: /node_modules/,
              use: [
                {
                  loader: require.resolve('babel-loader'),
                  options: {
                    cwd: buildDirectory,
                    configFile: false,
                    babelrc: false,
                    compact: true,
                    presets: [
                      [
                        require.resolve('@babel/preset-env'),
                        {
                          targets: presetEnvTargets,
                          bugfixes: true,
                          modules: false,
                          useBuiltIns: 'usage',
                          corejs: 3,
                        },
                      ],
                    ],
                  },
                },
                {
                  loader: require.resolve('./plugins/import-meta-fix.js'),
                },
                {
                  loader: require.resolve('./plugins/proxy-import-resolve.js'),
                },
              ],
            },

[Floffah]

so i figured out it has to do with the browserslist that snowpack takes from the project's package.json file and the "production did you mean electron" thing is because a lot of people (i cant remember if its in the snowpack docs or not) have their browserslist as two arrays for production and development instead of just an array so when i changed it to be just an array not an object it works fine.
maybe a solution could be passing either the array or just the production array not the whole object depending on the context? @FredKSchott

i could quickly make a pr now if you want

for context i changed

{
  "browserslist": {
    "production": [
      "defaults",
      "not IE 11",
      "not IE_Mob 11",
      "maintained node versions",
      ">0.2%",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

to just

{
    "browserslist": [
      "defaults",
      "not IE 11",
      "not IE_Mob 11",
      "maintained node versions",
      ">0.2%",
      "not dead"
    ],
}

in my package.json and it worked

[FredKSchott]

Nice! Yup, we're definitely not handling that. Would love if you could submit a PR to add this support! Something like:

const presetEnvTargets =
        tempBuildManifest.browserslist?.production || tempBuildManifest.browserslist || '>0.75%, not ie 11, not UCAndroid >0, not OperaMini all';

Although unfortunately Node doesn't support ?. natively yet, so you may want to just move that logic into a getPresetEnvTargets(manifest) helper function.