Develop Reference

Cannot use newly installed plugins (node modules) in Nuxt pages/components

First off, I'm a beginner with NuxtJS and front-end development in general, so it might be that I'm missing something - though I do believe I went through all the options before posting here. Apologies in advance if that is not the case.
I've been having trouble using installed modules that I've registered as plugins. For example, take mapbox-sdk.
After installing it with npm install #mapbox/mapbox-sdk, which correctly creates #mapbox/mapbox-sdk in node_modules, I register it in nuxt.config.js:
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Of course, I also create the mapbox-sdk.js file in plugins/, containing:
import "#mapbox/mapbox-sdk";
Then, in a page (say, myMap.vue), when I try:
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
which is the basic usage example in the documentation, I get:
mapboxSdk is not defined
in the console. This behavior extends to every single module I installed today, but is not the case for modules I had previously installed.

The reason why you're getting the error mapboxSdk is not defined is because there are a few issues with the way you've set up this plugin.
Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.
There are a couple of ways you can use this package.
Plugin
// ~/plugins/mapbox-sdk.js
import mapboxSdk from '#mapbox/mapbox-sdk'
export default (_ctx, inject) => {
// Exposing the mapboxSdk to your Nuxt app as $mapBox.
inject('mapBox', mapboxSdk)
}
Then in nuxt.config.js, same as you've already done.
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Then in your component myMap.vue
var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });
Directly in the component:
If you don't wish to use a plugin, the way that #kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.

Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first
<script>
import mapboxSdk from '#mapbox/mapbox-sdk'
export default {
methods: {
mapboxSdk,
},
mounted() {
console.log('mapbox function >>', mapboxSdk)
},
}
</script>
Do you have it working in a .vue component at first ?

gatsby require.resolve cant find module in createPage

I'm following the tutorial here https://www.gatsbyjs.com/docs/using-gatsby-without-graphql/ and I have my gatsby-node.js filled in.
My current directory structure is:
public
src
-pages
-templates
--program_group.js
static
gatsby-config.js
gatsby-node.js
inside my gatsby-node.js file I have
programGroups.forEach(program => {
createPage({
path: `/programs/${program}/`,
component: require.resolve("src/templates/program_group.js"),
context: { program },
})
})
and when I run gatsby develop it says, "Cannot find module 'src/templates/program_group.js'"
I've tried changing the path to ./src/..... and ../src/ and every combination. The documentation says it should be relative to the config file, which the above path is...
Thoughts?

Try using relative paths using path.resolve. This should work:
const path = require(`path`); // import it outside the function
programGroups.forEach(program => {
createPage({
path: `/programs/${program}/`,
component: path.resolve("./src/templates/programGroup.js"),
context: { program },
})
})
You can't underscore the templates due to naming issues to, that's another point to avoid.

So, oddly, you cannot have underscores in the template file name. This should be fixed in the gatsby compiler.
Solution: don't use _ in your template names

Load external library from CDN under an alias

I need to load two versions of the same library from CDN. Is there a way to specify the name of the resulting object on window so that they don't clash? Or can I rename the first before the second loads?

<script src="lib#1" />
<script> window.lib1 = window.lib; </script>
<script src="lib#2" />
then
window.lib1 // is lib#1
window.lib // is lib#2

Based on Jonas Wilms' answer, I came up with these two solutions when using webpack, which I have not mentioned in the original question.
here is a Demo https://codesandbox.io/s/multiple-library-versions-kvg5d
webpack - externals
you must change webpack config when updating a package
module.exports = {
externals: {
react: 'React16_11'
}
};
in code
import React from 'react' // webpack translates to window.React16_11
webpack - aliases*
you must change a .js file in project when updating a package
module.exports = {
alias: {
react$: './getReactFromWindow',
},
};
getReactFromWindow.js:
module.exports = window.React16_11;
in code
import React from 'react' // webpack translates to './getReactFromWindow'
*webpack aliases based on this question

How to load CSS module with next.js

I'm trying to use the react-datepickermodule in my react App, but I'm having a hard time trying to load the css module of react-datepicker. I'm using next.js to render my app on server side.
I tried to implement a css loader provided by next to solve this kind of issue, but I got an error trying to build my app:
error
My component.js file:
import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
My nex.config.js file:
const withImages = require('next-images');
const withCSS = require('#zeit/next-css');
module.exports = withImages(
withCSS({
cssModules: true
})
);
Can you please tell me what is wrong with my imports or config ? Or what the 'minimize' property (displayed on the error message) means ?
Thanks a lot
EDIT: I ended up by importing css directly from
<link href="/static/react-datepicker.css" rel="stylesheet" />. Original post

Your css modules must end with .module.css.
To use CSS Modules, import a CSS file named *.module.css from any component. src

Import this way instead:
import styles from 'react-datepicker/dist/react-datepicker-min.module.css'

Try using Compose in your config file
I think you need to compose your plugins like so
// ... other imports
const compose = require('next-compose');
module.exports = compose([
withImages(),
withCss(),
{
webpack: (config) => {
/**some special code */
return config
}
}
]);
Details about the plugin can be found here

Your code is fine!
Instead of importing CSS into a component, try to import it into the page you wanted to use it on.
Next.js supports only custom page CSS imports.

How can I use a config file in React?

Let's say I have 5 jsx files and each file uses some config parameter.
My index.js file imports all of these 5 jsx files.
Instead of having my config data spread accross 5 files, is there a way for my jsx files to get the data from a global JS object which has loaded the data from a config file?
I've seen some examples, but I've not been able to get them to work.
JS6 import function | Example using webpack

Assuming ES6:
config.js
export const myConfig = { importantData: '', apiUrl: '', ... };
Then:
jsxFileOne.js, jsxFileTwo.js, ...
import { myConfig } from 'config.js';
There are other ways to import & export things globally leveraging webpack, but this should get you started.

If your project is built using Webpack, consider using node-env-file.
Example config file snippets:
development.env
API_SERVER_URL=https://www.your-server.com
webpack.config.js
const envFile = require('node-env-file');
...
const appSettingsFile = isDevBuild ? '/settings/development.env' : '/settings/production.env';
try {
envFile(path.join(__dirname + appSettingsFile));
} catch (error) {
console.log("Failed to read env file!: " + __dirname + appSettingsFile);
}
...
plugins: [
new webpack.DefinePlugin({
"process.env": {
API_SERVER_URL: JSON.stringify(process.env.API_SERVER_URL)
}
})
...
]
Inside your js/jsx code, you can now access process.env.API_SERVER_URL variable which will contain the required value.
It seems dotenv package is more popular, you can try this out as well.

Very old problem, that nobody took the time to solve, until now. I leave this for future readers because this is a top search result for configuration in React.
I created wj-config to deal exactly with this. Be sure to pay close attention to the React notes as you will need to enable top-level awaits in webpack, either by ejecting or using the #craco/craco NPM package.
You may also read this blog post that explains its use.