Critical dependencies: request of a dependency is an expression in encoding.js

[HriBB]

Hello

I get an error when I try to build universal react app with redux and icomorphic-fetch.

WARNING in (server) ./~/isomorphic-fetch/~/node-fetch/~/encoding/lib/encoding.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
 @ ./~/isomorphic-fetch/~/node-fetch/~/encoding/lib/encoding.js 9:12-34

It's this piece of code in encoding.js that is causing the problems

try {
    // this is to fool browserify so it doesn't try (in vain) to install iconv.
    var iconv_package = 'iconv';
    Iconv = require(iconv_package).Iconv;
} catch (E) {
    // node-iconv not present
}

Any ideas on how to fix this?

[bitinn]

Depends on how you are building your app, this can be an issue with your build tool or build config. You might want to raise this issue to the developer of your build tool (as I can't debug that error message).

PS: node-fetch is a server-side implementation, so your client-side build should contain the whatwg-fetch (fetch polyfill, as specified in isomorphic-fetch), See #24 on this topic.

[HriBB]

I am using webpack to build. Here's my server config

var config = {
  name: 'server',
  target: 'node',
  entry: [
    './src/server.js'
  ],
  output: {
    path: './dist/server',
    filename: 'index.js',
    libraryTarget : 'commonjs2'
  },
  module: {
    preLoaders : [
      { test : /\.(js|jsx)$/, loaders : ['eslint-loader'], include : './src' },
      { test: /\.json$/, loader: 'json'}
    ],
    loaders: [
      { test: /\.js?$/, loaders: ['babel'], exclude: /node_modules/ },
      { test: /\.css$/, loader: 'style!css' }
    ]
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      '__DEBUG__'  : true,
      '__CLIENT__' : false,
      '__SERVER__' : true
    })
  ],
  eslint : {
    configFile : './eslintrc',
    failOnError : false
  }
};

I am new to node and webpack, but I think the problem is in the encoding module, specifically this line https://github.com/andris9/encoding/blob/master/lib/encoding.js#L9. If my understanding of the situation is correct, when I specify target: node in the server config, it tells isomorphic-fetch to use node-fetch which uses encoding which dynamically loads iconv and when webpack encounters a dynamic require it complains that the request of a dependency is an expression

The funny thing is that everything works :) But I would still like to get to the bottom of this ...

[bitinn]

You need to take this issue to webpack and encoding modules. I believe encoding module is not at fault (as in node.js allows it). It's more likely webpack had issue dealing with this module and need some extra config or workaround.

You shouldn't be building server-side script anyway, you may transpile es6 to node.js, but building a bundle or minification ain't necessary for node.

[silvenon]

An example where it makes sense to build server-side scripts is when you're using webpack and have weird stuff like require('./style.scss'), which Node itself cannot handle, so you prepare your tests for Node by compiling them first.

isomorphic-fetch is handy in this case because we use whatwg-fetch on client-side and node-fetch for testing.

[silvenon]

Related: andris9/encoding#16. Apparently you can just add:

new webpack.IgnorePlugin(/\/iconv-loader$/)

to webpack plugins and it should work.

However, for me it throws Cannot find module "./iconv-loader", but I'm probably doing something wrong.

[bitinn]

@silvenon either webpack or encoding need to change its behavior, we can't really help here.

[silvenon]

@bitinn sorry, by "you" I meant the user, not you 😉 I figured out why I had an error and posted a better solution on the issue I referenced. I added it to the docs of isomorphic-fetch, hopefully they will merge it.

Have a good day ⛄

[iamdanielyin]

Use the 'whatwg-fetch' instead of 'node-fetch'

[silvenon]

andris9/encoding#16 (comment)

[brandonmp]

you'll hit this a lot when using webpack in node. I use this library for node-specific modules.

I can only speak to its implementation in my project framework (serverless, for AWS Lambda functions), but i think it basically skips node-only modules in bundling and includes the entire node_modules folder for each skipped module.