-
Notifications
You must be signed in to change notification settings - Fork 152
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.
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
[hold] upgrade: Webpack 5 #6496
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import jade from "jade" | ||
import path from "path" | ||
import { first, isArray } from "lodash" | ||
|
||
type RenderOptions = { | ||
basePath?: string, | ||
compilerOptions?: object, | ||
locals?: object, | ||
} | ||
|
||
export default function renderTemplate(templates: string, options: RenderOptions): string; | ||
export default function renderTemplate(templates: string[], options: RenderOptions): string[]; | ||
export default function renderTemplate(templates: string | string[], options: RenderOptions = {}): string | string[] { | ||
const normalizedTemplates = isArray(templates) ? templates : [templates] | ||
|
||
const { basePath = "", compilerOptions = {}, locals = {} } = options | ||
|
||
const templateFns = normalizedTemplates.map(file => { | ||
return jade.compileFile(path.join(basePath, file), compilerOptions) as (obj: any) => string | ||
}) | ||
|
||
const renderedTemplates = templateFns.map(template => template(locals)) | ||
|
||
// If user only passed in a single template, return a single template | ||
const out = | ||
renderedTemplates.length > 1 ? renderedTemplates : first(renderedTemplates) | ||
|
||
return out | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -60,11 +60,13 @@ export const clientCommonConfig = { | |
}, | ||
], | ||
}, | ||
// ESM support. See: https://github.com/apollographql/react-apollo/issues/1737#issuecomment-371178602 | ||
// Required for webpack 5 to allow interop with with non-ESM modules is handled. | ||
// TODO: This may be removed once all dependant references to @babel/runtime-corejs3 are removed. | ||
{ | ||
type: "javascript/auto", | ||
test: /\.mjs$/, | ||
use: [], | ||
test: /\.m?js/, | ||
resolve: { | ||
fullySpecified: false, | ||
}, | ||
}, | ||
], | ||
}, | ||
|
@@ -75,20 +77,13 @@ export const clientCommonConfig = { | |
}, | ||
}), | ||
// Remove moment.js localization files | ||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), | ||
new webpack.IgnorePlugin({ | ||
resourceRegExp: /^\.\/locale$/, | ||
contextRegExp: /moment$/, | ||
}), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this was added due to how |
||
// Remove server-only modules from client bundles | ||
...[ | ||
// Remove server side of relay network layer. | ||
new webpack.IgnorePlugin( | ||
/^react-relay-network-modern-ssr\/node8\/server/ | ||
), | ||
// No matter what, we don't want the graphql-js package in client | ||
// bundles. This /may/ lead to a broken build when e.g. a reaction | ||
// module that's used on the client side imports something from | ||
// graphql-js, but that's better than silently including this. | ||
new webpack.IgnorePlugin(/^graphql(\/.*)?$/), | ||
], | ||
new webpack.NamedModulesPlugin(), | ||
// TODO: Why would these end up in the client bundle? | ||
new webpack.IgnorePlugin({ resourceRegExp: /^graphql(\/.*)?$/ }), | ||
new webpack.ProvidePlugin({ | ||
$: "jquery", | ||
jQuery: "jquery", | ||
|
@@ -135,6 +130,11 @@ export const clientCommonConfig = { | |
// Symlink issues should be fixed via `yarn --pnp` | ||
modules: [path.resolve(basePath, "src"), "node_modules"], | ||
symlinks: false, | ||
fallback: { | ||
path: false, | ||
os: require.resolve("os-browserify/browser"), | ||
buffer: require.resolve("buffer/"), | ||
}, | ||
}, | ||
optimization: { | ||
// Extract webpack runtime code into it's own file | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,12 +4,8 @@ const chalk = require("chalk") | |
const fs = require("fs") | ||
const path = require("path") | ||
const webpack = require("webpack") | ||
const ForkTsCheckerNotifierWebpackPlugin = require("fork-ts-checker-notifier-webpack-plugin") | ||
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin") | ||
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin") | ||
const WebpackNotifierPlugin = require("webpack-notifier") | ||
const SimpleProgressWebpackPlugin = require("simple-progress-webpack-plugin") | ||
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin") | ||
const { basePath, env } = require("../utils/env") | ||
|
||
const cacheDirectory = path.resolve(basePath, ".cache") | ||
|
@@ -18,7 +14,7 @@ if (!env.onCi && !fs.existsSync(cacheDirectory)) { | |
console.log( | ||
chalk.yellow( | ||
"\n[!] No existing `.cache` directory detected, initial " + | ||
"launch will take a while.\n" | ||
"launch will take a while.\n" | ||
) | ||
) | ||
} | ||
|
@@ -56,29 +52,13 @@ export const clientDevelopmentConfig = { | |
], | ||
}, | ||
plugins: [ | ||
new CaseSensitivePathsPlugin(), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was recently added because it helped us track down a very pesky case sensitive bug. Why remove? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If all of the following removals are due to plugin compat, we should comment them out with a
unless there are comparable built-in webpack features we can leverage. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Would you explain the particular bug in more detail or provide a link to it? I am intimately familiar with Apples case-insensitive file system and the many issues that it creates in particular when renaming files in git. However git has options to address this already and wonder if we could instead leverage those. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. #6462 was the issue that prompted this — I had downcased a folder name accidentally against convention, but imports would work locally with alternate casing. I'd very much like to be warned about this, regardless of where it happens. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. (Er, that's not the issue but rather the fix) |
||
new webpack.HotModuleReplacementPlugin(), | ||
// @ts-ignore | ||
new SimpleProgressWebpackPlugin({ | ||
format: "compact", | ||
}), | ||
new ForkTsCheckerWebpackPlugin({ | ||
formatter: "codeframe", | ||
formatterOptions: "highlightCode", | ||
checkSyntacticErrors: true, | ||
watch: ["./src"], | ||
}), | ||
new ForkTsCheckerNotifierWebpackPlugin({ | ||
excludeWarnings: true, | ||
skipFirstNotification: true, | ||
}), | ||
new FriendlyErrorsWebpackPlugin({ | ||
clearConsole: false, | ||
compilationSuccessInfo: { | ||
messages: [`[Force] Listening on http://localhost:${env.port} \n`], | ||
notes: [""], | ||
}, | ||
}), | ||
new WebpackNotifierPlugin(), | ||
], | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might be a good idea to extract these babel updates into their own PR if we can easily isolate.