0

I'm sharing some code between environments and in one environment a dependency isn't available - but that code isn't imported into the project and the module uses sideEffects: false - I'd think I should be able to build the project, but if I'm wrong, what am I misunderstanding about tree-shaking and sideEffects?

The error I get is like: Result of build attempt: Module not found: Error: Can't resolve 'unused-dep' in '...'

I'll break down the sample code into two parts:

  1. my-project - the main codebase into which I'm importing a function from my-module and building via webpack
  2. my-module - a module I've made that I'm trying to import a function from

https://webpack.js.org/guides/tree-shaking/ says that @babel/preset-env's default behavior can interfere, so I've already addressed that and other points in the documentation. I'm guessing I'm just misunderstanding the limitations?

my-project:

index.js

import { someFunc } from 'my-module'

someFunc();

my-module:

package.json

{
  "sideEffects": false,
  "name": "my-module",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "author": "",
  "license": "",
  "dependencies": {
    "unused-dep": "*"
  }
}

someFunc.js

const someFunc = () => {}

someOtherFunc.js

import { someDep } from 'unused-dep'
const someOtherFunc = () => { 
  someDep()
}

index.js

export * from './someFunc'
export * from './someOtherFunc'
Slbox
  • 10,957
  • 15
  • 54
  • 106
  • 1
    If `someOtherFunc.js` doesn't export anything, then why not change `index.js` to `import './someOtherFunc'`? Basically, I think the issue is that `export * from` is preventing your tree shaking. – Patrick Roberts Nov 11 '19 at 21:52
  • 1
    The other thing is, if `someOtherFunc.js` is dependent on environment, then it shouldn't be statically imported, it should be dynamically `import()`'ed – Patrick Roberts Nov 11 '19 at 21:55
  • @PatrickRoberts thanks for your reply. If the actual situation was as simple as my example it would make sense to simply import the specific file, but the issue is I've got hundreds of files. I'm not aware of dynamic importing in ES6, but only use of `require`. As I understand it, using `require` breaks tree-shaking. – Slbox Nov 11 '19 at 22:05
  • [Dynamic Imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports). It also concerns me that you have "hundreds" of files whose existence are platform-specific. Typically they would be blank files on unsupported platforms, or any dependent that is not platform-specific would dynamically import the platform-specific dependencies and internally deal with resolution errors rather than propagating them up the module resolution chain. – Patrick Roberts Nov 11 '19 at 22:48
  • Thanks for the link on Dynamic Imports. I should clarify that I don't have hundreds of platform dependent files, but a handful (more than 10 though) out of hundreds that *are* actually platform dependent. We do use mock files internally, but it's very tedious if there are 3rd party node modules involved, but that raises an interesting idea that since the code is dead, I could perhaps resolve all the dependencies not used on that platform at the webpack level to some mock dependency. – Slbox Nov 12 '19 at 00:32
  • 1
    in my case I was trying to setup an isomorphic library and webpack was complaining about the lack of node modules, like `fs` etc., on the frontend build. I managed to solve it with the [browser field](https://github.com/webpack/webpack/issues/4674#issuecomment-355853969) – Cadell Christo Apr 14 '22 at 10:16

0 Answers0