I'm trying to add environment variable inside .env file in my nuxt project.
My Nuxt.js version is 2.15.3
Here is a snippet from my nuxt.config.js:
export default {
publicRuntimeConfig: {
baseURL: process.env.BASE_URL
},
ssr: false,
target: 'static',
}
Here is my .env file:
BASE_URL=https://my-url.smth
But when I run npm run dev then nuxt gives error:
ERROR in ./.env 1:14 Module parse failed: Unexpected token (1:14) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
I was guided by this article https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/
Also it DOES NOT work with the old way through the #nuxtjs/dotenv.
EDIT: the solution was to wrap the variable into double quotes like this BASE_URL="https://my-url.smth".
I've wrote an in-depth answer on the subject.
As mentioned in it, please do not use the #nuxtjs/dotenv package.
If you still have an issue, we'll probably need more details or at least a repro to help you more efficiently.
Related
I Have a third-party library needed to be used in project ts code, which is added to the application using a CDN path in the HTML. And this library is exporting a window variable, which is used in the code.
The package is not available as an npm module. While running the webpack build it's failing with the following error message:
error TS2304: Cannot find name 'CUSTOM_WINDOW_VARIABLE'.
I have added this in name in the webpackconfig.js file as :
externals: {
CUSTOM_WINDOW_VARIABLE: "CUSTOM_WINDOW_VARIABLE",
},
But still getting the same error.
How to tell webpack to ignore these global variables while building. Or convert them to window.CUSTOM_WINDOW_VARIABLE from CUSTOM_WINDOW_VARIABLE.
As I know your problem is not about webpack at all. The issue is most likely throwing from ts-loader which uses tsc compiler your tsx? files so in order to fix this issue you might need to define the type for your global value which is available on window as following steps:
Create your project typing dir and the file types/global.d.ts (you can name whatever you want, feel free to use my suggested name in terms of no idea how to name it) with following content:
// global.d.ts
// You can define your own type by replacing with the exact type
declare const CUSTOM_WINDOW_VARIABLE: any;
Make sure your tsconfig.json which is placed at repo's root dir in most cases includes your types dir by adding to include config option:
// tsconfig.json
{
"include": ["types", ...]
}
Hopefully it would work for your case
PS: If you don't import your library as externals, basically you don't have to configure the externals property in your webpack.config file
I'm trying to include a VLC video playing in my Electron app, which is possible through WebChimera.js. This package is distributed a bit weirdly (to me at least), to use it you need to require wcjs-prebuilt, specify some settings in package.json and configure Webpack to allow importing .node files as explained in this Wiki page for WebChimera.js.
However I believe this Wiki page is outdated, as loaders isn't a valid key anymore in a Webpack config. I'm not very experienced using Webpack so most of this is new to me. Also note that this Wiki explanation used a fork of node-loader, although this fork seems to be merged to the actual node-loader now (?).
I now use this Webpack config:
target: 'node',
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: 'node-loader',
},
],
},
externals: [
'wcjs-prebuilt',
],
Because that's how the Webpack page for node-loader seems to do it. However this doesn't work for me, as now I get the error: Uncaught ReferenceError: exports is not defined in the chunk-vendors.js:1 file. Which probably means it's trying to use require syntax somewhere it shouldn't, but I have no idea how to proceed here. This error still occurs in an otherwise empty vue-electron project (template here), when I comment out all WebChimera related code. WebChimera code I use for testing in this project (Right now I'm just trying to get it to work):
const wcjs = require("wcjs-prebuilt");
console.log(wcjs)
When I remove the webpack config I showed above, the error about exports is not defined goes away, which is why I believe it's something in my webpack config rather than my code causing that error.
Long story short, I want to know how configure webpack to allow me to import or a require a .node file.
I'm able to get vue electron building with wcjs-prebuilt using a vue.config.js like this. You will also need to set the VLC_PLUGIN_PATH correctly or video won't play.
module.exports = {
configureWebpack: {
externals: {
'wcjs-prebuilt': 'commonjs wcjs-prebuilt'
},
},
chainWebpack: (config) => {
config.module
.rule('node')
.test(/.node$/i)
.use('node-loader')
.loader('node-loader')
.end()
},
pluginOptions: {
electronBuilder: {
externals: ['wcjs-prebuilt']
}
}
}
Since posting the question I've switched to mpv.js for video playback so this isn't an issue for me anymore. However after posting this question I experimented a lot, after I finally got it working in Webpack somehow (see first link below), it worked for me but with distorted video. The node file added some properties to an array which Webpack somehow stripped away, causing some missing values in the video renderer. I fixed that by forking WebChimera and editing the C++ code so that the values weren't added as properties but as separate values.
I ended up forking WebChimera.js, wcjs-prebuilt, wcjs-renderer, and libvlc_wrapper to get VLC to finally work with Webpack+Electron, all that probably wasn't necessary but oh well..
Links for whoever might be interested:
https://github.com/RuurdBijlsma/vlc-video-demo (working demo project featuring VLC in an Electron+Webpack+Vue project.)
https://github.com/RuurdBijlsma/libvlc_wrapper
https://github.com/RuurdBijlsma/wcjs-renderer
https://github.com/RuurdBijlsma/WebChimera.js
https://github.com/RuurdBijlsma/wcjs-prebuilt
I have started a pretty empty Vue projet, then when I do the following it works...
npm run serve
Then I change a minor thing in my project and hit CTRL+S. The Vue instance is rebuilt and then I have some weird errors such as:
error: Parsing error: The keyword 'import' is reserved at src/main.js:1:1:
> 1 | import Vue from 'vue'
So if I quit and rerun npm run serve it works again.
What's wrong?
It might be the eslint configuration problem, try to add this to your .eslintrc.js file to enable es6 modules
parserOptions: {
sourceType: 'module'
},
I am trying to get the components imported into a Nuxt project, following the steps here:
https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt does not have a main.js (everything is plugin based), so what I have done is create a "plugin" and then do the import code in there like so (Nuxt recommends this for other libraries too and works fine):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
Then in my config I do (removed other code in config):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
When I run npm run dev in my theme, it builds, but I get a warning:
WARNING Compiled with 1 warnings warning in
./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as
'system') was not found in 'fp-design-system'
Seems to have an issue with the generated system.js regarding the export (the command npm run build:system).
In my page on screen I get the following error when trying to use a component in the design system:
NuxtServerError Cannot find module
'fp-design-system/src/elements/TextStyle' from
'/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, I then get another message:
NuxtServerError render function or template not defined in component:
anonymous
Any idea what's happening here? It would be really great to get this working somehow.
At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.
Thanks.
Repository on GitHub:
Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)
As for your first error (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), the UMD built JS from vue-design-system does not export a "default" object. But you can simply workaround the issue by importing it as:
import * as system from 'fp-design-system'
instead of:
import system from 'fp-design-system'
Then another issue comes quickly as you noticed in your comments: "window is not defined", due again to the UMD built JS that expects window to be globally available, instead of the usual trick to use this (which equals window in a browser). Therefore as it is, the build is not comptible with SSR.
You could however slightly rework the built JS by replacing the first occurrence of window by this, but I am not sure if the result will still work.
Most probably you should better keep this module for client rendering only.
It seems Vue is looking for the ES6 pattern for importing module, which you should use for external javascript modules/files.
in ES6 it is
export default myModule
in ES5 it was
module.exports = myModule
Hope it will help.
I'm using webpack and babel to transpile my es6/jsx files in a node express React app I'm making. Everything is fine until I include the google spreadsheet npm module and attempt to import it into my project.
I get the error Uncaught Error: define cannot be used indirect but there is no define statement inside the imported module. This error only shows up in the browser, not in my console when webpack bundles my files, and completely stops anything from rendering on the page.
I think this is something to do with AMD/Commonjs but I am too inexperienced to know for sure, or what to even do if that were the case. Any help would be appreciated
Just a shot in the dark, but I ran into the same error with different library. It could be that google spreadsheet depends on json-schema too.
Try putting this in your webpack config:
module: {
noParse: /node_modules\/json-schema\/lib\/validate\.js/, // <-- This
loaders: [
//all your loaders...
]
}