Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

Neutrino won't build in production environment #1504

Closed
AliHammami opened this issue Dec 13, 2019 · 9 comments
Closed

Neutrino won't build in production environment #1504

AliHammami opened this issue Dec 13, 2019 · 9 comments

Comments

@AliHammami
Copy link

Hello,

I'm trying to build in production environment but I have this error :
`<--- Last few GCs --->

[12141:0x3ea4060] 304886 ms: Scavenge 1896.0 (2065.1) -> 1881.3 (2065.6) MB, 17.1 / 0.0 ms (average mu = 0.283, current mu = 0.314) allocation failure
[12141:0x3ea4060] 305063 ms: Scavenge 1896.5 (2065.6) -> 1882.4 (2066.6) MB, 19.5 / 0.0 ms (average mu = 0.283, current mu = 0.314) allocation failure
[12141:0x3ea4060] 305266 ms: Scavenge 1897.2 (2066.6) -> 1883.4 (2067.6) MB, 18.9 / 0.0 ms (average mu = 0.283, current mu = 0.314) allocation failure

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 0x1374fd9]

Security context: 0x2d8b285408a1
1: /* anonymous */ [0x2497867af89] [/var/www/html/whire/whire-client/node_modules/babel-traverse/lib/index.js:~94] [pc=0xf8abea5b812](this=0x3f8e3ab1b299 <JSFunction traverse (sfi = 0x186b46c72a89)>,0x15048d5da901 ,0x1801c9dc0cc1 ,0x189fe8e5add1 ,0x285b9c8c04a9 ,0...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20191213.152251.12141.0.001.json
Node.js report completed
1: 0x9da7c0 node::Abort() [/usr/local/bin/node]
2: 0x9db976 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: 0xb39f1e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
4: 0xb3a299 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0xce5635 [/usr/local/bin/node]
6: 0xce5cc6 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
7: 0xcf1b5a v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
8: 0xcf2a65 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0xcf5478 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0xcbbda7 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [/usr/local/bin/node]
11: 0xff1e0b v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x1374fd9 [/usr/local/bin/node]
Aborted
`
Everything works fine in staging and development environment but in production environment it won't build.

Here's my package.json:

{
  "name": "neutrino",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "increase-memory-limit && neutrino build --options.env.NODE_ENV production && touch build/_redirects | echo  '/* /index.html 200' >> build/_redirects ",
    "stage": "neutrino build --options.env.NODE_ENV staging && touch build/_redirects | echo  '/* /index.html 200' >> build/_redirects ",
    "prod": "npm run build:lambda",
    "start:lambda": "netlify-lambda serve functions",
    "dev": "NODE_ENV=development neutrino start",
    "lint": "neutrino lint",
    "test": "neutrino test"
  },
  "dependencies": {
    "@neutrinojs/babel-minify": "^8.3.0",
    "@neutrinojs/env": "^8.3.0",
    "@sendgrid/mail": "^6.4.0",
    "@zendeskgarden/react-buttons": "^3.6.8",
    "@zendeskgarden/react-chrome": "^4.2.10",
    "@zendeskgarden/react-menus": "^4.0.4",
    "@zendeskgarden/react-modals": "^5.3.16",
    "@zendeskgarden/react-notifications": "^3.1.16",
    "@zendeskgarden/react-theming": "^3.1.3",
    "@zendeskgarden/svg-icons": "^4.4.5",
    "antd": "^3.20.0",
    "apollo-cache-inmemory": "^1.2.10",
    "apollo-cache-persist": "^0.1.1",
    "apollo-client": "^2.4.2",
    "apollo-link": "^1.2.3",
    "apollo-link-error": "^1.1.1",
    "apollo-link-http": "^1.5.5",
    "apollo-link-ws": "^1.0.9",
    "apollo-utilities": "^1.0.21",
    "autoprefixer": "^9.1.5",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.6",
    "date-input-polyfill-react": "^2.14.4",
    "dotenv": "^8.1.0",
    "draft-js": "^0.10.5",
    "draft-js-mention-plugin": "^3.1.3",
    "draft-js-plugins-editor": "^2.1.1",
    "draftail": "^1.0.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "formik": "^1.3.0",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.10.1",
    "immutable": "3.7.6",
    "isomorphic-unfetch": "^3.0.0",
    "netlify-cli": "^2.11.19",
    "netlify-lambda": "^1.6.3",
    "prop-types": "^15.6.2",
    "rc-drawer": "^1.7.6",
    "rc-form": "^2.2.3",
    "react": "^16.10.0",
    "react-apollo": "^2.1.11",
    "react-apollo-hooks": "^0.5.0",
    "react-cookie-consent": "^2.5.0",
    "react-dom": "^16.5.1",
    "react-flexbox-grid": "^2.1.2",
    "react-flip-move": "^3.0.3",
    "react-google-recaptcha": "^1.0.2",
    "react-hot-loader": "^4.3.8",
    "react-images": "^0.5.19",
    "react-instantsearch": "^5.3.1",
    "react-instantsearch-dom": "^5.7.0",
    "react-joyride": "^2.0.5",
    "react-measure": "^2.1.2",
    "react-meta-tags": "^0.7.4",
    "react-modal": "^3.5.1",
    "react-player": "^1.6.6",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^3.0.5",
    "react-ui-avatars": "^3.0.2",
    "recompose": "^0.30.0",
    "redraft": "^0.10.2",
    "slugify": "^1.3.5",
    "styled-components": "^3.4.9",
    "subscriptions-transport-ws": "^0.9.15",
    "unfetch": "^4.1.0",
    "uploadcare-widget": "^3.6.1",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "@neutrinojs/airbnb": "^8.3.0",
    "@neutrinojs/jest": "^8.3.0",
    "@neutrinojs/react": "^8.3.0",
    "flow-bin": "^0.106.3",
    "neutrino": "^8.3.0",
    "neutrino-middleware-less-loader": "^4.0.0",
    "neutrino-middleware-sass": "^0.0.1"
  }
}

