submodules not working in vendors

[mkrasuski]

while having in code something like

import { useState } from 'preact/hooks'

brunch finds and merges node_modules/preact/hooks/dist/hooks.js to vendor.js
but at runtime we've:

vendor.js:62 Uncaught Error: Cannot find module 'preact/hooks' from 'components/app.js'

looking at vendor.js we can see that problem may be caused by non-existent alias preact/hooks => node_modules/preact/hooks/dist/hooks.js

[clarknelson]

where is this node module being added to the vendor.js bundle?

[mkrasuski]

Here is my initialize.js - pretty straightforward

import { h, render } from 'preact'
import { useState } from 'preact/hooks'

const App = (props) => {
  const [val, setVal] = useState(true)
  return (<div>{val}</div>)
}

document.addEventListener('DOMContentLoaded', () => {
  render(<App />, document.querySelector('#app'))
})

Hope that this will show layout of vendor.js

$ grep -e require.register -e require.alias public/vendor.js

  require.alias = function(from, to) {
  require.register = require.define = function(bundle, fn) {
          require.register(key, bundle[key]);
require.register("preact-router/dist/preact-router.js", function(exports, require, module) {
require.register("preact/dist/preact.js", function(exports, require, module) {
require.register("preact/hooks/dist/hooks.js", function(exports, require, module) {
require.alias("preact/dist/preact.js", "preact");
require.alias("preact-router/dist/preact-router.js", "preact-router");require.register("___globals___", function(exports, require, module) {

and here it is debug log of brunch

$ brunch w -d 

  brunch:config Trying to load brunch-config +0ms
  brunch:plugins Loaded plugins: auto-reload-brunch, babel-brunch +0ms
  brunch:list Reading node_modules/auto-reload-brunch/vendor/auto-reload.js +0ms
  brunch:watch add package.json +0ms
  brunch:watch add brunch-config.js +0ms
  brunch:file Init file node_modules/auto-reload-brunch/vendor/auto-reload.js +0ms
  brunch:pipeline Compiling node_modules/auto-reload-brunch/vendor/auto-reload.js @ auto-reload-brunch +0ms
  brunch:pipeline Compiling node_modules/auto-reload-brunch/vendor/auto-reload.js @ babel-brunch +0ms
  brunch:file Generated source map for 'node_modules/auto-reload-brunch/vendor/auto-reload.js' +94ms
  brunch:list Compiled node_modules/auto-reload-brunch/vendor/auto-reload.js +101ms
  brunch:watch add app/initialize.js +98ms
  brunch:list Reading app/initialize.js +3ms
  brunch:file Init file app/initialize.js +3ms
  brunch:pipeline Compiling app/initialize.js @ auto-reload-brunch +96ms
  brunch:pipeline Compiling app/initialize.js @ babel-brunch +0ms
  brunch:watch add app/assets/index.html +38ms
  brunch:list Reading app/assets/index.html +38ms
  brunch:watch add app/components/App.js +0ms
  brunch:list Reading app/components/App.js +0ms
  brunch:watch add app/styles/application.css +0ms
  brunch:list Reading app/styles/application.css +0ms
  brunch:asset Init asset app/assets/index.html +0ms
  brunch:list Compiled app/assets/index.html +3ms
  brunch:file Init file app/components/App.js +42ms
  brunch:pipeline Compiling app/components/App.js @ auto-reload-brunch +42ms
  brunch:pipeline Compiling app/components/App.js @ babel-brunch +0ms
  brunch:file Init file app/styles/application.css +12ms
  brunch:list Compiled app/styles/application.css +13ms
  brunch:list Reading node_modules/preact/dist/preact.js +5ms
  brunch:list Reading node_modules/preact/hooks/dist/hooks.js +0ms
  brunch:file Generated source map for 'app/initialize.js' +6ms
  brunch:list Compiled app/initialize.js +1ms
  brunch:file Init file node_modules/preact/dist/preact.js +0ms
  brunch:file Init file node_modules/preact/hooks/dist/hooks.js +0ms
  brunch:list Compiled node_modules/preact/dist/preact.js +20ms
  brunch:list Reading node_modules/preact-router/dist/preact-router.js +6ms
  brunch:file Generated source map for 'app/components/App.js' +27ms
  brunch:list Compiled app/components/App.js +1ms
  brunch:file Init file node_modules/preact-router/dist/preact-router.js +0ms
  brunch:list Compiled node_modules/preact-router/dist/preact-router.js +9ms
  brunch:list Compiled node_modules/preact/hooks/dist/hooks.js +1ms
  brunch:write Writing 3/3 files +0ms
  brunch:generate Concatenating [node_modules/auto-reload-brunch/vendor/auto-reload.js, node_modules/preact-router/dist/preact-router.js, node_modules/preact/dist/preact.js, node_modules/preact/hooks/dist/hooks.js] => public/vendor.js +0ms
  brunch:generate Concatenating [app/components/App.js, app/initialize.js] => public/app.js +5ms
  brunch:generate Concatenating [app/styles/application.css] => public/app.css +1ms
  brunch:generate Writing public/vendor.js +0ms
  brunch:generate Writing public/vendor.js.map +1ms
  brunch:generate Writing public/app.js +0ms
  brunch:generate Writing public/app.js.map +1ms
  brunch:generate Writing public/app.css +0ms
  brunch:generate Writing public/app.css.map +0ms
  brunch:write Writing 1/1 assets, removing 0 +9ms
  brunch:generate Writing public/index.html +0ms
17:54:20 - info: compiled 7 files into 3 files, copied index.html in 569 ms

[clarknelson]

I see this line:

brunch:list Compiled node_modules/preact/hooks/dist/hooks.js +1ms

I'm not an expert but i'll help how ever I can, even just rubber duck...

Are you sure all of the compiled JS files are being included in the right order?

[mkrasuski]

Yes, but for all other modules brunch registers module by full resolved path and creates alias for this path using original require/import short name ('preact', 'preact-router'). But for import of preact/hooks brunch resolves the file and includes it in 'vendor.js' but does not create alias, and in runtime import of short name fails... Suspect that / in short name causes that... Maybe it assumes that import with slash is relative (direct) not searched... I'm not a fan of bundling parts of libs in subpaths but its quite common (preact/*, @babel/* and others).

Webpack is doing this fine...had no problems with /

list of register/alias in my vendor.js

$ grep -e require.register -e require.alias public/vendor.js

  require.alias = function(from, to) {
  require.register = require.define = function(bundle, fn) {
          require.register(key, bundle[key]);
require.register("preact-router/dist/preact-router.js", function(exports, require, module) {
require.register("preact/dist/preact.js", function(exports, require, module) {
require.register("preact/hooks/dist/hooks.js", function(exports, require, module) {
require.alias("preact/dist/preact.js", "preact");
require.alias("preact-router/dist/preact-router.js", "preact-router");require.register("___globals___", function(exports, require, module) {
``