Laravel-mix: TypeError: Cannot read property 'call' of undefined

[nitish1986]

• Laravel Mix Version: 5.0.4 (npm list --depth=0)
  ├── @popperjs/[email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  └── [email protected]
• Node Version (node -v): 13.13.0
• NPM Version (npm -v): 6.14.4
• OS: Ubuntu 18.04.4 LTS

Description:

I'm developing an app on laravel-mix and it is working perfectly fine on our local system, We are sharing with team which is having windows and macos, but when we try to deploy our code on Ubuntu server it is not navigating and throwing us the error:

vue-router.esm.js?4dc1:2117 TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
at eval (login.vue?21d2:1)
at Object../node_modules/css-loader/index.js?!../nitseditor-frontend/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/pages/login.vue?vue&type=style&index=0&id=2379d9d6&scoped=true&lang=css& (ProjectPages-component.13725ab8fd677b7f258a.js:858)
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
at eval (login.vue?5e7a:2)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!../nitseditor-frontend/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/pages/login.vue?vue&type=style&index=0&id=2379d9d6&scoped=true&lang=css& (ProjectPages-component.13725ab8fd677b7f258a.js:924)
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
at eval (login.vue?033a:1)
at Module../resources/pages/login.vue?vue&type=style&index=0&id=2379d9d6&scoped=true&lang=css& (ProjectPages-component.13725ab8fd677b7f258a.js:1846)
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)

My webpack.mix config looks something like this:

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

const NitsRoutePlugins = require('./Webpack/NitsRoutePlugin');
const NitsComponentsPlugin = require('./Webpack/NitsComponentsPlugin');

mix.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'public/nits-assets/css')
    .options({
        processCssUrls: false,
        postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
    })
    .js('node_modules/nitseditor-frontend/app.js', 'public/nits-assets/js')
    .webpackConfig({
        module: {
            rules: [

            ]
        },
        node: {
            fs: "empty"
        },
        output: {
            publicPath: '/',
            chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
        },
        resolve: {
            symlinks: false,
            extensions: ['.js', '.json', '.vue'],
            alias: {
                NitsModels: path.resolve(__dirname, 'Models'),
                ProjectModels: path.resolve('./resources/models'),
                ProjectPages: path.resolve('./resources/pages'),
                NitsAdminPages: path.resolve(__dirname, 'Pages'),
                NitsComponents: path.resolve(__dirname, './Components'),
                Plugins: path.resolve('./plugins'),
            }
        },
        plugins: [
            new NitsRoutePlugins(),
            new NitsComponentsPlugin()
        ]
    })
    // .extract([
    //     'vue', 'axios', 'lodash', 'vue-router', 'vue-template-compiler', 'vuex'
    // ])
    .sourceMaps().version();

I found out the problem whenever I'm mentioning any style elements inside my vue-components it is throwing me the error, also I'm having dynamic imports. I came to know through this comment

[Viking0607]

I have a similar problem that occurs because the Vue component has style tag

[jasonlfunk]

I'm also running into this issue now too. I imagine that it is a version or configuration issue, seeing as it isn't happening to everyone.

People seem to be resigned to this just not working.... https://github.com/inertiajs/inertia-laravel/issues/79#issuecomment-638047425

[borovez]

I am having this exact same problem... if I remove the style tag, there is no error.

If I add the style lang=postcss and I try to add postcss @apply, it doesn't work...

If I have a style tag, the first time I run npm run hot, it will error out, and I need to resave any vue/css file and it loads, but still cannot get @apply tag to work in vue component.

[CaptFurball]

Hi @nitish1986 , I am curious, is your project setup in such a way that you had a entrypoint at laravelprojectdir/public/folder ?
instead of the usual laravelprojectdir/public ?

[nitish1986]

Hi @nitish1986 , I am curious, is your project setup in such a way that you had a entrypoint at laravelprojectdir/public/folder ?

No. I am trying to build a package. All my entry point is from node_modules folder. My compiled chunks gets into public folder.

[jtymanjr]

Did you manage to find out whats wrong with it tho? @nitish1986
Any solutions without removing the tags in Vue components when using dynamic/asyn loading. From what I've been able to determine this is related to dynamic imports confusing Webpack's tree shaking system. Until we migrate to Webpack 5 this is the cleanest way I've gotten this to work.

I have found 2 ways to resolve this consistently. They both seem hack-ish in their own special ways, but none of the other solutions involving webpack.mix.js changes have been either successful or robust.

The first is to simply include one of the components that uses a style tag in app.js. We won't use it anywhere, but it will force Webpack to keep the needed modules to process everything in that file. This will probably affect your bundle size (it is about 10kb for me).

import Login from "@/Pages/Auth/Login"

The second is to include the missing module/files directly. I was able to do this by tracing which modules were not being loaded correctly and then forcing them to load by requiring them in app.js. This increased my bundle size by about 4kb.

Console error:

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js?id=190d10dd3f9b5eefcd03:64)
...

Which leads to:

/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/

Setting a breakpoint conditioned on !modules[moduleId] let me trace which modules were not being loaded:

./node_modules/css-loader/lib/css-base.js
./node_modules/style-loader/lib/addStyles.js

These modules were consistent for me between projects, and adding an import for these in my app.js files has worked for me so far:

import CssBase from "css-loader/lib/css-base";
import AddStyles from "style-loader/lib/addStyles";

Hopefully this helps someone in the mean time. If either of these break something please post an update.

[Yiddishe-Kop]

@jtymanjr - wow! 🥳

This is big stuff. We have been stuck for months resigned to accept that we just can't use <style> blocks in Vue SFC's with Laravel Mix. And here comes your solution, and solved it!
I just tried the second solution, and it works perfectly.

Thank you!

[JeffreyWay]

This was a known issue with Mix 5. As part of the webpack 5 upgrade (Mix v6), this should now be resolved.

[ekafyi]

@jtymanjr Thank you so much! I had the exact problem and your second solution worked perfectly (identical missing modules, too). I cannot install mix@next at this point because of PostCSS dependencies and no resource to wrangle webpack config. Your solution was super helpful.