During the build process (using vue-service-cli buid, via vue ui gui), the following error is displayed but I can't find where the declaration is made for src/main.ts. vue: 2.5.21, vue-cli: 3.2.1
ERROR Failed to compile with 1 errors1:58:38 PM
This relative module was not found:
* ./src/main.ts in multi ./src/main.ts
ERROR Build failed with errors.
web.config.js
main.ts is defined in ClientApp
entry: { "main": "./ClientApp/main.ts" },
Is vue (or webpack) hard-wired to have a src dir?
Try clearing the webpack entry points beforehand:
// vue.config.js
module.exports = {
configureWebpack: config => {
config.entry('main')
.clear()
.add('./ClientApp/main.ts')
}
}
Related
I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo
Help me please. Added Nuxt(SSR) to the my vue project. All moved to the root of the project, created a page folder. The following error appeared:
ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules has an unknown property 'compileType'. These properties are valid:
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
at validate (/app/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (/app/node_modules/css-loader/dist/index.js:36:28)
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&) 4:14-327
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-loading.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
code from nuxt.config.js:
import { resolve } from 'path'
export default {
alias: {
style: resolve(__dirname, './assets/style'),
},
}
As I understand the error is related to the setting of the Nuxt.
In your package.json you do have sass-loader set to ^12.1.0, meanwhile the package introduces a breaking change during v11.0.0.
It requires Webpack5, which Nuxt is not compatible as of today. If you downgrade it down to v10.1.1 (and all related packages like node-sass), you should be fine.
I am trying to use the library node-pty in a project scaffolded with vue-cli. When I launch the program I get the following error:
error in ./node_modules/node-pty/build/Release/pty.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./node_modules/node-pty/lib/index.js 49:49-85
# ./src/background.js
Steps to reproduce
vue create test-project
cd test-project && vue add electron-builder
npm i node-pty#beta
add import pty from 'node-pty’ to src/background.js
npm run electron:serve
What I have attempted
I have attempted to add node-loader and raw-loader to the vue.config.js file
configureWebpack: {
chainWebpack: config => {
config.module
.rule('node')
.test(/.node$/i)
.use('node-loader')
.loader('node-loader')
.end()
}
}
This does not resolve the issue.
vue.config.js requires the use of module.exports
module.exports = {
chainWebpack: config => {
config.module
.rule('node')
.test(/\.node$/)
.use('node-loader')
.loader('node-loader')
.end();
}
}
Weird issue I am facing. Using Vue-CLI3 npm run serve.
Have the following config:
// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end();
}
};
and one single .graphql file:
mutation AddOfficeMutation(
$name: String
$location: String
) {
createOffice(
input: {office: { name: $name, location: $location }}
) {
office {
id
name
location
}
}
}
when running npm run serve, I get the following error:
ERROR Failed to compile with 1 errors 1:11:08 PM
error in ./src/graphql/AddOfficeMutation.graphql
Module build failed (from ./node_modules/graphql-tag/loader.js):
GraphQLError: Syntax Error: Unexpected Name "var"
at syntaxError (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/error/syntaxError.js:24:10)
at unexpected (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1490:33)
at parseDefinition (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:153:9)
at many (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1520:16)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:113:18)
at parse (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:48:10)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:129:16)
at gql (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:170:10)
at Object.module.exports (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/loader.js:44:18)
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AddOfficeForm.vue?vue&type=script&lang=js& 29:0-69 59:18-35
# ./src/components/AddOfficeForm.vue?vue&type=script&lang=js&
# ./src/components/AddOfficeForm.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue
# ./src/router/routes.js
# ./src/router/router-config.js
# ./src/main.js
# multi ./node_modules/#vue/cli-service/node_modules/webpack-dev-server/client?http://192.168.0.99:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Using:
"graphql": "^14.0.2"
"graphql-tag": "^2.10.0"
I am slowly assuming this might be an error with my Babel or Vue config?
Anyone can shed some light on this?
Thanks!
I faced the same issue and it seemed that having 2 loaders make the crash.
I had installed graphql-tag and webpack-graphql-loader .
Try to uninstall every package that includes apollo or graphql and reinstall using vue cli again. vue add apollo. It worked for me.
I am trying to create a module that will be used by other modules. However, this module contains html files.
Module 1 location c:/module_1
- Base HTML <img src="##__dirname/img/icon.png">
In module 1 he uses his icon.png.
In module 2, I would like it to use the icon.png of Module 2
I tried this:
plugins: [
new HtmlReplaceWebpackPlugin([
{
pattern: '##__dirname',
replacement: __dirname
},
...
html-replace-webpack-plugin
But compilation error occurs:
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve './##_dirname/img/icon.png'
I noticed that it is possible to replace src after compiling
<img src="img/icon.png">
new HtmlReplaceWebpackPlugin([
{
pattern: /src=\"([^\"]*)\"/g,
replacement: function (match, $1)
{
return 'src="' + __dirname + '/src/img/' + $1 + '"';
}
}
]),
But I would like to replace before, and that when compiling it it takes the icon of the module in which it is being reused.
Is it possible to modify the img src dynamically in npm, even though it is a module that will be used as a dependency?
ps. I do not know much about the web and I do not know if I'm trying to do the project correctly. Just thought about reusing html code this way. If I'm doing something absurd, please let me know.
I solve the problem using React and this tutorial Setting Up a React.js Environment Using Npm, Babel 6 and Webpack