Module not found errors with React 0.13

[mohanzhang]

I get these errors when I run my tests (karma/mocha/expect):

ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in /Users/mohanzhang/code/test/node_modules/skin-deep
 @ ./~/skin-deep/skin-deep.js 10:14-48

ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-dom/server' in /Users/mohanzhang/code/test/node_modules/skin-deep
 @ ./~/skin-deep/skin-deep.js 18:9-36

When I try to add these dependencies, I run into problems with version constraints because these expect React 0.14. I saw in the commit messages that there is implied support for React 0.13, so I'm probably missing something obvious?

EDIT: Upon further investigation, this seems to happen during the webpack bundling phase, but not during the test running phase.

For reference, I added the following lines (which you'll recognize as the start of skin-deep.js):

var subset = require('is-subset');

var React = require('react');
var React013 = (React.version.substring(0, 4) == '0.13');
console.log(React.version.substring(0, 4));
console.log(React013);

var TestUtils;
if (React013) {
  console.log("ok");
  TestUtils = require('react/addons').addons.TestUtils;
} else {
  console.log("wtf");
  TestUtils = require('react-addons-test-utils');
}

Here is the log output from karma start:

> karma start

Hash: 1aa70af04e73edda661c
Version: webpack 1.12.1
Time: 16935ms
                                 Asset       Size  Chunks             Chunk Names
  45c73723862c6fc5eb3d6961db2d71fb.eot    68.9 kB          [emitted]  
4b5a84aaf1c9485e060c503a0ff8cadb.woff2    64.5 kB          [emitted]  
 dfb02f8f6d0cedc009ee5887cc68f1f3.woff    81.3 kB          [emitted]  
  7c87870ab40d63cfb8870c1f183f9939.ttf     138 kB          [emitted]  
  76a4f23c6be74fd309e0d0fd2c27a5de.svg     356 kB          [emitted]  
                      tests.webpack.js    9.52 MB       0  [emitted]  tests.webpack.js
                            index.html  980 bytes          [emitted]  
chunk    {0} tests.webpack.js (tests.webpack.js) 3.17 MB [rendered]
    [0] ./tests.webpack.js 174 bytes {0} [built]

...

 [1441] ./app/reducers/__tests__/managers-test.js 1.82 kB {0} [optional] [built]
 [1442] ./app/selectors/__tests__/managers-test.js 2.4 kB {0} [optional] [built]

ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in /Users/mohanzhang/code/test/node_modules/skin-deep
 @ ./~/skin-deep/skin-deep.js 14:14-48

ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-dom/server' in /Users/mohanzhang/code/test/node_modules/skin-deep
 @ ./~/skin-deep/skin-deep.js 22:9-36
02 10 2015 23:05:42.372:INFO [karma]: Karma v0.13.10 server started at http://localhost:9876/
02 10 2015 23:05:42.383:INFO [launcher]: Starting browser Chrome
02 10 2015 23:05:45.987:INFO [Chrome 45.0.2454 (Mac OS X 10.10.5)]: Connected on socket RADFMz5dA_LFwgbcAAAA with id 26179585
Chrome 45.0.2454 (Mac OS X 10.10.5) LOG: '0.13'
Chrome 45.0.2454 (Mac OS X 10.10.5) LOG: true
Chrome 45.0.2454 (Mac OS X 10.10.5) LOG: 'ok'
............................
Chrome 45.0.2454 (Mac OS X 10.10.5): Executed 28 of 28 SUCCESS (0.128 secs / 0.022 secs)

[glenjamin]

Duplicate of https://github.com/glenjamin/skin-deep/issues/10

You should exclude these modulefrom the webpack loader. You might also be able to use theDefinePluginto setReact013` to true.

[mohanzhang]

I tried making these config changes in my karma.conf.js, and it still appears that they only affect what happens after the tests start running. I tried using a DefinePlugin to set React013 to true, but this had no effect on the errors.

Similarly, I tried excluding modules, e.g.

module.exports = function (config) {
  config.set({
    // ...
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: ([
          {
            test: /skin-deep/,
            loader: 'null'
          }
        ]).concat(commonConfig.loaders)
      },
      plugins: commonConfig.plugins.concat([
        new webpack.DefinePlugin({
          'React013': true
        })
      ])
    },
   // ...
  });
};

This results in

Chrome 45.0.2454 (Mac OS X 10.10.5) ERROR
  Uncaught Error: Cannot find module "skin-deep"
  at /Users/mohanzhang/code/test/tests.webpack.js:96 <- webpack:///app/components/managers/__tests__/ManagerItem-test.js:3:15

So I am fairly convinced that my exclusion config is doing something. Now if I replace skin-deep above with the two targets, i.e.:

        loaders: ([
          {
            test: /react-addons-test-utils/,
            loader: 'null'
          },
          {
            test: /react-dom\/server/,
            loader: 'null'
          }
        ]).concat(commonConfig.loaders)

I still get the same errors. I understand that I'm having the "other side" of #10 since I am getting the React 0.13 equivalent of that error. Maybe @hallister can explain how they did it?

[glenjamin]

Try using this: https://webpack.github.io/docs/list-of-plugins.html#ignoreplugin

{
  plugins: commonConfig.plugins.concat([
    new webpack.IgnorePlugin(/react-addons/),
    new webpack.IgnorePlugin(/react-dom/),
  ]
}

[mohanzhang]

Ah, like magic! :) Thanks @glenjamin :+1:

[GerryFudd]

I have encountered the same issue, but I have not yet experienced the magic.

I have tried adding

loaders: [
      ...
      {
        test: /skin-deep/,
        loader: 'null'
      },
      {
        test: /react-addons-test-utils/,
        loader: 'null'
      },
      {
        test: /react-dom\/server/,
        loader: 'null'
      }
    ]

and

plugins: [
    new webpack.IgnorePlugin(/react-addons/),
    new webpack.IgnorePlugin(/react-dom/),
    new webpack.DefinePlugin({
      'React013': true
    })
]

But I am still seeing the cannot resolve module errors

[glenjamin]

Can you post a link to your package json and webpack config? You should only need the ignore line as shown in the README.

On 6 Jan 2016, at 20:50, David Hasenjaeger notifications@github.com wrote:

I have encountered the same issue, but I have not yet experienced the magic.

I have tried adding

loaders: [ ... { test: /skin-deep/, loader: 'null' }, { test: /react-addons-test-utils/, loader: 'null' }, { test: /react-dom\/server/, loader: 'null' } ] and

plugins: [ new webpack.IgnorePlugin(/react-addons/), new webpack.IgnorePlugin(/react-dom/), new webpack.DefinePlugin({ 'React013': true }) ] But I am still seeing the cannot resolve module errors

— Reply to this email directly or view it on GitHub.

[GerryFudd]

before adding the ignore lines, my webpack config looks like

var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

const ROOT_PATH = path.resolve(__dirname, '../..');
const DEBUG = false;
const CLIENT_PATH = path.join(ROOT_PATH, 'src', 'client');
const PUBLIC_PATH = path.join(ROOT_PATH, 'public');

var config = {
  context: CLIENT_PATH,
  entry: {
    index: './index.js'
  },
  output: {
    path: PUBLIC_PATH,
    filename: 'js/[name].js',
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: ['node_modules']
  },
  module: {
    loaders: [
      {
          test: /\.js$/,

          // There is not need to run the loader through
          // vendors
          exclude: [node_modules_dir],
          loader: 'babel'
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css']
      },
      {
        test: /\.scss/,
        loader: 'style!css!autoprefixer-loader?browsers=last 2 version!sass?outputStyle=compressed'
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf|svg)$/,
        loader: 'url?limit=10000&name=[sha512:hash:base64:7].[ext]'
      },
      {
        test: /\.html$/,
        loader: 'raw'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NGINX_HOST: JSON.stringify(process.env.NGINX_HOST || 'http://localhost'),
        NGINX_PORT: JSON.stringify(process.env.NGINX_PORT || '8080')
      }
    })
  ]
};

module.exports = config;

[GerryFudd]

I just looked at the readme and it looks like I need to add

new webpack.IgnorePlugin(/react-addons|react-dom/)

to the plugins list. I have now done that but I am still seeing the errors.

[GerryFudd]

In my package.json dependencies I have

    "skin-deep": "^0.8.1",
    "react": "^0.13.3",

I have also tried this with skin-deep@^0.13.0 but the errors remain then too.

[glenjamin]

This looks like config for the main application.

Is skin deep part of your actual app? If not, how are you running your tests?

[GerryFudd]

I'm using karma for testing and skin-deep is included in the tests themselves.

I also have a karma.conf.js. Should I include a line in there to ignore the troublesome packages?

[glenjamin]

Sounds like there's some bundling going on via karma, and that's where you need to ignore the 0.14 flavoured modules.

[GerryFudd]

I will look there, thanks.