Coder Social home page Coder Social logo

Usage of babel-register about razzle HOT 18 CLOSED

jaredpalmer avatar jaredpalmer commented on June 22, 2024
Usage of babel-register

from razzle.

Comments (18)

SanthoshRaju91 avatar SanthoshRaju91 commented on June 22, 2024 3

Okay, got this issue fixed in some way.

We need to add this in razzle.config.

module.exports = {
  modify: (config, { target, dev }) => {
    if(target === "node") {
      config = {
        ...config,
        externals: []
      }
    }
    return config;
  }
}

In order for this work in your CI pipeline, you need to make the process.env.CI to false.

Because, if CI environment variable is true, warnings are treated as errors and your build will fail. Why is this you ask ? Because of express dependency issue

./node_modules/express/lib/view.js
Critical dependency: the request of a dependency is an expression

from razzle.

Grsmto avatar Grsmto commented on June 22, 2024 2

For posterity:
From what I understand of the Webpack config for the backend, it uses webpack-node-externals as seen in this line so the node_modules are not bundled with the backend bundle. Which means the node_modules are required on production and have to be deployed alongside the /build folder.

from razzle.

krystianjj avatar krystianjj commented on June 22, 2024 2

Thank you for quick response @Grsmto
I do the same - copy package.json to production server run npm install and I have build folder with node_modules.
Maybe @jaredpalmer can add fix in future for this, or this is good solution to copy node_modules to the server.

from razzle.

rowellx68 avatar rowellx68 commented on June 22, 2024 1

We could compile the whole src folder into build? Did a quick test and here's what I've come up with:

"start:prod": "npm run build:server && npm run build && NODE_ENV=production node ./build/server/server.js",
"build:server": "babel src --out-dir build",

I've replaced the npm scripts and it seems to work. I'm sure there are better solutions though.

from razzle.

rowellx68 avatar rowellx68 commented on June 22, 2024 1

Currently trying this out http://jlongster.com/Backend-Apps-with-Webpack--Part-I

Will do a PR when I get it working. πŸ‘

from razzle.

jaredpalmer avatar jaredpalmer commented on June 22, 2024 1

Pm2 is a lot of overhead. We use Throng in production. But yes we can make that change.

from razzle.

Grsmto avatar Grsmto commented on June 22, 2024 1

Hi @krystianjj,
I had to copy the node_modules folder to the production server or build the app directly on the production server. unfortunately I didn't find a way to deploy only the /build folder.

from razzle.

jaredpalmer avatar jaredpalmer commented on June 22, 2024

Will need to use webpack on the server

from razzle.

jaredpalmer avatar jaredpalmer commented on June 22, 2024

Problem is that there is no HMR on the server, even with jlongster's approach. 😦

from razzle.

rowellx68 avatar rowellx68 commented on June 22, 2024

How about if it was limited to production only?

from razzle.

jaredpalmer avatar jaredpalmer commented on June 22, 2024

It would look something like this:

// webpack.server.prod.config.js

var webpack = require('webpack')
var fs =  require('fs')
var path = require('path')

module.exports = {
  target: 'node',

  devtool: 'inline-source-map',

  entry: path.join(__dirname, 'app.js'),

  output: {
    filename: path.join(__dirname, 'app.bundle.js')
  },

  // keep node_module paths out of the bundle keep size down
  externals: getExternals(),

  node: {
    __filename: true,
    __dirname: true
  },

  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }  // handwaiving here
    ]
  },

  plugins: [
    new webpack.BannerPlugin(
      'require("source-map-support").install();',
      { raw: true, entryOnly: false }
    )
  ]
}

function getExternals() {
  const nodeModules = fs.readdirSync(path.resolve(__dirname, 'node_modules'))
  return nodeModules.reduce((ext, mod) => {
    ext[mod] = 'commonjs ' + mod
    return ext
  }, {})
}

from razzle.

ranyefet avatar ranyefet commented on June 22, 2024

Thanks for the quick response! So basically after using this config, we need to change start:prod script to use app.bundle.js right?

Another question about running in production, currently start:prod command uses node to run the server.
Shouldn't we use something like PM2 to run the server on production?
So it will auto-restart on code changes and scale to all cores?

from razzle.

Grsmto avatar Grsmto commented on June 22, 2024

Hi guys,
It seems like we still need the node_modules in production as well? Deploying only the /build folder throw an error babel related, so I'm wondering if this issue isn't related. Did anyone figured out something similar?

When doing node ./build/server.js using only the /build folder:
Error: Cannot find module 'babel-runtime/core-js/json/stringify'

Thanks!

Edit: reformulate my question: Why do we still need the node_modules in production even if all the code is bundled by Webpack? Shouldn't everything needed for production be contained within the /build folder?

from razzle.

jaredpalmer avatar jaredpalmer commented on June 22, 2024

You don’t need Node modules in prod

from razzle.

Grsmto avatar Grsmto commented on June 22, 2024

Hi Jared,
Thanks for your answer :)

That's what I expected as well! So I tested with a fresh install, with examples/basic and followed this process:

  • cd examples/basic
  • npm install
  • npm run build
  • rm -rf node_modules
  • npm run start:prod

and then it fails with:
Error: Cannot find module 'express'

Should I open a new issue or am I doing something wrong?

from razzle.

krystianjj avatar krystianjj commented on June 22, 2024

Hi @Grsmto,
Can you resolve the problem? To build razzle app with include node_modules?
For me it's not good to copy all files from catalog node_modules to production.

from razzle.

SanthoshRaju91 avatar SanthoshRaju91 commented on June 22, 2024

Anyone got this working, I don't want to take the node_modules along to the production server after creating the bundle.

from razzle.

Risbot avatar Risbot commented on June 22, 2024

For me it not works, I get this error:


Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\dependencies\ContextDependency.js:82:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compilation.js:2565:24)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compilation.js:2193:10
    at _next2 (eval at create (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1)
    at eval (eval at create (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:62:1)    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:375:11
    at C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2830:7
    at Object.each (C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2850:39)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:354:18
    at C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2830:7
    at Object.each (C:\Projects\My\GitLab\inseritas-web\node_modules\neo-async\async.js:2850:39)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:48:16
    at Hook.eval [as callAsync] (eval at create (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:58:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Projects\My\GitLab\inseritas-web\node_modules\tapable\lib\Hook.js:18:14)
    at Compilation.finish (C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compilation.js:2185:28)
    at C:\Projects\My\GitLab\inseritas-web\node_modules\webpack\lib\Compiler.js:1089:19

from razzle.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.