Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Invalid configuration when adding resolveLoader #958

Closed
gfcf14 opened this issue Mar 24, 2019 · 3 comments
Closed

Invalid configuration when adding resolveLoader #958

gfcf14 opened this issue Mar 24, 2019 · 3 comments
Labels
stale

Comments

@gfcf14
Copy link

gfcf14 commented Mar 24, 2019

I'm trying to implement yarn's Plug N Play option, and although it has been asking me for several libraries (please see this issue), I managed to get to a point where react and other basic packages are not recognized/resolved. I was recommended to use the Plug N Play resolver for Webpack, and so I changed my razzle.config.js to this:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  modify(baseConfig, { target, dev }, webpack) {
    const appConfig = Object.assign({}, baseConfig);

    appConfig.module.rules.push({
      resolve: {
        plugins: [
          PnpWebpackPlugin,
        ],
      },
    });

    return appConfig;
  },
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    }
  ],
};

Still, although the basic packages are recognized now, a package, I get these errors:

ERROR in ./src/app/app.scss (/home/gfcf14/.cache/yarn/v4/npm-css-loader-1.0.0-9f46aaa5ca41dbe31860e3b62b8e23c42916bf56/node_modules/css-loader??ref--11-1!/home/gfcf14/.cache/yarn/v4/npm-resolve-url-loader-2.3.2-83bb9ebc392b66c563795eef22f078970357a26e/node_modules/resolve-url-loader??ref--11-2!/home/gfcf14/.cache/yarn/v4/npm-postcss-loader-3.0.0-6b97943e47c72d845fa9e03f273773d4e8dd6c2d/node_modules/postcss-loader/src??ref--11-3!/home/gfcf14/.cache/yarn/v4/npm-sass-loader-7.1.0-16fd5138cb8b424bf8a759528a1972d72aad069d/node_modules/sass-loader/lib/loader.js??ref--11-4!./src/app/app.scss)
Module build failed (from /home/gfcf14/.cache/yarn/v4/npm-css-loader-1.0.0-9f46aaa5ca41dbe31860e3b62b8e23c42916bf56/node_modules/css-loader/index.js):
Error: Cannot find module 'loader-utils'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._resolveFilename (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15882:44)
    at callNativeResolution (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15487:19)
    at Object.resolveToUnqualified (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15604:22)
    at Object.resolveRequest (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15734:31)
    at Function.Module._resolveFilename (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15916:30)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15832:31)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/gfcf14/.cache/yarn/v4/npm-css-loader-1.0.0-9f46aaa5ca41dbe31860e3b62b8e23c42916bf56/node_modules/css-loader/lib/loader.js:5:19)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15859:14)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
 @ ./src/app/app.scss 2:14-604 21:1-42:3 22:19-609
 @ ./src/app/app.jsx
 @ ./src/client.js
 @ multi /home/gfcf14/.cache/yarn/v4/npm-razzle-dev-utils-3.0.0-alpha.2-f01885e7bc17be207c59fecbb81b27491810c925/node_modules/razzle-dev-utils/webpackHotDevClient.js ./src/client

