diff --git a/CHANGELOG.md b/CHANGELOG.md
index 359ab910f5f4..a906065883e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Fix binding to module-level variables ([#4086](https://github.com/sveltejs/svelte/issues/4086))
 * Disallow attribute/prop names from matching two-way-bound names or `{shorthand}` attribute/prop names ([#4325](https://github.com/sveltejs/svelte/issues/4325))
+* Fix code generation error with precedence of arrow functions ([#4384](https://github.com/sveltejs/svelte/issues/4384))
 
 ## 3.18.1
 
diff --git a/package-lock.json b/package-lock.json
index 2872c1b8ddd6..82af35d13f56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -597,9 +597,9 @@
       "dev": true
     },
     "code-red": {
-      "version": "0.0.32",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.0.32.tgz",
-      "integrity": "sha512-mE+EZc2vJ4HxiejW5S2CvcVDKtopFEmrqAd9DTBDLCNjLgxekPP8wLi/ZiwDTwZwwW3dzeetaubLaMlIvkhVNw==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.1.1.tgz",
+      "integrity": "sha512-2pEIyya4fxI9HxQcrl9dJl20+9He1nLeja50zkf7gK2OTTV9NpD3CgA74gzXnPqWv2zJpa6uXNSaE0haOCpOsw==",
       "dev": true,
       "requires": {
         "acorn": "^7.1.0",
diff --git a/package.json b/package.json
index ed70fd64b884..f5409046425d 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "acorn": "^7.1.0",
     "agadoo": "^1.1.0",
     "c8": "^5.0.1",
-    "code-red": "0.0.32",
+    "code-red": "0.1.1",
     "codecov": "^3.5.0",
     "css-tree": "1.0.0-alpha22",
     "eslint": "^6.3.0",
diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts
index 8fa36a91209a..fbb0c76d7d5d 100644
--- a/src/compiler/compile/render_dom/Renderer.ts
+++ b/src/compiler/compile/render_dom/Renderer.ts
@@ -197,7 +197,7 @@ export default class Renderer {
 
 		return filtered
 			.map(n => x`$$invalidate(${this.context_lookup.get(n).index}, ${n})`)
-			.reduce((lhs, rhs) => x`${lhs}, ${rhs}}`);
+			.reduce((lhs, rhs) => x`${lhs}, ${rhs}`);
 	}
 
 	dirty(names, is_reactive_declaration = false): Expression {
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 26fa4a70f81f..a7a55b884317 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -403,9 +403,9 @@ export default function dom(
 
 				${set && b`$$self.$set = ${set};`}
 
-				${capture_state && x`$$self.$capture_state = ${capture_state};`}
+				${capture_state && b`$$self.$capture_state = ${capture_state};`}
 
-				${inject_state && x`$$self.$inject_state = ${inject_state};`}
+				${inject_state && b`$$self.$inject_state = ${inject_state};`}
 
 				${injected.map(name => b`let ${name};`)}
 
diff --git a/src/compiler/compile/render_dom/invalidate.ts b/src/compiler/compile/render_dom/invalidate.ts
index 65fb73afc3b1..dc2850186339 100644
--- a/src/compiler/compile/render_dom/invalidate.ts
+++ b/src/compiler/compile/render_dom/invalidate.ts
@@ -67,7 +67,7 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 
 			if (head.subscribable && head.reassigned) {
 				const subscribe = `$$subscribe_${head.name}`;
-				invalidate = x`${subscribe}(${invalidate})}`;
+				invalidate = x`${subscribe}(${invalidate})`;
 			}
 
 			return invalidate;
diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
index 25c5312e651b..12b7fc2cef8f 100644
--- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -205,7 +205,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 
 					} else {
 						const #child_ctx = #ctx.slice();
-						${this.node.value && x`#child_ctx[${value_index}] = ${info}.resolved;`}
+						${this.node.value && b`#child_ctx[${value_index}] = ${info}.resolved;`}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);
@@ -219,7 +219,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 				block.chunks.update.push(b`
 					{
 						const #child_ctx = #ctx.slice();
-						${this.node.value && x`#child_ctx[${value_index}] = ${info}.resolved;`}
+						${this.node.value && b`#child_ctx[${value_index}] = ${info}.resolved;`}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index 7244d9203d55..eca6e9d325b5 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -97,7 +97,7 @@ export default class BindingWrapper {
 			const type = parent.node.get_static_attribute_value('type');
 
 			if (type === null || type === "" || type === "text" || type === "email" || type === "password") {
-				update_conditions.push(x`(${parent.var}.${this.node.name} !== ${this.snippet})`);
+				update_conditions.push(x`${parent.var}.${this.node.name} !== ${this.snippet}`);
 			}
 		}
 
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index ef330224027e..8894308fdf84 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -415,7 +415,7 @@ export default class ElementWrapper extends Wrapper {
 
 		const is = this.attributes.find(attr => attr.node.name === 'is');
 		if (is) {
-			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)});`;
+			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
 		}
 
 		return x`@element("${name}")`;
@@ -632,7 +632,7 @@ export default class ElementWrapper extends Wrapper {
 
 	add_this_binding(block: Block, this_binding: Binding) {
 		const { renderer } = this;
-		
+
 		renderer.component.has_reactive_assignments = true;
 
 		const binding_callback = bind_this(renderer.component, block, this_binding.node, this.var);
diff --git a/src/compiler/compile/render_dom/wrappers/MustacheTag.ts b/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
index b5ac6505f82f..ea6634ec803c 100644
--- a/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
@@ -17,7 +17,7 @@ export default class MustacheTagWrapper extends Tag {
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
 		const { init } = this.rename_this_method(
 			block,
-			value => x`@set_data(${this.var}, ${value});`
+			value => x`@set_data(${this.var}, ${value})`
 		);
 
 		block.add_element(
diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index c6ddde5da269..3b13e6c68a48 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -48,7 +48,7 @@ export default class RawMustacheTagWrapper extends Tag {
 
 			const { init } = this.rename_this_method(
 				block,
-				content => x`${html_tag}.p(${content});`
+				content => x`${html_tag}.p(${content})`
 			);
 
 			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
diff --git a/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts b/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
index 6dd38bfd2e33..f63782628045 100644
--- a/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
+++ b/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
@@ -12,9 +12,9 @@ export default function(node: AwaitBlock, renderer: Renderer, options: RenderOpt
 	const then = renderer.pop();
 
 	renderer.add_expression(x`
-		(function(__value) {
+		function(__value) {
 			if (@is_promise(__value)) return ${pending};
 			return (function(${node.value}) { return ${then}; }(__value));
-		}(${node.expression.node}))
+		}(${node.expression.node})
 	`);
 }
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index e0982a0415b6..6e6a61974a29 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -65,7 +65,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			}
 		});
 
-		renderer.add_expression(x`@spread([${args}], ${class_expression});`);
+		renderer.add_expression(x`@spread([${args}], ${class_expression})`);
 	} else {
 		let add_class_attribute = !!class_expression;
 		node.attributes.forEach(attribute => {
diff --git a/src/compiler/compile/render_ssr/handlers/Head.ts b/src/compiler/compile/render_ssr/handlers/Head.ts
index 456e5c279b59..cf1e6bd555bb 100644
--- a/src/compiler/compile/render_ssr/handlers/Head.ts
+++ b/src/compiler/compile/render_ssr/handlers/Head.ts
@@ -12,5 +12,5 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`($$result.head += ${result}, "")`);
+	renderer.add_expression(x`$$result.head += ${result}, ""`);
 }
diff --git a/src/compiler/compile/render_ssr/handlers/Title.ts b/src/compiler/compile/render_ssr/handlers/Title.ts
index f1f458ed5be0..c4c789718518 100644
--- a/src/compiler/compile/render_ssr/handlers/Title.ts
+++ b/src/compiler/compile/render_ssr/handlers/Title.ts
@@ -12,5 +12,5 @@ export default function(node: Title, renderer: Renderer, options: RenderOptions)
 	renderer.add_string(`</title>`);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`($$result.title = ${result}, "")`);
+	renderer.add_expression(x`$$result.title = ${result}, ""`);
 }