Open ShintaroNippon opened 5 years ago
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.
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
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,
},
],
],
}
Many thanks, I will try it...
I will give feedback. Thanks in advance
Hi there... Thanks once again but I got other error....
pkg app.js
> pkg@4.4.0
> 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'
Please post your babel.config.js
or .babelrc
and your package.json
here.
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
]);
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'`
I will try to check if I can.
I really appreciate... It's important, I hope you understand.
Many thanks Carlos Vieira
HI there, thanks by the boilerplate I'm using this package :https://github.com/zeit/pkg
and ran;
pkg app.js
shintaro@shintaro-PC:~/Desktop/projects/github/frontend$ ./app-linux
I already remove the babelrc
can you help please or test this approach?
thanks Carlos Vieira