Using of pkg to transfrom in binary

[ShintaroNippon]

HI there, thanks by the boilerplate
I'm using this package :https://github.com/zeit/pkg

and ran;

pkg app.js

[email protected]
Targets not specified. Assuming:
node10-linux-x64, node10-macos-x64, node10-win-x64

shintaro@shintaro-PC:~/Desktop/projects/github/frontend$ ./app-linux

Using "webpackDevMiddleware" config function defined in next.config.js.
[ error ] /snapshot/frontend/node_modules/next/dist/client/event-source-polyfill.js
Module not found: Can't resolve '@babel/runtime-corejs2/core-js/json/stringify' in '/snapshot/frontend/node_modules/next/dist/client'

I already remove the babelrc

can you help please or test this approach?

thanks
Carlos Vieira

[MustansirZia]

Hi @ShintaroNippon!
I also believe the issue is probably how pkg packages/runs our app as correctly pointed in your earlier issue.
I think the issue exists when your app tries to load the /app folder and builds a browser compatible version.
Theoretically, this should be fixable as we should be able to include the proper babel runtime using babelrc. I can see you've installed the @babel/runtime & @babel/runtime-corejs2 and are still facing the issue. The proper way I guess to add these runtimes is to use the @babel/plugin-transform-runtime.
Can you add this plugin in your devDependencies like this? And you probably have @babel/runtime-corejs2 so let's have all these inside .babelrc like so.

plugins: [
   [
      "@babel/plugin-transform-runtime",
     {
          "absoluteRuntime": false,
          "corejs": 2,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
      }
   ]
   // ... other babel plugins.
]

For now, we'll enable corejs-2 and default the rest, You can play around the options to this to explore more.

[ShintaroNippon]

HI there thanks by the reply,
as I said I removed babelrc and
use it in babel.config.js

module.exports = {
    overrides: [
      {
        test: '*',
        presets: [
          ['@babel/preset-env', {'node': 'current'}],
        ],
      },
  }

it is possible to use on this

plugins: [
   [
      "@babel/plugin-transform-runtime",
     {
          "absoluteRuntime": false,
          "corejs": 2,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
      }
   ]
   // ... other babel plugins.
]

how can I do it?

Thanks

[MustansirZia]

Like so.

module.exports = {
    overrides: [
      {
        test: '*',
        presets: [
          ['@babel/preset-env', {'node': 'current'}],
        ],
      },
    ],
    plugins: [
      [
          "@babel/plugin-transform-runtime",
          {
              "absoluteRuntime": false,
              "corejs": 2,
              "helpers": true,
              "regenerator": true,
              "useESModules": false,
           },
       ],
    ],
}

[ShintaroNippon]

Many thanks, I will try it...

I will give feedback.
Thanks in advance

[ShintaroNippon]

Hi there... Thanks once again but I got other error....

pkg app.js 
> [email protected]
> Targets not specified. Assuming:
  node10-linux-x64, node10-macos-x64, node10-win-x64
shintaro@shintaro-PC:~/Desktop/projects/github/frontend$ ./app-linux 
> Using "webpackDevMiddleware" config function defined in next.config.js.
[ error ] /snapshot/frontend/node_modules/next-server/dist/lib/loadable.js
Module not found: Can't resolve '@babel/runtime-corejs2/core-js/array/is-array' in '/snapshot/frontend/node_modules/next-server/dist/lib'

[MustansirZia]

Please post your babel.config.js or .babelrc and your package.json here.

[ShintaroNippon]

HI there, thanks by the help I really appreciate...

babel.config.js

 package.json

module.exports = {
  overrides: [
    {
      test: "*",
      presets: [["@babel/preset-env", { node: "current" }]]
    }
  ],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        absoluteRuntime: false,
        corejs: 2,
        helpers: true,
        regenerator: true,
        useESModules: false
      },
      "@babel/runtime-corejs2",
    ]
  ]
};

