Changed files are not recompiled on save

[alonewarrior]

Hey, I've been using this plugin for a short while now and in the older versions I never had much issue with compilation on file change. As of recently, though, changed files will not be compiled and added to the application without restarting the whole server. It gets to be rather troublesome when I just want to make minor changes but it requires a server restart to happen. I'm not sure if it's something I'm doing wrong or if there's a bug in the compiler.

Here's a copy of my tsconfig.json:

{
    "compilerOptions": {
        "target": "es2017",
        "allowJs": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitThis": true,
        "noEmitOnError": false,
        "noEmit": true,
        "inlineSourceMap": true,
        "inlineSources": true,
        "baseUrl": ".",
        "module": "es6",
        "paths": {
            "my-app/tests/*": [
                "tests/*"
            ],
            "my-app/mirage/*": [
                "mirage/*"
            ],
            "my-app/*": [
                "app/*"
            ],
            "*": [
                "types/*"
            ]
        }
    },
    "include": [
        "app",
        "tests",
        "types",
        "mirage"
    ]
}

Here's the console output after a change:

file added pods\components\nav-search-bar\component.ts___jb_tmp___
file deleted pods\components\nav-search-bar\component.ts
file added pods\components\nav-search-bar\component.ts___jb_old___
file deleted pods\components\nav-search-bar\component.ts___jb_tmp___
file added pods\components\nav-search-bar\component.ts
file deleted pods\components\nav-search-bar\component.ts___jb_old___
14:45:48 - File change detected. Starting incremental compilation...


14:45:49 - Compilation complete. Watching for file changes.

Build successful (10566ms) – Serving on http://localhost:4200/



Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
broccoli-typescript-compiler (1)              | 3022ms
AssetRewrite (2)                              | 2070ms (1035 ms)
Fingerprint (2)                               | 1128ms (564 ms)

And here's yet another console output, but this one has an additional line (surrounded by *) that I'm not entirely sure about:

file added pods\components\nav-search-bar\component.ts___jb_tmp___
file deleted pods\components\nav-search-bar\component.ts
file added pods\components\nav-search-bar\component.ts___jb_old___
file added pods\components\nav-search-bar\component.ts
file deleted pods\components\nav-search-bar\component.ts___jb_tmp___
file deleted pods\components\nav-search-bar\component.ts___jb_old___
14:46:58 - File change detected. Starting incremental compilation...


14:46:58 - Compilation complete. Watching for file changes.
****file changed tsc-delayed-rebuild****

Build successful (10834ms) – Serving on http://localhost:4200/



Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
AssetRewrite (2)                              | 2976ms (1488 ms)
broccoli-typescript-compiler (1)              | 2855ms
Fingerprint (2)                               | 1106ms (553 ms)
SassCompiler (1)                              | 560ms

Whenever I make changes, the console tells me that it's watching for file changes and will reload the page, but none of the changes are picked up. Let me know if any more information is needed.

[chriskrycho]

Hi @alonewarrior – thanks so much for the writeup of the report, and I’m sorry you’ve been having that problem. Super frustrating.

As for the problem details… interesting. I wonder if (but would be surprised if) it’s something to do with use of pods. 🤔 In my own non-pods app (~35k LoC in TS at this point), I’ve had zero problems with needing restarts this way, but I’m also pretty sure @dfreeman is using pods.

Can you share:

• Ember version
• Ember CLI version
• ember-cli-typescript version
• ember-cli-build.js contents

Alternatively, if you can put together a minimal reproduction, that would be amazing.

Sorry again you’re having these issues, and hopefully we can help you get them sorted out!

[chriskrycho]

I wouldn’t think this woulid be the problem, but you might also try disabling your JetBrains IDE’s “safe write” option and see if that helps. That’s the only thing I see in your output that seems like it might be confusing TS in some way. Also, if the IDE currently has its own TypeScript compilation enabled, you should disable that.

[alonewarrior]

@chriskrycho I'm using:
Ember: 3.0.0
Ember-cli: 3.0.0
Ember-cli-typescript: 1.1.6

And my ember-cli-build.js contents are:

