I am using laravel mix and vue. I am loading all components dynamically by defining routes in routes.js file.
{ path: '/network', component:() => import('./components/network/NetworkComponent') },
when i run "npm run dev" or "npm run prod". all my routes are working fine and components are loaded correctly associated with each route. When i use npm run watch to add/change something and rebuild using npm run watch i am getting below error
app.js?t=1570291343:64 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (app.js?t=1570291343:64)
at __webpack_require__.t (app.js?t=1570291343:162)
Related
I want to create a new Nuxt project and followed their instructions here: https://nuxtjs.org/docs/get-started/installation. Basically just running npm init nuxt-app#latest <project-name>.
After going through the setup (in which I choose Tailwind as my UI of choice), I run npm run dev and it crashes while trying to build saying "Cannot destructure property 'nuxt' of 'this' as it is undefined."
Here is the full stack:
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 15:22:52
at postcss8Module (node_modules\#nuxt\postcss8\dist\index.js:15:10)
at installModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/#nuxt/kit/dist/index.mjs:416:9)
at async setup (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/#nuxtjs/tailwindcss/dist/module.mjs:186:7)
at async ModuleContainer.normalizedModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/#nuxt/kit/dist/index.mjs:167:5)
at async ModuleContainer.addModule (node_modules\#nuxt\core\dist\core.js:239:20)
at async ModuleContainer.ready (node_modules\#nuxt\core\dist\core.js:51:7)
at async Nuxt._init (node_modules\#nuxt\core\dist\core.js:478:5)
I found not including '#nuxtjs/tailwindcss' in the buildModules in nuxt.config.js removes the error, but it does not create the tailwind config files I need. Also, the line causing the error in postcss8Module's index.js is const { nuxt } = this. For some reason this is undefined.
The error comes from the recent Nuxt 3 Release and is being tracked on the create-nuxt-app Github.
Create-nuxt-app is not compatible with Nuxt 3 yet. Therefore, for now, you have to install Nuxt 3 and Tailwind CSS manually:
npx nuxi init <project-name>
cd <project-name>
npm install
npm install #nuxtjs/tailwindcss --save-dev
Now you should be able to run your app as expected:
npm run dev
Hi sorry doesn't have enough rep to comment on this, but just wanted to say this issue is also being tracked at
https://github.com/nuxt/framework/issues/9115 for Nuxt 2
I found a solution
add it to your package.json
"resolutions": {
"#nuxt/kit": "3.0.0-rc.13"
}
I am trying to install vue2leaftlet in my quasar version 2 vue version 3 project and it seems I can install it. I have followed this example https://techformist.com/using-vue-plugins-quasar/
but it won't work since I keep getting the following error:
vplugins.js?bfd0:5 Uncaught (in promise) TypeError: vue2_leaflet__WEBPACK_IMPORTED_MODULE_1__.install is not a function
at eval (vplugins.js?bfd0:5)
at Module../src/boot/vplugins.js (app.js:85)
at __webpack_require__ (app.js:217)
at Function.fn (app.js:482)
at async Promise.all (:8080/index 0)
I just created a new Vue 3 project using create-vite-app tool:
npx create-vite-app vite-app-for-test
cd vite-app-for-test
npm install
The generated project structure is like this:
vite-app-for-test
|- /public
|- /src
|- /assets
|- /components
|- HelloWorld.vue
|- App.vue
|- main.js
|- index.css
|- index.html
|-package.json
Now I want to test out this feature: Instant Prototyping , on my project.
I've already installed Vue 3 and Vue CLI on my machine, both are the latest versions: #vue/cli 4.5.15, vue#3.2.21.
Then I followed the guide and installed #vue/cli-service-global globally:
npm install -g #vue/cli-service-global
I tried this first:
vue serve ./src/main.js
The server started, no errors were emitted, and the demo page shows correctly.
but if I apply this command on App.vue:
vue serve ./src/App.vue
Things are going wrong here. I got a warning in my terminal but the server started successfully though:
WARNING Compiled with 1 warning
warning in C:/Users/xxx/AppData/Roaming/npm/node_modules/#vue/cli-service-global/template/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
App running at:
- Local: http://localhost:8080/
- Network: unavailable
The browser display nothing when I opened http://localhost:8080/. And there are some errors logged by the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'config')
at eval (main.js?6f7e:4)
at Module.C:\Users\xxx\AppData\Roaming\npm\node_modules\#vue\cli-service-global\template\main.js (chunk-vendors.js:470)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1022)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925
at app.js:928
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
There's a screenshot about the error in the generated code: see here, possibly useful.
What is going on? Is there any wrong when I run vue serve on a single .vue entry? And if it's a bug of Vue CLI, is there any alternative solution for instant prototyping?
Thanks in advance.
I'm meetting the same question when i try to test my single vue component with command "vue serve".No errors were emitted.I even noticed that instead of using the command "vue serve", it executed "vue-cli-service serve" instead.I get a blank page with just a div element with the 'id=app'.
I created a new project with the Vue CLI 3 (configured: babel, pwa, eslint, mocha). Running the test environment using npm run serve works just fine, but I can't build the project for production.
I installed the current version of the Vue CLI 3 and tried creating projects with different configurations. I get the following error message when building the project.
js/app.bb3f3c6e.js from Terser
TypeError: Cannot read property 'minify' of undefined
at minify (/Users/.../untitled/node_modules/terser-webpack-plugin/dist/minify.js:176:23)
at module.exports (/Users/.../untitled/node_modules/terser-webpack-plugin/dist/worker.js:13:40)
at handle (/Users/.../untitled/node_modules/worker-farm/lib/child/index.js:44:8)
at process.<anonymous> (/Users/.../untitled-adventure/node_modules/worker-farm/lib/child/index.js:51:3)
at process.emit (events.js:188:13)
at emit (internal/child_process.js:828:12)
at processTicksAndRejections (internal/process/next_tick.js:76:17)
This is a known issue (vuejs/vue-cli#3407) with the terser 3.16 dependency.
The workaround is to install 3.14 for now:
npm i terser#3.14
I am trying to publish a fork of an open source React component to npm and use load it in my webpack after a successful npm install of my published module.
The webpack is throwing a Module not found: Error: Cannot resolve 'file' or 'directory' ./Slider.jsx in /home1... error when loading.
The lib/index.js file that my rc-tools build created is:
1'use strict';
2
3 module.exports = require('./Slider.jsx');
while, the main fork of the repo has
1'use strict';
2
3 module.exports = require('./Slider');
as their created lib/index.js.
I am using the same build (rc-tools) tool as them and have nearly identical package.json. Why is my repo creating a different index.js and is this the cause of my webpack.config not loading?
Here is the link to the npm component: https://www.npmjs.com/package/meraki-slider
In my journey of learning about node and publishing, I simply forgot to remove the .jsx endings from my /src folder, which was causing my build to include them in my /lib folder and causing webpack to not compile. :P