I'm trying to switch my state management in a lit-element based application from simple global variables to redux.
Following the redux tutorials I installed the redux toolkit and created a simple reducer and store.
Building the app with rollup succeeds but when I load the app in Chrome I get the following error:
ReferenceError: process is not defined
There are several lines in the redux code that use 'process', f.e.
/*
* This is a dummy function to check if the function name has been altered by minification.
* If the function has been minified and NODE_ENV !== 'production', warn the user.
*/
function isCrushed() {}
/
if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
}
Can anyone help? Am I missing something? Is 'process' something that is only available in Node?
A more appropriate fix than the one I posted as a comment seems to be string replacement via the rollup.config.js.
Source: https://github.com/rollup/rollup/issues/487
npm install rollup-plugin-replace --save-dev
Then in the plugins section of your rollup.config.js add this
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
I'm a Redux maintainer. The Redux library ships several different build artifacts for use in different environments. We expect that the CommonJS and ES Module build artifacts are going to be run through a bundler that knows how to handle process.env.NODE_ENV checks and replace them at build time, per standard ecosystem convention.
If you are trying to use Redux Toolkit in a non-bundled environment, you should use one of the build artifacts that has already been compiled with a specific value of process.env.NODE_ENV ('production' or 'development'). We ship a couple of ESM build artifacts this way, as well as the UMD build artifact:
https://unpkg.com/browse/#reduxjs/toolkit#1.7.1/dist/
You probably should be using redux-toolkit.modern.production.min.js (ESM) or redux-toolkit.umd.min.js (UMD).
If you are actually trying to do a full build, then yes, you need to configure Rollup to do an appropriate replacement on process.env.NODE_ENV.
I found this plugin that solved the issue for me
rollup-plugin-node-globals
Related
If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module
I'm trying to set an environment variable for an API key that I don't want in my code. My source javascript looks something like this :
.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)
I'm using webpack and the package dotenv-webpack https://www.npmjs.com/package/dotenv-webpack to set API_KEY in a gitignored .env file and it's all running fine on my local. I'd like to also be able to set that variable when deploying through Netlify, I've tried adding it through to GUI to the 'build environment variables', and also to set it directly in the build command, but without success.
Any idea what might be the issue ?
WARNING: If this is a secret key, you will not want to expose this environment variable value in any bundle that gets returned to the client. It should only be used by your build scripts to be used to create your content during build.
Issue
dotenv-webpack expects there to be a .env file to load in your variables during the webpack build of your bundle. When the repository is checked out by Netlify, the .env does not exist because for good reason it is in .gitignore.
Solution
Store your API_KEY in the Netlify build environment variables and build the .env using a script prior to running the build command.
scripts/create-env.js
const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)
Run the script as part of your build
node ./scripts/create-env.js && <your_existing_webpack_build_command>
Caveats & Recommendations
Do not use this method with a public facing repository [open] because any PR or branch deploy could create a simple script into your code to expose the API_KEY
The example script above is for simplicity so, make any script you use be able to error out with a code other than 0 so if the script fails the deploy will fail.
You can set Dotenv-webpack to load system environment variables as well as those you have declared in your .env file by doing the following:
plugins: [
new Dotenv({
systemvars: true
})
]
I.e Setting the systemvars attribute of your webpack dotenv plugin to true.
Note that system environment variables with the same name will overwrite those defined in your .env file.
Source: https://www.npmjs.com/package/dotenv-webpack#properties
if you go to corresponding site's settings in Netlify, under build&deploy you can find a section called environment variables you can easily add your environment variables from there. if you add MY_API_KEY variable to environment variables you will be able to access it inside your project via process.env.MY_API_KEY.
If you're using Nuxt JS there is a more "straight forward" approach.
Just edit the nuxt.config.js like so:
module.exports = {
env: {
GOOGLE_API_KEY: process.env.GOOGLE_API_KEY
},
// ...
Then add the GOOGLE_API_KEY to Netlify through the build environment variables as usual.
Credit goes to yann-linn and his answer on github.
What you can also do is also to define a global constant in Webpack. Netlify environment variables defined in UI will work with it. You don't need dotenv or dotenv-webpack.
webpack.config.js
const webpack = require("webpack");
module.exports = {
plugins: [
new webpack.DefinePlugin({
"process.env.API_KEY": JSON.stringify(process.env.API_KEY)
}),
]
}
However again, of course you shouldn't do it just inputting enviornmental variables in the frontend if your API key is confidential and project public. The API key will appear in the source code of the website and will be easily accessible for everyone visiting it. Lambda function would be a better option.
You can use the Netlify's config file also ...
You can find documentation here.
Also i wanted to have the same ENV variables with with different values per branch/environment.
This workaround worked for me:
Create a netlify.toml file like:
[build]
NUXT_ENV_BASE_API = "/api"
NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr"
[context.branch-deploy]
environment = { NUXT_ENV_BASE_API = "/dev-api", NUXT_ENV_HOST_DOMAIN = "https://dev.your-domain.gr" }
[context.production]
environment = { NUXT_ENV_BASE_API = "/api", NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr" }
And deploy in Netlify ...
I have a Meteor project where I use coffeescript.
I'm not sure what has happened, but suddenly my solution is getting this error.
ReferenceError: share is not defined
at app/models/Models.js:3:3
when I try to boot up my solution.
It generates this error wherever I use the Meteor coffeescript share variable.
I'm using WebStorm and I have a FileWatcher to transpile coffeescript into javascript. When I turn this on (which I need to be able to debug in WebStorm), it generates .js and .map files for my .coffee files.
So somehow these generated JS files do not have a reference to the share variable that coffeescript uses in Meteor to have global variables.
I've tried to delete the .idea directory and the .meteor directory, I've tried adding and removing the meteor coffeescript package. I even tried to create a new solution - I still have the same problem.
I can't seem to fix it so that there is no error when the file watcher is turned on.
What is the source of this error and what can I do to fix it?
Meteor does a special job when compiling coffeescript to js: it prepends the generated code with
__coffeescriptShare = typeof __coffeescriptShare === 'object' ?
__coffeescriptShare : {};
var share = __coffeescriptShare;
to ensure that global __coffeescriptShare exists and is assigned to a file-scope variable share.
But the standard CoffeeScript compiler used in a file watcher knows nothing about these meteor tricks. As a result, we get
(function() {
share.TestFunction = function(p) {
return p;
};
}).call(this);
instead of
function(){__coffeescriptShare = typeof __coffeescriptShare === 'object' ? __coffeescriptShare : {}; var share = __coffeescriptShare;
share.TestFunction = function(p) {
return p;
};
})();
So the standard compiler is not suitable for transpiling coffeescript meteor applications. Meteor coffeescript package has to be used instead. It supports source maps, so there are no reasons for using file watchers. To me, debugging works when using maps produced by Meteor coffeescript package, but not always. Note that WebStyorm doesn't yet support meteor+coffeescript. Related tickets are: WEB-14479, WEB-14794
i created an angular application with yeoman, when i executed grunt command i got the following error
Running "karma:unit" (karma) task
WARN [config]: JASMINE is not supported anymore.
Please use `frameworks = ["jasmine"];` instead.
WARN [config]: JASMINE_ADAPTER is not supported anymore.
Please use `frameworks = ["jasmine"];` instead.
WARN [config]: LOG_INFO is not supported anymore.
Please use `karma.LOG_INFO` instead.
ERROR [config]: Config file must export a function!
module.exports = function(config) {
config.set({
// your config
});
};
how do i solve this error ?
It's just those two predefined terms (JASMINE and JASMINE_ADAPTER)
that should not be used any more. All you have to do is open the
config file ./config/karma.conf.js and comment out those terms and add
frameworks = ["jasmine"];.
Via Yasuhiro Yoshida
apart from #sheplu's answer, there are additional changes that need to be done in karma.conf.js, you can see it in https://gist.github.com/sivakumar-kailasam/6421378
this gist solves your problem of 'Config file must be a export a function!'
The official docs has these changes as well http://karma-runner.github.io/0.10/config/configuration-file.html