'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
        // sourcemaps: {
        //     enabled: EmberApp.env() !== "production",
        //     extensions: ['js']
        // },
        fingerprint: {
            enabled: true,
            exclude: ['assets/images']
        },
        outputPaths: {
            app: {
                css: {
                    'app': '/assets/css/my-app.css'
                },
                js: '/assets/js/my-app.js'
            },
            vendor: {
                css: '/assets/css/vendor.css',
                js: '/assets/js/vendor.js'
            }
        }
    });

    // Use `app.import` to add additional libraries to the generated
    // output files.
    //
    // If you need to use different assets in different
    // environments, specify an object as the first parameter. That
    // object's keys should be the environment name and the values
    // should be the asset to use in that environment.
    //
    // If the library that you are including contains AMD or ES6
    // modules that you would like to import into your application
    // please specify an object with the list of modules as keys
    // along with the exports of each module as its value.

    app.import('bower_components/bootstrap/dist/css/bootstrap.css');
    app.import('bower_components/bootstrap/dist/css/bootstrap-theme.css');
    app.import('bower_components/bootstrap/dist/js/bootstrap.js');
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', {destDir: 'assets/fonts'});
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', {destDir: 'assets/fonts'});
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', {destDir: 'assets/fonts'});
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {destDir: 'assets/fonts'});
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {destDir: 'assets/fonts'});
    app.import('bower_components/tracking/build/tracking-min.js');
    app.import('bower_components/tracking/build/data/face-min.js');
    app.import('bower_components/tracking/build/data/eye-min.js');
    app.import('bower_components/tracking/build/data/mouth-min.js');

    app.import('vendor/fontAwesome/fonts/fontawsome-webfont.eot', {destDir: 'assets/fonts'});
    app.import('vendor/fontAwesome/fonts/fontawsome-webfont.svg', {destDir: 'assets/fonts'});
    app.import('vendor/fontAwesome/fonts/fontawsome-webfont.ttf', {destDir: 'assets/fonts'});
    app.import('vendor/fontAwesome/fonts/fontawsome-webfont.woff', {destDir: 'assets/fonts'});
    app.import('vendor/fontAwesome/fonts/fontawsome-webfont.woff2', {destDir: 'assets/fonts'});
    app.import('vendor/fontAwesome/fonts/FontAwesome.otf', {destDir: 'assets/fonts'});
    app.import('vendor/fontAwesome/css/font-awesome.css');
    app.import('vendor/closeBootstrapMenu.js');

    return app.toTree();
};

What was really interesting was that I tried turning off the "safe write" feature and it started working! So, it seems that it's attempting to compile before the file has been updated. This would also explain why occasionally it WOULD work, but then suddenly stop working, with it not working a vast majority of the time. I haven't tested it fully yet, but that seems to be what's causing it.

Might there be a way to configure a minor delay on the build for these instances for those like me who seem to be having this issue? I'm not sure what else to suggest since I'm a little wary about running Webstorm without "safe write". Or, maybe there's another config option that I may have overlooked that would prevent me from turning it off and also from having to have a minor delay? Who knows...

[alonewarrior]

@chriskrycho Actually...it seems that that DIDN'T fix it... It sort of worked for a little bit, but then I restarted my server and it stopped working again.

[chriskrycho]

Curious.

In a way I’m glad that’s not the problem, as I don’t know of a way we could introduce a reliable workaround for it.

[For what it’s worth, I’ve never actually used that feature in WebStorm/etc. (though I’ve been using JetBrains IDEs for the better part of a decade), and have also never had a problem; nor have I ever lost a meaningful amount of work from a crash while using any other editor – as long as you’re not working for loooong stretches without saving, are using version control, etc., I think you should be fine without it.]

Can you see if you have the same problem using another editor, e.g. VS Code or Atom? That would at least let us narrow down to whether it’s something specific to JetBrains IDEs (even if not “safe write”) vs. a general problem with the addon we just haven’t seen before.

[alonewarrior]

@chriskrycho It seems that it might be an editor issue. I opened it up in Vim and TextEdit and when I saved, the changes were immediately picked up, compiled, and presented in the browser. Now I need to figure out why Webstorm is being dumb. In a way, I'm glad to know that it isn't the package, but this is just so strange!

[alonewarrior]

@chriskrycho What's really strange is that I turned "safe write" back on and it's working with Webstorm again. I'm not sure how long that'll last, and I'm not really willing to push it too much, but this is just so strange.

[chriskrycho]

Weird! I’m closing since it seems to be editor-specific, but if you’re ever able to identify the specific problem, and especially a specific workaround, please comment here so we can add it to the docs!