ERROR in ./src/components/not-found/not-found.scss (/home/gfcf14/.cache/yarn/v4/npm-css-loader-1.0.0-9f46aaa5ca41dbe31860e3b62b8e23c42916bf56/node_modules/css-loader??ref--11-1!/home/gfcf14/.cache/yarn/v4/npm-resolve-url-loader-2.3.2-83bb9ebc392b66c563795eef22f078970357a26e/node_modules/resolve-url-loader??ref--11-2!/home/gfcf14/.cache/yarn/v4/npm-postcss-loader-3.0.0-6b97943e47c72d845fa9e03f273773d4e8dd6c2d/node_modules/postcss-loader/src??ref--11-3!/home/gfcf14/.cache/yarn/v4/npm-sass-loader-7.1.0-16fd5138cb8b424bf8a759528a1972d72aad069d/node_modules/sass-loader/lib/loader.js??ref--11-4!./src/components/not-found/not-found.scss)
Module build failed (from /home/gfcf14/.cache/yarn/v4/npm-css-loader-1.0.0-9f46aaa5ca41dbe31860e3b62b8e23c42916bf56/node_modules/css-loader/index.js):
Error: Cannot find module 'loader-utils'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._resolveFilename (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15882:44)
    at callNativeResolution (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15487:19)
    at Object.resolveToUnqualified (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15604:22)
    at Object.resolveRequest (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15734:31)
    at Function.Module._resolveFilename (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15916:30)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15832:31)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/gfcf14/.cache/yarn/v4/npm-css-loader-1.0.0-9f46aaa5ca41dbe31860e3b62b8e23c42916bf56/node_modules/css-loader/lib/loader.js:5:19)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15859:14)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
 @ ./src/components/not-found/not-found.scss 2:14-622 21:1-42:3 22:19-627
 @ ./src/components/not-found/not-found.jsx
 @ ./src/app/app.jsx
 @ ./src/client.js
✔ success server compiled in 1s 343ms

/home/gfcf14/Desktop/greendream-redesign/build/server.js:57666
!(function webpackMissingModule() { var e = new Error("Cannot find module 'razzle-dev-utils/prettyNodeErrors'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());                                            ^Error: Cannot find module 'razzle-dev-utils/prettyNodeErrors'
    at webpackMissingModule (/home/gfcf14/Desktop/greendream-redesign/build/server.js:57666:45)
    at Object.0 (/home/gfcf14/Desktop/greendream-redesign/build/server.js:57666:153)
    at __webpack_require__ (/home/gfcf14/Desktop/greendream-redesign/build/webpack:/webpack/bootstrap:682:1)
    at /home/gfcf14/Desktop/greendream-redesign/build/webpack:/webpack/bootstrap:749:1
    at Object.<anonymous> (/home/gfcf14/Desktop/greendream-redesign/build/server.js:754:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15859:14)
    at Function.Module.runMain (module.js:693:10)

So the package loader-utils is not recognized. I would guess it may have to do with the fact that I'm not resolving a loader? I didn't include that code because if I change my code as suggested,

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  modify(baseConfig, { target, dev }, webpack) {
    const appConfig = Object.assign({}, baseConfig);

    appConfig.module.rules.push({
      resolve: {
        plugins: [
          PnpWebpackPlugin,
        ],
      },
      resolveLoader: {
        plugins: [
          PnpWebpackPlugin.moduleLoader(module),
        ],
      },
    });

    return appConfig;
  },
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    }
  ],
};

I get the following error:

Failed to compile.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[8] has an unknown property 'resolveLoader'. These properties are valid:
   object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I assumed that, given the list of valid options, I could use loader in place of resolveLoader, so I changed it to this:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  modify(baseConfig, { target, dev }, webpack) {
    const appConfig = Object.assign({}, baseConfig);

    appConfig.module.rules.push({
      resolve: {
        plugins: [
          PnpWebpackPlugin,
        ],
      },
      loader: {
        plugins: [
          PnpWebpackPlugin.moduleLoader(module),
        ],
      },
    });

    return appConfig;
  },
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    }
  ],
};

But that gives me the following error:

Failed to compile.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[8].loader should be one of these:
   non-empty string | non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
   -> Shortcut for use.loader
   Details:
    * configuration.module.rules[8].loader should be a string.
    * configuration.module.rules[8].loader should be a string.
    * configuration.module.rules[8].loader should be an instance of function
    * configuration.module.rules[8].loader has an unknown property 'plugins'. These properties are valid:
      object { ident?, loader?, options?, query? }
    * configuration.module.rules[8].loader should be an instance of function
    * configuration.module.rules[8].loader should be an array:
      [non-empty string | function | object { ident?, loader?, options?, query? }]

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So in what way should I implement resolveLoader? And why would the module razzle-dev-utils/prettyNodeErrors if I have installed razzle-dev-utils? Here's my package.json thus far:

