I'm using Vue JS to build a plugin and am using the p11n module. I've built my components and everything works fine when serving via npm run serve, but when trying to build the project via npm run build which essentially is running: vue-cli-service build I get the following error regardless of what version I use:
ERROR Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:5400:30)
at Module.error (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:9824:16)
at tryParse (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:9717:23)
at Module.setSource (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:10080:33)
at Promise.resolve.catch.then.then.then (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:12366:20)
No idea how to fix this, I've tried installing the Vue JS rollup plugin, no luck :(
Related
I want to implement DESO into my app. The most convenient way is probably the DESO library from their developer hub.
I want to be as precise as possible here. So first I downloaded the deso-protocol npm package. In the readme of this library is stated that it is generated with nx. So I downloaded that too. No big issues. And I should: Run nx build deso-protocol to build the library.(in readme). Than I get an error that there is no workspace, when I want to create one with "npx create-nx-workspace deso-protocol --preset=core" , nx gets stuck in that process.
So I decided to do it without the building(I don't quite now if that is needed, am new to npm) and just do it with the classic js imports.
The "import Deso from 'deso-protocol';" from the docs isn't working. Because the module imports have to start with "/" or "./" or sth. similar etc.
So I tried import Deso from './node_modules/deso-protocol/src/index.js';. That's not working. Error:
Uncaught SyntaxError: import not found: default
using import { Deso } from './node_modules/deso-protocol/src/index.js'; doesn't work either because then Deso isn't found. I don't quite now what to do now.
Edit
I use plain JavaScript. deso-protocol uses plain JavaScript too, I hope. There isn't much code yet:
Index.js file:
import Deso from './node_modules/deso-protocol/src/index.js';
test.html file:
<script type="module" src="index.js"></script>
That's it. I use http.server from Python to host the local server.
Just install deso-protocol library from https://www.npmjs.com/package/deso-protocol with npm i deso-protocol
In your app import it as usual
import Deso from "deso-protocol";
And initialize
const deso = new Deso();
Readme file is really confusing, I have no idea what
Run nx build deso-protocol to build the library.
is supposed to mean, it works without that no problem.
I have had no problems with deploying my vue projects so far and uploading it to my website. However suddenly Im getting the following errormessage after I have been running
npm run build
and uploading the files in my distfolder.
Uncaught SyntaxError: Unexpected token '<' chunk-vendors.468a5298.js:1
Uncaught SyntaxError: Unexpected token
'<' app.f775d578.js:1
The only difference I can notice is that vue now seems to recommend using yarn.
I made a new project just for testing using yarn but with the same error.
vue create my-application
yarn install
yarn serve
yarn build
uploading content in distfolder to my website - same errormessage
Anyone else experienced this?
My old build works without any problems
Im using #vue/cli 4.5.6
I got it working now. Deleted the folder on my ftp and created a new one. Dont know this solved it but it did :)
If you are deploying your dist not to your root of the web, then one possible cause of this is an incorrect static assets path. Make sure both your css and js generated from npm run build are imported to the correct path from your web server
On dist/index.html, you will see something like this
<link href=/js/chunk-....js rel=prefetch>
This means that it's an absolute path (root of the web), when it's supposed to be relative from the dist folder like this:
<link href=js/chunk-....js rel=prefetch>
To easily fix this is, add publicPath key in your vue.config.js file:
module.exports = {
...
publicPath: ""
};
Then rebuild the project.
I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template
I'm developing a vue-cli 2.9.3 app with the webpack template. I have a component which uses MapboxGL, imported with import mapboxgl from 'mapbox-gl;'.
Everything works fine in dev using npm run dev.
I can build the project without issue with npm run build. However, I get the following error on the console when navigating to the component using MapboxGL:
ReferenceError: e is not defined
The DevTools from Firefox or Chrome are unable to make the link to the sourcemap (.js.map) files, so the error message is not very helpful.
I was able to make the bundle work by using devtool: eval-source-map instead of devtool: source-map in ./config/index.js, but the bundle size becomes > 8Mb which is not acceptable and it is not recommended in production.
I have also tried without sourcemaps but I got the same cryptic error.
How can I debug this error in the packaged bundle? I would like to at least be able to see where the error comes from.
It seems that it is a known bug with MapboxGL and Webpack.
It can be solved by adding the following in ./build/webpack.prod.conf.js:
module: {
...
noParse: /(mapbox-gl)\.js$/,
...
}
I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?
SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';