{
  "name": "next-express-bootstrap-boilerplate",
  "version": "0.1.1",
  "description": "JavaScript boilerplate for a full stack app built using React.js, Next.js, Express.js, react-bootstrap, SCSS and full SSR with eslint.",
  "main": "app.js",
  "repository": "carlos",
  "author": {
    "name": "carlos vieira",
    "email": "carlos"
  },
  "scripts": {
    "learn": "npm run build && env NODE_ENV=production node app.js",
    "build": "cd app && next build",
    "start": "npm run build && env NODE_ENV=production node app.js  -p $PORT",
    "dev": "  nodemon  --ignore app/ app.js",
    "dist": "next-pkg"
  },
  "eslintConfig": {
    "extends": "airbnb",
    "settings": {
      "import/core-modules": [
        "styled-jsx/css"
      ]
    },
    "rules": {
      "arrow-parens": "off",
      "global-require": "off",
      "indent": [
        "error",
        4
      ],
      "no-console": "off",
      "comma-dangle": "off",
      "no-underscore-dangle": "off",
      "func-names": "off",
      "no-use-before-define": "off",
      "react/jsx-indent": [
        "error",
        4
      ],
      "react/jsx-indent-props": [
        "error",
        4
      ],
      "react/jsx-filename-extension": [
        1,
        {
          "extensions": [
            ".js",
            ".jsx"
          ]
        }
      ],
      "react/react-in-jsx-scope": "off",
      "react/no-danger": "off"
    }
  },
  "dependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/helpers": "^7.3.1",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/runtime": "^7.3.4",
    "@babel/runtime-corejs2": "^7.4.5",
    "@material-ui/core": "^3.9.1",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/styles": "^3.0.0-alpha.10",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "accepts": "^1.3.5",
    "autoprefixer": "^9.3.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-react-intl": "^3.0.1",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-plugin-wrap-in-js": "^1.1.0",
    "babel-runtime": "^6.26.0",
    "body-parser": "^1.18.2",
    "classnames": "^2.2.6",
    "cookie-parser": "^1.4.3",
    "core-js": "^3.1.2",
    "downshift": "^3.2.2",
    "express": "^4.16.2",
    "formik": "^1.5.0",
    "glob": "^7.1.3",
    "i18next": "^14.0.0",
    "i18next-browser-languagedetector": "^2.2.4",
    "isomorphic-unfetch": "^3.0.0",
    "localforage": "^1.5.6",
    "morgan": "^1.9.0",
    "next": "^8.0.0",
    "next-compose-plugins": "^2.1.1",
    "next-i18next": "^0.18.2",
    "next-images": "^1.0.4",
    "next-page-transitions": "^1.0.0-alpha.4",
    "next-pkg": "^1.1.3",
    "next-redux-wrapper": "^3.0.0-alpha.0",
    "node-sass": "^4.11.0",
    "normalize.css": "^8.0.1",
    "pkg": "^4.4.0",
    "postcss-easy-import": "^3.0.0",
    "postcss-loader": "^3.0.0",
    "prop-types": "^15.6.2",
    "raw-loader": "^0.5.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-jss": "^8.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.7",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.6.0",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^7.1.0",
    "styled-components": "^4.1.3",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/types": "^7.4.4",
    "eslint": "^5.9.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "next-compose": "0.0.2",
    "nodemon": "^1.19.0"
  }
}

and

next.config.js

const compose = require("next-compose");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withImages = require("next-images");

module.exports = compose([
  withCSS,
  withSass,
  withImages
]);

[ShintaroNippon]

Hi there.. I have created a repository in order to test... please can you check ?

github.com/ShintaroNippon/next-express-bootstrap-boilerplate

run npm install -g pkg 
&& 
pkg app.js -t node10-linux-x64 -o frontend 
&& 
./frontend 

Using "webpackDevMiddleware" config function defined in next.config.js. [ error ] /snapshot/next/node_modules/next-server/dist/lib/loadable.js Module not found: Can't resolve '@babel/runtime-corejs2/core-js/array/is-array' in '/snapshot/next/node_modules/next-server/dist/lib'`

[MustansirZia]

I will try to check if I can.

[ShintaroNippon]

I really appreciate...
It's important, I hope you understand.

Many thanks
Carlos Vieira