diff --git a/test-packages/embroider-app/ember-cli-build.js b/test-packages/embroider-app/ember-cli-build.js
index 82d010f..82dbb75 100644
--- a/test-packages/embroider-app/ember-cli-build.js
+++ b/test-packages/embroider-app/ember-cli-build.js
@@ -11,8 +11,12 @@ module.exports = function (defaults) {
 
   return compatBuild(app, Webpack, {
     staticAddonTestSupportTrees: true,
-    staticAddonTrees: true,
     staticHelpers: true,
-    // staticComponents: true,
+
+    // Due to runtime use of dynamic require(), we need staticAddonsTrees:false
+    // to preserve style modules in addons and staticComponents:false to
+    // preserve style modules in apps.
+    staticAddonTrees: false,
+    staticComponents: false,
   });
 };
diff --git a/test-packages/embroider-app/package.json b/test-packages/embroider-app/package.json
index f15e17f..f0024a5 100644
--- a/test-packages/embroider-app/package.json
+++ b/test-packages/embroider-app/package.json
@@ -56,6 +56,7 @@
     "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
+    "octane-addon": "link:../octane-addon",
     "prettier": "^2.3.2",
     "qunit": "^2.16.0",
     "qunit-dom": "^1.6.0",
diff --git a/test-packages/embroider-app/tests/integration/components/component-from-addon-test.js b/test-packages/embroider-app/tests/integration/components/component-from-addon-test.js
new file mode 100644
index 0000000..109868c
--- /dev/null
+++ b/test-packages/embroider-app/tests/integration/components/component-from-addon-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | from addon', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('MyMessageComponent renders with styles', async function (assert) {
+    await render(hbs`
+      <MyMessageComponent @error={{this.isError}} >
+        <div data-test-target></div>
+      </MyMessageComponent>
+    `);
+
+    assert.equal(
+      getComputedStyle(document.querySelector('[data-test-target]')).color,
+      'rgb(0, 102, 0)'
+    );
+    this.set('isError', true);
+    assert.equal(
+      getComputedStyle(document.querySelector('[data-test-target]')).color,
+      'rgb(204, 0, 0)'
+    );
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index b8f8af3..5649569 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3558,24 +3558,6 @@ broccoli-clean-css@^1.1.0:
     inline-source-map-comment "^1.0.5"
     json-stable-stringify "^1.0.0"
 
-broccoli-concat@^3.2.2:
-  version "3.7.5"
-  resolved "https://registry.yarnpkg.com/broccoli-concat/-/broccoli-concat-3.7.5.tgz#223beda8c1184252cf08ae020a3d45ffa6a48218"
-  integrity sha512-rDs1Mej3Ej0Cy5yIO9oIQq5+BCv0opAwS2NW7M0BeCsAMeFM42Z/zacDUC6jKc5OV5wiHvGTyCPLnZkMe0h6kQ==
-  dependencies:
-    broccoli-debug "^0.6.5"
-    broccoli-kitchen-sink-helpers "^0.3.1"
-    broccoli-plugin "^1.3.0"
-    ensure-posix-path "^1.0.2"
-    fast-sourcemap-concat "^1.4.0"
-    find-index "^1.1.0"
-    fs-extra "^4.0.3"
-    fs-tree-diff "^0.5.7"
-    lodash.merge "^4.6.2"
-    lodash.omit "^4.1.0"
-    lodash.uniq "^4.2.0"
-    walk-sync "^0.3.2"
-
 broccoli-concat@^4.2.4, broccoli-concat@^4.2.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/broccoli-concat/-/broccoli-concat-4.2.5.tgz#d578f00094048b5fc87195e82fbdbde20d838d29"
@@ -5891,10 +5873,10 @@ ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0, ember-co
     semver "^5.4.1"
 
 "ember-css-modules@link:packages/ember-css-modules":
-  version "1.6.0"
+  version "2.0.1"
   dependencies:
     broccoli-bridge "^1.0.0"
-    broccoli-concat "^3.2.2"
+    broccoli-concat "^4.2.5"
     broccoli-css-modules "^0.8.0"
     broccoli-funnel "^3.0.8"
     broccoli-merge-trees "^4.2.0"
@@ -5902,12 +5884,10 @@ ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0, ember-co
     debug "^4.3.2"
     ember-cli-babel "^7.26.6"
     ember-cli-htmlbars "^6.0.0"
-    ember-cli-version-checker "^2.1.0"
     ensure-posix-path "^1.0.2"
     hash-string "^1.0.0"
     lodash.merge "^4.6.1"
     postcss "^8.0.0"
-    semver "^7.3.5"
     toposort "^2.0.2"
 
 ember-data@~3.28.0:
@@ -7293,7 +7273,7 @@ fs-merger@^3.2.1:
     fs-tree-diff "^2.0.1"
     walk-sync "^2.2.0"
 
-fs-tree-diff@^0.5.2, fs-tree-diff@^0.5.3, fs-tree-diff@^0.5.4, fs-tree-diff@^0.5.6, fs-tree-diff@^0.5.7, fs-tree-diff@^0.5.9:
+fs-tree-diff@^0.5.2, fs-tree-diff@^0.5.3, fs-tree-diff@^0.5.4, fs-tree-diff@^0.5.6, fs-tree-diff@^0.5.9:
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/fs-tree-diff/-/fs-tree-diff-0.5.9.tgz#a4ec6182c2f5bd80b9b83c8e23e4522e6f5fd946"
   integrity sha512-872G8ax0kHh01m9n/2KDzgYwouKza0Ad9iFltBpNykvROvf2AGtoOzPJgGx125aolGPER3JuC7uZFrQ7bG1AZw==
@@ -9937,6 +9917,13 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+"octane-addon@link:test-packages/octane-addon":
+  version "0.0.0"
+  dependencies:
+    ember-cli-babel "^7.23.0"
+    ember-cli-htmlbars "^5.3.1"
+    ember-css-modules "link:packages/ember-css-modules"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -12876,7 +12863,7 @@ walk-sync@^0.2.5:
     ensure-posix-path "^1.0.0"
     matcher-collection "^1.0.0"
 
-walk-sync@^0.3.0, walk-sync@^0.3.1, walk-sync@^0.3.2, walk-sync@^0.3.3:
+walk-sync@^0.3.0, walk-sync@^0.3.1, walk-sync@^0.3.3:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.3.4.tgz#cf78486cc567d3a96b5b2237c6108017a5ffb9a4"
   integrity sha512-ttGcuHA/OBnN2pcM6johpYlEms7XpO5/fyKIr48541xXedan4roO8cS1Q2S/zbbjGH/BarYDAMeS2Mi9HE5Tig==