search

Merri / react-lazy

Universal lazy loader components using IntersectionObserver for React
https://merri.github.io/react-lazy/
MIT License
119 stars 8 forks source link

Fails when running webpack on Nextjs #8

Closed krisquigley closed 7 years ago

krisquigley commented 7 years ago

I'm really loving react-lazy, thanks a lot for a great library! Unfortunately, I can't get it to work in production...

When running yarn build I get the following error on heroku and locally:

remote:        > Using "webpack" config function defined in next.config.js.
remote: > Failed to build on /tmp/a57b28bb-81ed-4653-af81-be7a88dca87b
remote: { Error: ./~/react-lazy/dist/module/index.js
remote: Module not found: Error: Can't resolve 'react-dom/server' in '/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/dist/module'
remote: resolve 'react-dom/server' in '/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/dist/module'
remote:   Parsed request is a module
remote:   using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/package.json (relative path: ./dist/module)
remote:     Field 'browser' doesn't contain a valid alias configuration
remote:     aliased with mapping 'react-dom': '/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js' to '/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server'
remote:       using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/package.json (relative path: ./dist/module)
remote:         Field 'browser' doesn't contain a valid alias configuration
remote:       after using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/package.json (relative path: ./dist/module)
remote:         using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/package.json (relative path: ./dist/react-dom.min.js/server)
remote:           as directory
remote:             /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server doesn't exist
remote:           no extension
remote:             Field 'browser' doesn't contain a valid alias configuration
remote:             /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server doesn't exist
remote:           .js
remote:             Field 'browser' doesn't contain a valid alias configuration
remote:             /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.js doesn't exist
remote:           .json
remote:             Field 'browser' doesn't contain a valid alias configuration
remote:             /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.json doesn't exist
remote: [/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server]
remote: [/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server]
remote: [/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.js]
remote: [/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.json]
remote:  @ ./~/react-lazy/dist/module/index.js 18:14-41
remote:  @ ./components/ArticleContent.js
remote:  @ ./components/ArticlePage.js
remote:  @ ./pages/article.js?entry
remote:  @ multi ./pages/article.js?entry
remote:     at /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/next/dist/server/build/index.js:181:21
remote:     at /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/Compiler.js:272:15
remote:     at Compiler.emitRecords (/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/Compiler.js:367:37)
remote:     at /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/Compiler.js:265:12
remote:     at /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/Compiler.js:360:11
remote:     at next (/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/tapable/lib/Tapable.js:154:11)
remote:     at Compiler.compiler.plugin (/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
remote:     at Compiler.applyPluginsAsyncSeries1 (/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/tapable/lib/Tapable.js:158:13)
remote:     at Compiler.afterEmit (/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/Compiler.js:357:8)
remote:     at Compiler.<anonymous> (/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/webpack/lib/Compiler.js:352:14)
remote:   errors: [ './~/react-lazy/dist/module/index.js\nModule not found: Error: Can\'t resolve \'react-dom/server\' in \'/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/dist/module\'\nresolve \'react-dom/server\' in \'/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/dist/module\'\n  Parsed request is a module\n  using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/package.json (relative path: ./dist/module)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js\' to \'/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server\'\n      using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/package.json (relative path: ./dist/module)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n
     after using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-lazy/package.json (relative path: ./dist/module)\n        using description file: /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/package.json (relative path: ./dist/react-dom.min.js/server)\n          as directory\n
       /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server doesn\'t exist\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            /tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.json doesn\'t exist\n[/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server]\n[/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server]\n[/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.js]\n[/tmp/build_929ca650a0764bc17e7936cbf042fd03/node_modules/react-dom/dist/react-dom.min.js/server.json]\n @ ./~/react-lazy/dist/module/index.js 18:14-41\n @ ./components/ArticleContent.js\n @ ./components/ArticlePage.js\n @ ./pages/article.js?entry\n @ multi ./pages/article.js?entry' ],
remote:   warnings: [] }
remote: error Command failed with exit code 1.

package.json

{
  "dependencies": {
    "@mars/heroku-js-runtime-env": "^3.0.0",
    "express": "^4.15.3",
    "file-loader": "^0.11.1",
    "graphql-tag": "^2.1.0",
    "image-webpack-loader": "^3.3.1",
    "lru-cache": "^4.0.2",
    "next": "^2.4.0",
    "node-sass": "^4.5.3",
    "raw-loader": "^0.5.1",
    "react": "^15.5.4",
    "react-apollo": "^1.2.0",
    "react-dom": "^15.5.4",
    "react-dom-server": "^0.0.5",
    "react-lazy": "^0.2.1",
    "sass-loader": "^6.0.5",
    "verge": "^1.9.1"
  },
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js",
    "heroku-postbuild": "npm rebuild node-sass && next build"
  }
}

Webpack

const path = require('path')
const glob = require('glob')

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader']
      }
    ,
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ,
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['scss', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }
}
Merri commented 7 years ago

With a quick look react-dom-server is an invalid dependency and might cause a conflict.

Edit!

Alternatively the way the loader currently handles react-dom/server is wrong as the tmp filenames seem odd with stuff like /node_modules/react-dom/dist/react-dom.min.js/server

krisquigley commented 7 years ago

Thanks, I added it as part of debugging for this error. I've removed it now and original issue still stands.

krisquigley commented 7 years ago

Is there anything I can do to help debug this?

krisquigley commented 7 years ago

This might be of use https://github.com/facebook/react/issues/8788 I am also assuming that /node_modules/react-dom/dist/react-dom.min.js/server or at least the min.js part is being called as this is being compiled for production.

Merri commented 7 years ago

Does this help? https://github.com/xjamundx/webpack2-example/issues/1

So in short, add alias for react-dom/server so that it results in /node_modules/react-dom/dist/react-dom-server.min.js which is the filename it should be if I recall it correctly.

Merri commented 7 years ago

Closing after two months of silence.

MicroBenz commented 6 years ago

This issue is still happening right now on Next.js 2

In development, It works really fine. But it can't build with the same error.

I try to fix it by configure webpack's config with this

config.resolve.alias = {
   'react-dom/server': path.resolve('./node_modules/react-dom/dist/react-dom-server.min.js'),
};

It can build but after built. It throw this error.

image

Any help?