Error: ENOENT: no such file or directory squeezebox/index.js

[Hugo Heneault]

I've installed squeezebox with npm, imported it in my app.module.ts and now I have this error when I run in my browser.

Module build failed: Error: ENOENT: no such file or directory, open '......./node_modules/squeezebox/index.js'

I'm using ionic3.4.2.

Any ideas?

[Alejandro Soto]

Hi @HugoHeneault can you please paste how you are importing the module, also would be helpful node and npm versions ? can you check that index.js file inside that directory ? it seems like your config is looking the npm deps from other directory

[Hugo Heneault]

Hi @asotog ! Thanks a lot for your blazing fast reply. :))
I don't have any .js files in my node_modules folder.

ls -la node_modules/squeezebox                                                           
drwxr-xr-x   14 hugo  staff    476  9 aoû 16:41 .
drwxr-xr-x  701 hugo  staff  23834  9 aoû 16:26 ..
-rw-r--r--@   1 hugo  staff   6148  9 aoû 16:41 .DS_Store
-rw-r--r--    1 hugo  staff     58 16 mar  2016 .editorconfig
-rw-r--r--    1 hugo  staff     63 15 mar  2016 .npmignore
drwxr-xr-x    3 hugo  staff    102  4 mai 06:57 .vscode
-rw-r--r--    1 hugo  staff   2834 28 avr 05:11 README.md
drwxr-xr-x    6 hugo  staff    204  9 aoû 16:26 components
-rw-r--r--    1 hugo  staff    706 30 sep  2016 index.ts
-rw-r--r--    1 hugo  staff   2913  9 aoû 16:26 package.json
-rw-r--r--    1 hugo  staff  86563 17 mar  2016 screenshot-1.png
-rw-r--r--    1 hugo  staff   1078  8 fév 19:23 styles.css
drwxr-xr-x    5 hugo  staff    170  9 aoû 16:26 tests
-rw-r--r--    1 hugo  staff    289 22 avr 03:45 tsconfig.json

[Hugo Heneault]

I'm using npm 4.2.0 and node 7.10.1.

Here's how I'm importing the component:

In my AppModule:

// many other imports
import { SqueezeBoxModule } from 'squeezebox/index';

@NgModule(
  {
    declarations: [
      myApp
    ],
    imports: [
      BrowserModule,
      IonicModule.forRoot(myApp),
      IonicStorageModule.forRoot(),
      HttpModule,
      SqueezeBoxModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [myApp],
    providers: [
      StatusBar,
      SplashScreen,
      DataService
    ]
  })

export class AppModule {
  constructor() {
  }
}

[Alejandro Soto]

Looks fine, seems like typescript files not getting compiled, can you please paste your tsconfig.json, i tested the module with angular cli it worked fine, on tsconfig.json if does not have any exclusion on node_modules maybe ionic is excluding the node_modules

[Hugo Heneault]

Here is my tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "www",
    ".history"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

node_modules is excluded. I'll try later if removing it from there is changing aynthing.

[Hugo Heneault]

Ok, thanks for your help. When removing node_modules from tsconfig.json it started working again.

That's the first time I got an issue like this on a plugin. Is it normal not to provide a non compiled version on npm (I don't know)?

Thanks for your work!