OK so, I have a WordPress site which a custom theme and several custom plugins (mu-plugins to be exact) which all use the exact same build processes. That is to say, they all have package.json files and use webpack. Technically there are a couple gulpfiles but I am migrating those to webpack configs.
So I want to be able to deploy my app, and after composer install all the plugins and theme, I would have a node script run which would:
Install all the NPM packages the build processes need - but install them globally
CD into the custom theme's src directory and run webpack --config webpack.production.js to build the theme's assets
CD into each of the custom plugins' src directories and run web run webpack --config webpack.production.js to build each plugin's assets in their respective locations
By doing this, I hope to
avoid committing compiled assets to my repos
avoid committing 3rd party packages to my repos
cut down on deployment time (because all packages would be installed globally, and only 1 time vs in each location)
I have already written the node scripts which:
installs the NPM packages
sets the node_path and node_prefix settings so my webpack (and gulp) scripts know where to find things
and CDs into each location and runs something like
This script simply runs child_process('webpack --config webpack.production.js' {cwd:' whatever/plugin/src'})
Now, the issues I having are (and how I have fixed some of them):
while my init node script could find node modules, the spawned processes that ran webpack could not
fixed this by setting NODE_PATH before the npm run command or by adding the node path via export in my .profile scrip
webpack files were unable to find the various loaders
fixed this by adding the global node path to the resolveLoaders option
my scss files couldn't find 3rd party packages like bulma
I fixed this by including the global node_modules path into the includePaths arg for sass-loader
The last, well most current issue I am facing is with webpack and vuejs.
I get this error:
ERROR in (webpack)/node_modules/timers-browserify/main.js
Module not found: Error: Can't resolve 'setimmediate' in '/usr/local/bin/npm-global/lib/node_modules/webpack/node_modules/timers-browserify'
# (webpack)/node_modules/timers-browserify/main.js 54:0-23
# /usr/local/bin/npm-global/lib/node_modules/vue/dist/vue.js
# ./src/js/entry.js
# ./src/entry.js
timers-browserify is apparently a dependency of VueJs. My entry js file has this vue import:
import Vue from 'vue/dist/vue';
and that appears to be throwing the error. If I remove it then webpack compiles everything as expected. If I install my node_modules in that folder (there is a package.json file in there) then it also compiles as expected.
I have already updated my webpack config to "resolve" module and loader dependencies to use their globally installed locations:
resolve: {
// Configure how Webpack finds modules imported with `import`.
modules: [
'/usr/local/bin/npm-global/lib/node_modules',
path.resolve(__dirname, 'node_modules'),
],
},
resolveLoader: {
// Configure how Webpack finds `loader` modules.
modules: [
'/usr/local/bin/npm-global/lib/node_modules',
path.resolve(__dirname, 'node_modules'),
],
},```
So it seems that Vue, or maybe some npm packages in general seem to have some expectations of where certain node_modules live?
This is likely going to be a continuous issue with the path I have decided on so I want to know whats causing it or what to look for?
One way I can fix this is by symlinking my globally install node_module folder into each plugin/theme. But I still want to know what is causing this as this entire process has exposed me to a couple concepts that have just helped me in general so I feel like the answer to this problem might also do the same.
I am in the process of creating a React app (using Linux-Ubuntu, npm 3.5.2, node v8.10.0, with npx). I used the following-
npx create-react-app my-app
But to start the app:
npx start
I got a bit of errors (shown below)
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
/home/dirsomename/Projects/node_modules/eslint (version: 5.16.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
Well, it did not fix the problem even after following the steps above.
So, my goal now is to retrace my steps and to uninstall the complete React app from scratch.
How do I go about doing that?
I am working on a project with a number of frontend dependencies. The project uses both NPM and JSPM to manage these dependencies.
According to the jspm documentation:
All install ranges are saved in the package.json file, with the exact version solution saved into config.js. Both of these files should be checked into version control.
To reproduce an install of the package.json to the exact version ranges in the config.js file, use jspm install with no arguments:
However, even with a package.json that has explicit versions set, the presence of a package-lock.json file and the presence of a config.js file (that is supposed to ensure a consistent jspm_packages folder), I still see floating version information shown when running jspm install - example:
ok Installed npm:buffer#^5.0.6 (5.1.0)
ok Installed npm:ieee754#^1.1.4 (1.1.11)
ok Installed npm:base64-js#^1.0.2 (1.3.0)
ok Installed core-js as npm:core-js#1.1.4 (1.2.7)
Can any frontend gurus tell me why this is happening?
I create a ReactJS project with the create-react-app package and that worked well, but I cannot find webpack files and configurations.
How does react-create-app work with webpack? Where are the webpack configuration files located in a default installation with create-react-app? I'm unable to find configuration files in my project's folders.
I have not created an override config file. I can manage config settings with other articles but I want to find the conventional config file(s).
If you want to find webpack files and configurations go to your package.json file and look for scripts
You will find that scripts object is using a library react-scripts
Now go to node_modules and look for react-scripts folder react-script-in-node-modules
This react-scripts/scripts and react-scripts/config folder contains all the webpack configurations.
The files are located in your node_modules/react-scripts folder:
Webpack config:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js
Start Script:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js
Build Script:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js
Test Script:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js
and so on ...
Now, the purpose of CRA is not to worry about these.
From the documentation:
You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.
If you want to have access to the config files, you need to eject by running:
npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!
In most scenarios, it is best not to eject and try to find a way to make it work for you in another way.
If you need to override some of the config options, you can have a look at https://github.com/gsoft-inc/craco
A lot of people come to this page with the goal of finding the webpack config and files in order to add their own configuration to them. Another way to achieve this without running npm run eject is to use react-app-rewired. This allows you to overwrite your webpack config file without ejecting.
Assuming you don't want to eject and you just want to look at the config you will find them in /node_modules/react-scripts/config
webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`
Webpack config used by create-react-app is here:
https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config
You can find it inside the /config folder.
When you eject you get a message like:
Adding /config/webpack.config.dev.js to the project
Adding /config/webpack.config.prod.js to the project
Webpack configuration is being handled by react-scripts.
You can find all webpack config inside node_modules react-scripts/config.
And If you want to customize webpack config, you can follow this customize-webpack-config
Ejecting is not the best option as well as editing something under node_modules.
react-app-rewired is not maintained and has the warning:
...you now "own" the configs. No support will be provided. Proceed
with caution...
Solution - use craco.
Try ejecting the config files, by running:
npm run eject
then you'll find a config folder created in your project. You will find your webpack config files init.
I'm using create-react-app with craco, and I was able to override my webpack configuration when updating to webpack 5 with the craco.config.js:
module.exports = {
style: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
webpack: {
configure: (webpackConfig, { env, paths }) => {
// eslint-disable-next-line no-param-reassign
webpackConfig.resolve.fallback = {
fs: false,
};
return webpackConfig;
},
},
}
I know it's pretty late, but for future people stumbling upon this issue, if you want to have access to the webpack config of CRA, there's no other way except you have to run:
$ npm run eject
However, with ejection, you'll strip away yourself from CRA pipeline of updates, therefore from the point of ejection, you have to maintain it yourself.
I have come across this issue many times, and therefore I've created a template for react apps which have most of the same config as CRA, but also additional perks (like styled-components, jest unit test, Travis ci for deployments, prettier, ESLint, etc...) to make the maintenance easier. Check out the repo.
So I forked a package in the git. Made my changes. Then in my terminal
npm install --save git+https://github.com/hayk94/ddp.js.git
And then I try to import the package in my code as this
import DDP from 'ddp.js'
But webpack gives me this error
ERROR in ./main.js
Module not found: Error: Can't resolve 'ddp.js' in '/Users/hayksafaryan/projects/b2cEmbedLib'
# ./main.js 23:11-28
# multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./main.js
webpack: Failed to compile.
However webpack works fine if I install the package from npm.
I import the package as in the docs, however maybe there is some other way for git installed packages?
The entry point of the package is lib/ddp.js, but that file doesn't exist in the repository. It is very common that libraries build their libraries before publishing to npm, so that they can use newer JavaScript features but still provide support for older versions that don't support them. This is done with the prepublish hook, which is automatically run before the package is published (when you run npm publish). With that, the built files don't end up in the repository, as it would mainly clutter up your commits. Some people decide to check them in so they can use it directly from there, which has become quite rare because these use-cases are generally covered by services like Unpkg.
You have several possibilities to use it from a git repository.
Check in the built files.
Build the files after installing. Either manually or with a postinstall hook. (not recommended)
Change the entry point to src/ddp.js. If you need to transpile the files, this isn't a valid option, even though you could theoretically whitelist the package in your webpack config, so it gets transpiled (assuming you were excluding node_modules from being transpiled).
Publish the package to npm under your namespace (#yourusername/ddp.js) and use that. For details see Working with scoped packages.