Fixture file import path error

[benkeen]

Hi! Just trying to understand how to get monosize working.

The fixture file example in the README imports the dist code by importing from the package name itself. When I try running it, I get Module not found: Error: Can't resolve '[package name]'. I also tried switching that out with importing directly from '../dist` instead but get the same error about being unable to resolve the path.

Debugging it, when I console.log the webpack config (the config value in bundler: webpackBundler(config => {) , I see the following:

{
  name: 'client',
  target: 'web',
  mode: 'production',
  cache: { type: 'memory' },
  externals: { react: 'React', 'react-dom': 'ReactDOM' },
  entry: '/full/path/to/packageX/dist/bundle-size/TestComponent.fixture.js',
  output: {
    filename: 'TestComponent.output.js',
    path: '/full/path/to/packageX/dist/bundle-size',
    pathinfo: true
  },
  performance: { hints: false },
  optimization: { minimizer: [], minimize: false },
  stats: { optimizationBailout: true }
}

Note the extra "dist" in the entry path - that's incorrect. Any tips? I can override, of course, but presumably I'm doing something wrong.

[layershifter]

@benkeen monosize expects to be executed against your build artifacts i.e. results of npm run build (yarn build of a package).

The typical package.json:

{
  "name": "@foo/react-pkg",
  "version": "1.0.0",
  "module": "./dist/index.js",
  "scripts": {
    "build": "..."
  }
}

The typical workflow (I will use yarn for simplicity):

• yarn workspace @foo/react-pkg build
• yarn workspace monosize measure
  • Bundler in monosize will bundle artifacts i.e. ./dist/index.js

The error that you're seeing might happen because yarn build was not called.

---

I prepared fully configured Stackblitz: https://stackblitz.com/edit/stackblitz-starters-qd5ddp

You need to run:

• yarn workspace test-foo build
• yarn workspace test-foo bundle-size

If build won't be called first:

ModuleNotFoundError: Module not found: Error: Can't resolve 'test-foo' in '/home/projects/stackblitz-starters-qd5ddp/packages/foo/dist/bundle-size'
error Command failed with exit code 1.

[benkeen]

Thanks @layershifter! Yes it has been built. We got it to work by entering a (seemingly) invalid import path in the fixture file. So with this structure:

/dist
/src/components/MyComponent
/bundle-size/MyComponent.fixture.js
package.json

... we entered: import { MyComponent } from "../components/MComponent"; in the fixture file - that relative path is actually wrong from the viewpoint of the bundle-size/ folder, (it should be "../src/components/MyComponent"). But it seems that monosize copies that into fixture file into dist/bundle-size/ before running it - and the build artifacts are correct relative to that location. So that allows it to work.

I couldn't get it to run using the package name in the import line. Presumably it requires a main/module property in package.json, but even that didn't seem to help. I'm going to look again today.

Anyway, thanks!

[layershifter]

... we entered: import { MyComponent } from "../components/MComponent"; in the fixture file - that relative path is actually wrong from the viewpoint of the bundle-size/ folder, (it should be "../src/components/MyComponent"). But it seems that monosize copies that into fixture file into dist/bundle-size/ before running it - and the build artifacts are correct relative to that location. So that allows it to work.

I would expect to use import { MyComponent } from "my-pkg", then you won't need relative paths.

I couldn't get it to run using the package name in the import line. Presumably it requires a main/module property in package.json, but even that didn't seem to help. I'm going to look again today.

Please check main/module & exports fields, they control the resolution process.

[layershifter]

@benkeen looks like that the issue was resolved, correct? Closing it then.

[benkeen]

I actually haven't returned to this aspect yet, but if it's still an issue I can re-post. Thanks!

[benkeen]

(Finally!) returned to this today. Just for anyone else encountering this, I spent some time experimenting and the only way I managed to get the package content to self-reference was to do what fluent UI itself does: adding in explicit exports into the package.json. Minimally it can be done like so:

{
   ... 
   "exports": {
     "./dist/*": "./dist/*"
   }
}

The main and module entries didn't pan out. Now in my fixture file I can reference the file inside the same package (my-package-name):

import { MyComponent } from 'my-package-name/dist/components/subfolder/MyComponent';