preactjs / preact-cli

😺 Your next Preact PWA starts in 30 seconds.
MIT License
4.69k stars 375 forks source link

Using config recipe for dev server proxy breaks production build #1607

Closed DeanPDX closed 3 years ago

DeanPDX commented 3 years ago

What is the current behaviour? When you try to create a production build, you get the following error:

× ERROR Error: TypeError: Cannot set property 'proxy' of undefined
    at default (C:\project-dir\preact.config.js:5:26)
    at module.exports (C:\project-dir\node_modules\preact-cli\lib\lib\webpack\transform-config.js:118:10)
    at async prodBuild (C:\project-dir\node_modules\preact-cli\lib\lib\webpack\run-webpack.js:87:2)
    at async command (C:\project-dir\node_modules\preact-cli\lib\commands\build.js:100:14)
    at module.exports (C:\project-dir\node_modules\preact-cli\lib\lib\webpack\transform-config.js:129:10)
    at async prodBuild (C:\project-dir\node_modules\preact-cli\lib\lib\webpack\run-webpack.js:87:2)
    at async command (C:\project-dir\node_modules\preact-cli\lib\commands\build.js:100:14)

Steps to Reproduce

  1. Create a preact app using preact-cli.
  2. Use this config recipe verbatim.
  3. Try to do a production build by running npm run build.

What is the expected behaviour? I would expect the config recipe to not break my production build.

Fixing my production build To fix my build, I checked for the existence of the devServer before attempting to set the proxy config:

export default (config, env, helpers) => {
  // Only set up proxy if dev server exists
  if (config.devServer) {
    console.log('Setting dev server proxy settings');
    config.devServer.proxy = [
      {
        path: '/api/**',
        target: 'http://localhost:8090/',
      }
    ];
  }
}

I thought about checking env.dev instead. However, I wasn't sure if:

  1. You could run in development environment without having a devServer.
  2. Other environments might have a devServer and need config (in that case, I guess you could make the argument that you might want a different proxy config, however).

Proposed solution Is it worth updating the docs? I would be happy to submit a pull request if so. And is it more correct to check for env.dev or just the existence of config.devServer?

rschristian commented 3 years ago

Ah, good catch! I'd say check !env.isProd, personally.

Right now there is no way to run preact-cli in dev without the dev server, though that has been requested and there have been a few attempts at fulfilling it. Leaving that possibility open without the wiki requiring future edits would be nice.

config is the webpack config itself, and I'd probably suggest straying away from reading that for conditionals when env covers your needs.

Definitely worth updating if you want to do it. It's a GitHub wiki, so no PRs needed. You can just edit the document

DeanPDX commented 3 years ago

Definitely worth updating if you want to do it. It's a GitHub wiki, so no PRs needed. You can just edit the document

Done. I included a comment to try to explain why we are checking environment as well. Thanks for getting back to me so quickly.

rschristian commented 3 years ago

Awesome, thanks for adding!

Good call on the extra comment