{
  "name": "greendream-redesign",
  "version": "0.1.0",
  "license": "MIT",
  "installConfig": {
    "pnp": true
  },
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.16.4",
    "razzle": "^3.0.0-alpha.2",
    "razzle-dev-utils": "^2.4.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "rebass": "^3.0.1",
    "styled-components": "^4.1.3"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "babel-plugin-react-css-modules": "^5.2.1",
    "css-loader": "1.0.0",
    "eslint": "^5.15.3",
    "eslint-plugin-flowtype": "^3.4.2",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "loader-utils": "1.1.0",
    "pnp-webpack-plugin": "^1.4.1",
    "postcss-loader": "^3.0.0",
    "postcss-scss": "^2.0.0",
    "precss": "^4.0.0",
    "razzle-plugin-scss": "^2.4.1",
    "source-map-support": "^0.5.11",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6"
  }
}

Please let me know if I'm doing something wrong, as I am very new to razzle
@gfcf14 gfcf14 mentioned this issue Mar 24, 2019
Closed
@gfcf14
Copy link
Author

gfcf14 commented Mar 25, 2019 •
edited
Loading

Ok @jaredpalmer I seem to have been able to circumvent the loader-utils error by installing node-sass, but I'm still getting the error with respect to razzle-dev-utils/prettyNodeErrors:

ERROR in /home/gfcf14/.cache/yarn/v4/npm-razzle-dev-utils-3.0.0-alpha.2-f01885e7bc17be207c59fecbb81b27491810c925/node_modules/razzle-dev-utils/webpackHotDevClient.js
✔ success server compiled in 2s 182ms

