Laravel-mix: Watcher errors with ts-loader on file change

Created on 22 Dec 2018  路  4Comments  路  Source: JeffreyWay/laravel-mix

Laravel Mix Version: 4.0.12
Node Version: 11.5.0
NPM Version: 6.4.1
OS: Ubuntu 18.10

Description:

When using yarn run watch, the following error is produced after editing a file:

/~omitted~/Site/node_modules/ts-loader/dist/watch-run.js:18
        var times = watching.compiler.fileTimestamps;
                                      ^

TypeError: Cannot read property 'fileTimestamps' of undefined
    at /~omitted~/Site/node_modules/ts-loader/dist/watch-run.js:18:39
    at _err0 (eval at create (/~omitted~/Site/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:21:1)
    at compiler.plugin (/~omitted~/Site/node_modules/browser-sync-webpack-plugin/lib/BrowserSyncPlugin.js:24:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/~omitted~/Site/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/~omitted~/Site/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/~omitted~/Site/node_modules/webpack/lib/Watching.js:40:32)
    at Watching._invalidate (/~omitted~/Site/node_modules/webpack/lib/Watching.js:165:9)
    at watcher.compiler.watchFileSystem.watch (/~omitted~/Site/node_modules/webpack/lib/Watching.js:136:10)
    at Watchpack.watcher.once (/~omitted~/Site/node_modules/webpack/lib/node/NodeWatchFileSystem.js:59:4)
    at Object.onceWrapper (events.js:277:13)
    at Watchpack.emit (events.js:189:13)
    at Watchpack._onTimeout (/~omitted~/Site/node_modules/watchpack/lib/watchpack.js:144:7)
    at listOnTimeout (timers.js:324:15)
    at processTimers (timers.js:268:5)

Steps To Reproduce:

Occurred after upgrading to Laravel Mix 4.
The following configuration is used:

let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');

mix.ts('resources/ts/app.ts', 'public')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: true,
        postCss: [tailwindcss('tailwind.js')]
    })
    .disableNotifications()
    .browserSync({
        proxy: 'customer.local',
        notify: false
    });

if (mix.inProduction()) {
    mix.version();
}

mix.webpackConfig({
    output: {
        publicPath: '/',
        chunkFilename: 'js/[name].js'
    }
});

All packages are up-to-date.

Most helpful comment

ts loader 3 does not support webpack v4.

https://github.com/TypeStrong/ts-loader/releases/tag/v4.0.0

All 4 comments

Share your package.json file contents here

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@websanova/vue-auth": "^2.21.14-beta",
        "apollo-cache-inmemory": "^1.2.7",
        "apollo-client": "^2.3.8",
        "apollo-link": "^1.2.2",
        "apollo-link-context": "^1.0.9",
        "apollo-link-http": "^1.5.4",
        "axios": "^0.18.0",
        "babel-preset-env": "^1.6.1",
        "browser-sync": "^2.24.5",
        "browser-sync-webpack-plugin": "2.0.1",
        "cross-env": "^5.1",
        "graphql": "^0.13.2",
        "graphql-tag": "^2.9.2",
        "ionicons": "^4.2.4",
        "laravel-mix": "^4.0.0",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "7.*",
        "tailwindcss": "^0.5.3",
        "ts-loader": "^3.5.0",
        "typescript": "^3.1.3",
        "vue-apollo": "^3.0.0-beta.19",
        "vue-axios": "^2.1.3",
        "vue-bus": "^1.1.0",
        "vue-class-component": "^6.2.0",
        "vue-i18n": "^8.0.0",
        "vue-js-modal": "^1.3.26",
        "vue-moment-lib": "^1.1.1",
        "vue-promise-btn": "^1.1.0",
        "vue-property-decorator": "^6.0.0",
        "vue-router": "^3.0.1",
        "vue-template-compiler": "^2.5.21",
        "vue-ts-loader": "^0.0.3",
        "vue-typescript-import-dts": "^4.0.0",
        "vuex": "^3.0.1"
    },
    "dependencies": {
        "global": "^4.3.2",
        "moment": "^2.22.2",
        "tslint": "^5.11.0"
    }
}

ts loader 3 does not support webpack v4.

https://github.com/TypeStrong/ts-loader/releases/tag/v4.0.0

Yes, that was it!
Didn't look at ts-loader, since the initial compilation worked fine. Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Bomavi picture Bomavi  路  3Comments

amin101 picture amin101  路  3Comments

Cheddam picture Cheddam  路  3Comments

jpriceonline picture jpriceonline  路  3Comments

rlewkowicz picture rlewkowicz  路  3Comments