Do you know where the problem might come from ? Thank you

Bug or issue?

Please try to answer the following questions:

  • What version of Neutrino are you using? "^8.3.0"
  • Are you using the Yarn client or the npm client? What version? Yarn 1.17.3
  • What version of Node.js are you using? v12.13.1
  • What operating system are you using? Ubuntu and windows
  • What did you do? yarn build in production environment
  • What did you expect to happen? to build
  • What actually happened, contrary to your expectations? I had a FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory.

@edmorley
Copy link
Member

Hi! Sorry to hear you've been encountering errors. I suspect this might be fixed in the Neutrino 9 release, which is currently in release candidate and will be released very soon (ie is pretty stable, so I'd recommend using it now even though it's pre-release). For details on how to upgrade, see: #1129

@AliHammami
Copy link
Author

I'm trying to upgrade to neutrino 9 but still have issues. When I do yarn start or yarn build I have an error that told me that can't find @babel/preset-env:

An error occurred when loading the Neutrino configuration.

Error: Cannot find module 'babel-preset-env' from '/var/www/html/whire/whire-client'
at Function.module.exports [as sync] (/var/www/html/whire/whire-client/node_modules/resolve/lib/sync.js:74:15)
at resolveStandardizedName (/var/www/html/whire/whire-client/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/var/www/html/whire/whire-client/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
at /var/www/html/whire/whire-client/node_modules/babel-merge/src/index.js:11:26
at Array.reduce ()
at mergeArray (/var/www/html/whire/whire-client/node_modules/babel-merge/src/index.js:10:36)
at babelMerge (/var/www/html/whire/whire-client/node_modules/babel-merge/src/index.js:35:19)
at /var/www/html/whire/whire-client/node_modules/@neutrinojs/react/index.js:21:12
at Neutrino.use (/var/www/html/whire/whire-client/node_modules/neutrino/Neutrino.js:183:26)
at /var/www/html/whire/whire-client/node_modules/neutrino/index.js:49:37
at Array.forEach ()
at module.exports (/var/www/html/whire/whire-client/node_modules/neutrino/index.js:49:13)
at Object. (/var/www/html/whire/whire-client/webpack.config.js:3:18)
at Module._compile (/var/www/html/whire/whire-client/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (/var/www/html/whire/whire-client/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (/var/www/html/whire/whire-client/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/var/www/html/whire/whire-client/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /var/www/html/whire/whire-client/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach ()
at module.exports (/var/www/html/whire/whire-client/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at /var/www/html/whire/whire-client/node_modules/webpack-cli/bin/cli.js:71:45
at Object.parse (/var/www/html/whire/whire-client/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
at /var/www/html/whire/whire-client/node_modules/webpack-cli/bin/cli.js:49:8
at Object. (/var/www/html/whire/whire-client/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
code: 'MODULE_NOT_FOUND'
}

Here's my .neutrinorc.js file:

// const env = require('@neutrinojs/env');
const jest = require('@neutrinojs/jest');
const airbnb = require('@neutrinojs/airbnb');
const react = require('@neutrinojs/react');

// const autoprefixer = require('autoprefixer');
const { EnvironmentPlugin, DefinePlugin } = require('webpack');
// const env = require('@neutrinojs/env')
// const dotProp = require("../precompiled/dot-prop");

module.exports = {
  use: [
    ({ config }) => config.entry('index').prepend('babel-polyfill'),  // you need this line
    // env(),
    jest(),
    airbnb({
      eslint: {
        plugins: ['react-hooks'],
        rules: {
          'no-console': 'off',
          'import/no-unresolved': 'off',
          'import/extensions': 'off',
          'react/prop-types': 0,
          'react-hooks/rules-of-hooks': 'error',
          'react-hooks/exhaustive-deps': 'warn',
          'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
          'jsx-a11y/label-has-for': [ 2, {
            required: {
                'some': [ 'nesting', 'id' ]
            },
        }]
        }
      }
    }),
    react({
      targets: {
        browsers: [
            'last 80 Chrome versions',
            'last 80 Firefox versions',
            'last 50 Edge versions',
            'last 60 Opera versions',
            'last 50 Safari versions',
            'last 50 iOS versions',
            'last 50 Android versions',
            'ie 11'
          ]
      },
      babel: {
        // options: {
        //   blacklist: ["useStrict"],
        // },
        presets: [
          ['babel-preset-env', {
            modules: false,
            useBuiltIns: true,
            StrictMode: false,
            // exclude: ['transform-regenerator', 'transform-async-to-generator'],
          }]
        ]
      },
      html: {
        title: 'Whire - communauté professionnelle',
        scripts: [
          '//cdn.iframe.ly/embed.js?key=0671f87a90e97504b765c7ab1851e5be',
          '//cdn.rawgit.com/download/memorystorage/0.11.0/dist/memorystorage.min.js',
          'https://cdn.jsdelivr.net/npm/date-input-polyfill'
        ],
        meta: [
          {
            property: 'og:title',
            content: 'Whire - communauté professionnelle',
          },
          {
            property: "og:description",
            content: 'Découvrez mon profil',
          },
          {
            property: "og: image",
            content: "src/static/svg/whire.png",
          },
          {
            property:"og:type",
            content:"website",
          },
          {
            property: 'twitter:title',
            content: 'Whire - communauté professionnelle',
          },
          {
            property: "twitter:description",
            content: 'Découvrez mon profil',
          },
          {
            property: "twitter:image",
            content: "src/static/svg/whire.png",
          },
        ],
        favicon: [{
          href: 'https://files.graph.cool/cj24jwmf57uvo0164y2bas64h/cjadtiw8q02wh0148y6t44er6',
          rel: 'shortcut icon',
          type: 'image/x-icon'
        }],
        bodyHtmlSnippet: `<script crossorigin="anonymous">

          UPLOADCARE_PUBLIC_KEY = '199050a047fee9047f4c';
          var scripts = [];

          var newBrowser = (
            'fetch' in window &&
            'Promise' in window &&
            'assign' in Object &&
            'keys' in Object
          );

          if (!newBrowser) {
            scripts.unshift('https://cdn.polyfill.io/v2/polyfill.min.js');
          }

          scripts.forEach(function(src) {
            var scriptEl = document.createElement('script');
            scriptEl.src = src;
            scriptEl.async = false;
            document.head.appendChild(scriptEl);
          });

          Array.prototype.findIndex = Array.prototype.findIndex || function(callback) {
            if (this === null) {
              throw new TypeError('Array.prototype.findIndex called on null or undefined');
            } else if (typeof callback !== 'function') {
              throw new TypeError('callback must be a function');
            }
            var list = Object(this);
            // Makes sures is always has an positive integer as length.
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            for (var i = 0; i < length; i++) {
              if ( callback.call(thisArg, list[i], i, list) ) {
                return i;
              }
            }
            return -1;
          };

          window.DB;
            try {
                var x = 'test-localstorage-' + Date.now();
                localStorage.setItem(x, x);
                var y = localStorage.getItem(x);
                localStorage.removeItem(x);
                if (y !== x) {throw new Error();}
                window.DB = localStorage;

            } catch (e) {
              window.DB = new MemoryStorage('whire-app');
            }
        </script>`
      },
      style: {
        loaders: [
          {
            loader: 'less-loader',
            useId: 'less',
            options: {
            }
          },
          {
            loader: 'sass-loader',
            useId: 'sass',
            options: {
            }
          },
        ],
        test: /\.(css|less|scss)$/,
        modulesTest: /\.module.scss$/,
      }
    }),

    // ['@neutrino-middleware-postcss', {
    //     plugins: [{
    //       "postcss-inline-svg": {
    //         "path": "node_modules/@zendeskgarden/svg-icons/src"
    //       }
    //     }]
    // }]
    // ['@neutrinojs/image-loader', {
    //   limit: 8192,
    //   svg: {},
    //   img: {},
    //   ico: {}
    // }],
    // ['@neutrinojs/style-loader', {
    //   test: /\.svg$/,
    //   ruleId: 'style-svg',
    //   styleUseId: 'style-svg',
    //   // cssUseId: 'css-svg',
    //   extractId: 'extract-svg',
    //   loaders: [
    //     // {
    //     //   loader: "babel-loader"
    //     // },
    //     {
    //       useId: 'svg',
    //       loader: 'postcss-inline-svg',
    //       options: {
    //         jsx: true,
    //       }
    //     }
    //   ]
    // }],
    // ['@neutrinojs/babel-minify', {
    //   minify: {},
    //   plugin: {
    //     parserOpts: {
    //       strictMode: false
    //     }
    //   }
    // }],
    (neutrino) => {
      neutrino.config.output.publicPath('/');
      neutrino.config.resolve.modules.add(neutrino.options.source);
      // neutrino.config.module
      //   .rule('compile')
      //   .include.add(__dirname, 'node_modules', 'dot-prop');
      // neutrino.use('env');

    },
  ]
};

Someone know how to solve this problem please ?

Thank you!

@edmorley
Copy link
Member

edmorley commented Dec 17, 2019

I would remove these lines, they should not be needed any more:

      babel: {
        // options: {
        //   blacklist: ["useStrict"],
        // },
        presets: [
          ['babel-preset-env', {
            modules: false,
            useBuiltIns: true,
            StrictMode: false,
            // exclude: ['transform-regenerator', 'transform-async-to-generator'],
          }]
        ]
      },

Unrelated to the error: Also react-hooks is now included in @neutrinojs/react so the eslint config above can be simplified too.

@AliHammami
Copy link
Author

AliHammami commented Dec 17, 2019

Ok apparently it solve this problem, but I have other problems now. When I do a yarn build, all my modules from my node_modules folder are not found. And when I a do a yarn start I have this error:
internal/validators.js:112

throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object
at validateString (internal/validators.js:112:11)
at Object.resolve (path.js:981:7)
at HtmlWebpackPlugin.addFileToAssets (/var/www/html/whire/whire-client/node_modules/html-webpack-plugin/index.js:458:21)
at HtmlWebpackPlugin.getFaviconPublicPath (/var/www/html/whire/whire-client/node_modules/html-webpack-plugin/index.js:646:17)
at /var/www/html/whire/whire-client/node_modules/html-webpack-plugin/index.js:209:36
at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/whire/whire-client/node_modules/tapable/lib/HookCodeFactory.js:33:10), :7:1)
at AsyncSeriesHook.lazyCompileHook (/var/www/html/whire/whire-client/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.emitAssets (/var/www/html/whire/whire-client/node_modules/webpack/lib/Compiler.js:491:19)
at onCompiled (/var/www/html/whire/whire-client/node_modules/webpack/lib/Watching.js:51:19)
at /var/www/html/whire/whire-client/node_modules/webpack/lib/Compiler.js:681:15 {
code: 'ERR_INVALID_ARG_TYPE'
}

@edmorley
Copy link
Member

edmorley commented Dec 18, 2019

@AliHammami hi! Debugging webpack specific issues is probably out of scope for here (since the errors are due to custom config you've added that is getting passed to webpack/its plugins and causing it to break - and isn't a bug in the Neutrino preset itself), but happy to have one last attempt...

When I do a yarn build, all my modules from my node_modules folder are not found.

I would remove this line:

      neutrino.config.resolve.modules.add(neutrino.options.source);

throw new ERR_INVALID_ARG_TYPE(name, 'string', value);

This sounds like one of the options passed to html-webpack-plugin is invalid (via the html option to @neutrinojs/react). I'm guessing that it's the favicon pref, since that should be a string but you're passing an object:
https://github.com/jantimon/html-webpack-plugin#options


In general your .neutrinorc.js config is quite complex (I would go so far as to say unnecessarily complex) - I would remove anything that you don't definitely need. It's also loading multiple polyfils (through entries and then bodyHtmlSnippet), which isn't ideal. And the last 80 {Chrome,...} versions etc is really not recommended (for a start Chrome/... auto-update, so most people won't be that behind).

@AliHammami
Copy link
Author

Hey thank you @edmorley for taking the time to help me! I'm not the one who config this. I'm a junior who taking over on this project. This is the first time I work with neutrino and the one who config this, is no longer working with the company and I'm on my own to solve this problem. The config is really complex and I don't understand everything in it.

I did what you asked me, I don't have those problems anymore but now I have this 2 errors;

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve 'App' in '/var/www/html/whire/whire-client/src'

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve 'contexts/Store' in '/var/www/html/whire/whire-client/src'

Here is my index.jsx file:

// Patch global.`fetch` so that Apollo calls to GraphQL work
import 'isomorphic-fetch';
import 'babel-polyfill';
// date input polyfill for ie
import 'date-input-polyfill-react'

import { render } from 'react-dom';

// Browser routing
import { BrowserRouter } from 'react-router-dom';

import { AppContainer } from 'react-hot-loader';

// Apollo Provider. This HOC will 'wrap' our React component chain
// and handle injecting data down to any listening component
import { ApolloProvider } from 'react-apollo';

import { ThemeProvider } from '@zendeskgarden/react-theming'; 

import '@zendeskgarden/react-notifications/dist/styles.css';
import App from 'App'
import StoreProvider from 'contexts/Store';

// Grab the shared Apollo Client
import browserClient from './apollo';

// ----------------------

// Create a new browser Apollo client
// eslint-disable-next-line
export const client = browserClient();

const root = document.getElementById('root');

window.UPLOADCARE_LOCALE = 'fr';

const load = () => render(
  (
    <ThemeProvider>
      <AppContainer>
        <BrowserRouter>
          <StoreProvider>
            <ApolloProvider client={client}>
              <App />
            </ApolloProvider>
          </StoreProvider>
        </BrowserRouter>
      </AppContainer>
    </ThemeProvider>
  ), root,
);

// This is needed for Hot Module Replacement
if (module.hot) {
  module.hot.accept('App', load);
}

load();

Thanks again for your help!

@edmorley
Copy link
Member

Ah sorry to hear that. I'll see if I can help.

now I have this 2 errors

I believe they are due to the removal of the line:

      neutrino.config.resolve.modules.add(neutrino.options.source);

...because the project is using absolute imports (ie import App from 'App') rather than relative path imports (ie: import App from './App').

Your options are to:

  1. Add that config back in, and fix the "When I do a yarn build, all my modules from my node_modules folder are not found" issue mentioned previously another way
  2. Update the project so that all imports of the project's own source use relative paths rather than absolute

I personally would go with (2), since I find fake absolute paths to be confusing when reading the source for a project -- it makes it much harder to tell what are external packages being imported, vs local files belonging to the project.

@edmorley
Copy link
Member

Also to understand how webpack resolves (ie finds the intended target) of an import, see:
https://webpack.js.org/concepts/module-resolution/

@AliHammami
Copy link
Author

AliHammami commented Jan 4, 2020

Thank you @edmorley for your help!

And yes that's what I did, I have changed all my path and now the app is compiled successfully but now I have a problem where I'm stuck. I can go to my home page but for the other pages I have this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

It seems to be a problem with my import, but everything worked fine before the update.

@edmorley edmorley closed this as completed Jun 6, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests

2 participants