/home/gfcf14/Desktop/greendream-redesign/build/server.js:57564!(function webpackMissingModule() { var e = new Error("Cannot find module 'razzle-dev-utils/prettyNodeErrors'"); e.code = 'MODULE_N
OT_FOUND'; throw e; }());                                            ^
Error: Cannot find module 'razzle-dev-utils/prettyNodeErrors'    at webpackMissingModule (/home/gfcf14/Desktop/greendream-redesign/build/server.js:57564:45)
    at Object.0 (/home/gfcf14/Desktop/greendream-redesign/build/server.js:57564:153)
    at __webpack_require__ (/home/gfcf14/Desktop/greendream-redesign/build/webpack:/webpack/bootstrap:682:1)
    at /home/gfcf14/Desktop/greendream-redesign/build/webpack:/webpack/bootstrap:749:1
    at Object.<anonymous> (/home/gfcf14/Desktop/greendream-redesign/build/server.js:754:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15848:14)
    at Function.Module.runMain (module.js:693:10)

Still, apparently installing react-error-overlay takes care of the first error (before success server...), but I'm still getting the razzle-dev-utils/prettyNodeErrors:

Error: Cannot find module 'razzle-dev-utils/prettyNodeErrors'
    at webpackMissingModule (/home/gfcf14/Desktop/greendream-redesign/build/server.js:57564:45)
    at Object.0 (/home/gfcf14/Desktop/greendream-redesign/build/server.js:57564:153)
    at __webpack_require__ (/home/gfcf14/Desktop/greendream-redesign/build/webpack:/webpack/bootstrap:682:1)
    at /home/gfcf14/Desktop/greendream-redesign/build/webpack:/webpack/bootstrap:749:1
    at Object.<anonymous> (/home/gfcf14/Desktop/greendream-redesign/build/server.js:754:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at Function.Module._load (/home/gfcf14/Desktop/greendream-redesign/.pnp.js:15849:14)
    at Function.Module.runMain (module.js:693:10)

@gfcf14
Copy link
Author

gfcf14 commented Mar 26, 2019

@jaredpalmer what's the point or use for including the entry for razzle-dev-utils/prettyNodeErrors? Here is what the output of appConfig looks like:

{ mode: 'development',
  context: '/home/gfcf14/Desktop/greendream-redesign',
  target: 'web',
  devtool: 'cheap-module-source-map',
  resolve: 
   { modules: 
      [ 'node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules' ],
     extensions: [ '.mjs', '.jsx', '.js', '.json' ],
     alias: 
      { 'webpack/hot/poll': '/home/gfcf14/.cache/yarn/v4/npm-webpack-4.29.6-66bf0ec8beee4d469f8b598d3988ff9d8d90e955/node_modules/webpack/hot/poll.js',
        'react-native': 'react-native-web' } },
  resolveLoader: 
   { modules: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules',
        '/home/gfcf14/.cache/yarn/v4/npm-razzle-3.0.0-alpha.2-3443e4824ec0ca7f09720ce4a32663ef6e19aaec/node_modules/razzle/node_modules' ] },
  module: 
   { strictExportPresence: true,
     rules: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  plugins: 
   [ AssetsWebpackPlugin { options: [Object], writer: [Function: queuedWriter] },
     HotModuleReplacementPlugin {
       options: [Object],
       multiStep: true,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     DefinePlugin { definitions: [Object] },
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       _render: [Object],
       logUpdate: [Object] } ],
  entry: 
   { client: 
      [ '/home/gfcf14/.cache/yarn/v4/npm-razzle-dev-utils-3.0.0-alpha.2-f01885e7bc17be207c59fecbb81b27491810c925/node_modules/razzle-dev-utils/webpackHotDevClient.js',
        '/home/gfcf14/Desktop/greendream-redesign/src/client' ] },
  output: 
   { path: '/home/gfcf14/Desktop/greendream-redesign/build/public',
     publicPath: 'http://localhost:3001/',
     pathinfo: true,
     libraryTarget: 'var',
     filename: 'static/js/bundle.js',
     chunkFilename: 'static/js/[name].chunk.js',
     devtoolModuleFilenameTemplate: [Function: devtoolModuleFilenameTemplate] },
  devServer: 
   { disableHostCheck: true,
     clientLogLevel: 'none',
     compress: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
     historyApiFallback: { disableDotRule: true },
     host: 'localhost',
     hot: true,
     noInfo: true,
     overlay: false,
     port: 3001,
     quiet: true,
     watchOptions: { ignored: /node_modules/ },
     before: [Function: before] },
  optimization: {} }
{ mode: 'development',
  context: '/home/gfcf14/Desktop/greendream-redesign',
  target: 'node',
  devtool: 'cheap-module-source-map',
  resolve: 
   { modules: 
      [ 'node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules' ],
     extensions: [ '.mjs', '.jsx', '.js', '.json' ],
     alias: 
      { 'webpack/hot/poll': '/home/gfcf14/.cache/yarn/v4/npm-webpack-4.29.6-66bf0ec8beee4d469f8b598d3988ff9d8d90e955/node_modules/webpack/hot/poll.js',
        'react-native': 'react-native-web' } },
  resolveLoader: 
   { modules: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules',
        '/home/gfcf14/.cache/yarn/v4/npm-razzle-3.0.0-alpha.2-3443e4824ec0ca7f09720ce4a32663ef6e19aaec/node_modules/razzle/node_modules' ] },
  module: 
   { strictExportPresence: true,
     rules: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  node: { __console: false, __dirname: false, __filename: false },
  externals: [ [Function] ],
  output: 
   { path: '/home/gfcf14/Desktop/greendream-redesign/build',
     publicPath: 'http://localhost:3001/',
     filename: 'server.js',
     libraryTarget: 'commonjs2' },
  plugins: 
   [ DefinePlugin { definitions: [Object] },
     LimitChunkCountPlugin { options: [Object] },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     StartServerPlugin {
       options: [Object],
       afterEmit: [Function: bound afterEmit],
       apply: [Function: bound apply],
       startServer: [Function: bound startServer],
       worker: null },
     WatchIgnorePlugin { paths: [Array] },
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       _render: [Object],
       logUpdate: [Object] } ],
  entry: 
   [ 'razzle-dev-utils/prettyNodeErrors',
     'webpack/hot/poll?300',
     '/home/gfcf14/Desktop/greendream-redesign/src' ],
  watch: true }

which is inside of my razzle.config.js, for which I added a console.log:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  modify(baseConfig, { target, dev }, webpack) {
    const appConfig = Object.assign({}, baseConfig);

    appConfig.module.rules.push({
      resolve: {
        plugins: [
          PnpWebpackPlugin,
        ],
      },
    });

    console.log(appConfig);

    return appConfig;
  },
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    }
  ],
};

