laravel-mix: TypeError: Cannot read property 'call' of undefined
- Laravel Mix Version: 5.0.4 (
npm list --depth=0) ├── @popperjs/core@2.3.1 ├── axios@0.19.2 ├── babel-plugin-syntax-dynamic-import@6.18.0 ├── browser-sync@2.26.7 ├── browser-sync-webpack-plugin@2.2.2 ├── cross-env@7.0.2 ├── laravel-mix@5.0.4 ├── laravel-mix-alias@1.0.2 ├── lodash@4.17.15 ├── moment@2.24.0 ├── package-merge@0.1.2 ├── path-exists@4.0.0 ├── resolve-url-loader@3.1.1 ├── sass@1.26.3 ├── sass-loader@8.0.2 ├── tailwindcss@1.2.0 ├── tailwindcss-plugins@0.3.0 ├── tailwindcss-spinner@1.0.0 ├── vue@2.6.11 ├── vue-meta@2.3.3 ├── vue-router@3.1.6 ├── vue-template-compiler@2.6.11 ├── vuedraggable@2.23.2 └── vuex@3.1.3 - 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
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 6
- Comments: 15
Commits related to this issue
- Remove <style> from vue files because of a bug in mix/webpack: JeffreyWay/laravel-mix#2376 — committed to sammagee/learnpy.old by sammagee 4 years ago
I’ve been running into this same problem (see inertiajs/pingcrm#73 ) with using <style></style> 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).
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:
Which leads to:
Setting a breakpoint conditioned on
!modules[moduleId]let me trace which modules were not being loaded: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:
Hopefully this helps someone in the mean time. If either of these break something please post an update.
This was a known issue with Mix 5. As part of the webpack 5 upgrade (Mix v6), this should now be resolved.
@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!
@jtymanjr Thank you very much! 我这里补充一个中文的说明。 遇到这个问题的朋友，可以在报错行那里打个断点，报错行就是：
浏览器在modules[moduleId].call(module.exports, module, module.exports, webpack_require); 这行打个断点。
然后编辑断点，在进入断点前增加输出
重新运行程序或刷新页面，然后看控制台最后一个输出的 moduleId,就是无法加载的包。
把无法加载的包或文件，在app.js中导入 。
比如我最后一个输出了 路径：
就在app.js中添加了这行
然后就行了.
Thanks for your comment, but actually in my situation the
moduleIdis a real id. So it contains just a number like60553. So I wasn’t able to identify the package which has the issue. But actually the problem went away from itself. Now everything is loaded correctly. I really don’t know, what caused this issue.@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.
No. I am trying to build a package. All my entry point is from
node_modulesfolder. My compiled chunks gets into public folder.I have a similar problem that occurs because the Vue component has style tag