I wanted to try what would happen without it, so I used delete appConfig.entry to remove it and, while I got a few more errors and warnings that I solved myself, the error for Cannot find module 'razzle-dev-utils/prettyNodeErrors' disappeared and my program runs. Still, as I hit refresh on localhost:3000 I get this error:

TypeError: Cannot read property 'css' of undefined
    at /home/gfcf14/Desktop/greendream-redesign/build/webpack:/src/server.js:24:1
    at Layer.handle [as handle_request] (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/layer.js:95:5)
    at /home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/index.js:281:22
    at param (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/index.js:354:14)
    at param (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/index.js:365:14)
    at Function.process_params (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/index.js:410:3)
    at next (/home/gfcf14/.cache/yarn/v4/npm-express-4.16.4-fddef61926109e24c515ea97fd2f1bdbf62df12e/node_modules/express/lib/router/index.js:275:10)

so this would have to be an error with express-4.16.4 which is pre-included as a razzle dependency upon creating a project. Would this also have to do with the removal of the entry prop? Right now, my razzle.config.js looks like this:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);
const nodeExternals = require('webpack-node-externals');

module.exports = {
  modify(baseConfig, { target, dev }, webpack) {
    const appConfig = Object.assign({}, baseConfig);

    appConfig.module.rules.push({
      resolve: {
        plugins: [
          PnpWebpackPlugin,
        ],
      },
    });

    appConfig.resolveLoader.plugins = [
      PnpWebpackPlugin.moduleLoader(module),
    ];

    appConfig.node = {
      fs: 'empty',
    };

    appConfig.externals = [
      'express',
      nodeExternals(),
    ];

    delete appConfig.entry;

    return appConfig;
  },
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    }
  ],
};

and the output of appConfig looks like this:

{ mode: 'development',
  context: '/home/gfcf14/Desktop/greendream-redesign',
  target: 'web',
  devtool: 'cheap-module-source-map',
  resolve: 
   { modules: 
      [ 'node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules' ],
     extensions: [ '.mjs', '.jsx', '.js', '.json' ],
     alias: 
      { 'webpack/hot/poll': '/home/gfcf14/.cache/yarn/v4/npm-webpack-4.29.6-66bf0ec8beee4d469f8b598d3988ff9d8d90e955/node_modules/webpack/hot/poll.js',
        'react-native': 'react-native-web' } },
  resolveLoader: 
   { modules: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules',
        '/home/gfcf14/.cache/yarn/v4/npm-razzle-3.0.0-alpha.2-3443e4824ec0ca7f09720ce4a32663ef6e19aaec/node_modules/razzle/node_modules' ],
     plugins: [ [Object] ] },
  module: 
   { strictExportPresence: true,
     rules: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  plugins: 
   [ AssetsWebpackPlugin { options: [Object], writer: [Function: queuedWriter] },
     HotModuleReplacementPlugin {
       options: [Object],
       multiStep: true,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     DefinePlugin { definitions: [Object] },
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       _render: [Object],
       logUpdate: [Object] } ],
  output: 
   { path: '/home/gfcf14/Desktop/greendream-redesign/build/public',
     publicPath: 'http://localhost:3001/',
     pathinfo: true,
     libraryTarget: 'var',
     filename: 'static/js/bundle.js',
     chunkFilename: 'static/js/[name].chunk.js',
     devtoolModuleFilenameTemplate: [Function: devtoolModuleFilenameTemplate] },
  devServer: 
   { disableHostCheck: true,
     clientLogLevel: 'none',
     compress: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
     historyApiFallback: { disableDotRule: true },
     host: 'localhost',
     hot: true,
     noInfo: true,
     overlay: false,
     port: 3001,
     quiet: true,
     watchOptions: { ignored: /node_modules/ },
     before: [Function: before] },
  optimization: {},
  node: { fs: 'empty' },
  externals: [ 'express', [Function] ] }
{ mode: 'development',
  context: '/home/gfcf14/Desktop/greendream-redesign',
  target: 'node',
  devtool: 'cheap-module-source-map',
  resolve: 
   { modules: 
      [ 'node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules' ],
     extensions: [ '.mjs', '.jsx', '.js', '.json' ],
     alias: 
      { 'webpack/hot/poll': '/home/gfcf14/.cache/yarn/v4/npm-webpack-4.29.6-66bf0ec8beee4d469f8b598d3988ff9d8d90e955/node_modules/webpack/hot/poll.js',
        'react-native': 'react-native-web' } },
  resolveLoader: 
   { modules: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules',
        '/home/gfcf14/.cache/yarn/v4/npm-razzle-3.0.0-alpha.2-3443e4824ec0ca7f09720ce4a32663ef6e19aaec/node_modules/razzle/node_modules' ],
     plugins: [ [Object] ] },
  module: 
   { strictExportPresence: true,
     rules: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  node: { fs: 'empty' },
  externals: [ 'express', [Function] ],
  output: 
   { path: '/home/gfcf14/Desktop/greendream-redesign/build',
     publicPath: 'http://localhost:3001/',
     filename: 'server.js',
     libraryTarget: 'commonjs2' },
  plugins: 
   [ DefinePlugin { definitions: [Object] },
     LimitChunkCountPlugin { options: [Object] },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     StartServerPlugin {
       options: [Object],
       afterEmit: [Function: bound afterEmit],
       apply: [Function: bound apply],
       startServer: [Function: bound startServer],
       worker: null },
     WatchIgnorePlugin { paths: [Array] },
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       _render: [Object],
       logUpdate: [Object] } ],
  watch: true }

Also, is it weird that the client compiles more than once? I believe it would only compile once along with the server, but now it compiles five times (4 along with the server, and 1 above, before webpack's version, time and built are mentioned):

✔ success client compiled in 312ms
✔ success client compiled in 449ms
✔ success server compiled in 1s 603ms
✔ success client compiled in 113ms
✅  Server-side HMR Enabled!
🚀 started

@stale stale bot added the stale label May 25, 2019
@kyle-johnson
Copy link

kyle-johnson commented May 25, 2019 •
edited
Loading

This is effectively #896 which I'm struggling with as well.

This ought to work in most cases (it works on a bare bones create-razzle-app run), though my own setup seems to have some oddities:

const PnpWebpackPlugin = require("pnp-webpack-plugin");

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    const appConfig = Object.assign({}, config);

    appConfig.resolve.plugins = [PnpWebpackPlugin];

    appConfig.resolveLoader.plugins = [
      PnpWebpackPlugin.moduleLoader(module),
    ];

    return appConfig;
  },
};

You'll need to hoist webpack into your package.json to avoid errors with terser:
yarn add -D webpack

@stale stale bot removed the stale label May 25, 2019
@stale stale bot added the stale label Jul 24, 2019
@nimaa77 nimaa77 closed this as completed Mar 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gfcf14 @kyle-johnson @nimaa77