Switching from NPM to PNPM - Absolute File Paths Break in React Project - reactjs

Question

So npm was getting really slow for CircleCi and my builds were timing out and running into memory issues. So I wanted to switch to pnpm. Upon switching to pnpm I noticed that any .js file in my react project that are using an absolute path no longer work and wants me to turn them all into relative paths. Not sure if this is a bug with the version or I'm doing something wrong but it all i did was delete my package-lock.json and deleted my node_modules and installed pnpm#5 then ran pnpm i and then built my project as I've always done
npm -v 6.13.4
node -v 12.16.0
pnpm -v 5.18.0
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
Error has occured: ModuleNotFoundError: Module not found: Error: Can't resolve 'Root' in '/Users/Olive/dashboard/src'
Parsed request is a module
using description file: /Users/Olive/dashboard/package.json (relative path: ./src)
resolve as module
/Users/Olive/dashboard/src/node_modules doesn't exist or is not a directory
/Users/Olive/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/Olive/dashboard/node_modules
using description file: /Users/Olive/dashboard/package.json (relative path: ./node_modules)
using description file: /Users/Olive/dashboard/package.json (relative path: ./node_modules/Root)
no extension
/Users/Olive/dashboard/node_modules/Root doesn't exist
.web.js
/Users/Olive/dashboard/node_modules/Root.web.js doesn't exist
.mjs
/Users/Olive/dashboard/node_modules/Root.mjs doesn't exist
.js
/Users/Olive/dashboard/node_modules/Root.js doesn't exist
.json
/Users/Olive/dashboard/node_modules/Root.json doesn't exist
.web.jsx
/Users/Olive/dashboard/node_modules/Root.web.jsx doesn't exist
.jsx
/Users/Olive/dashboard/node_modules/Root.jsx doesn't exist
as directory
/Users/Olive/dashboard/node_modules/Root doesn't exist
looking for modules in /Users/Olive/dashboard/node_modules
using description file: /Users/Olive/dashboard/package.json (relative path: ./node_modules)
using description file: /Users/Olive/dashboard/package.json (relative path: ./node_modules/Root)
no extension
/Users/Olive/dashboard/node_modules/Root doesn't exist
.web.js
/Users/Olive/dashboard/node_modules/Root.web.js doesn't exist
.mjs
/Users/Olive/dashboard/node_modules/Root.mjs doesn't exist
.js
/Users/Olive/dashboard/node_modules/Root.js doesn't exist
.json
/Users/Olive/dashboard/node_modules/Root.json doesn't exist
.web.jsx
/Users/Olive/dashboard/node_modules/Root.web.jsx doesn't exist
.jsx
/Users/Olive/dashboard/node_modules/Root.jsx doesn't exist
as directory
/Users/Olive/dashboard/node_modules/Root doesn't exist
Before
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import registerServiceWorker from 'registerServiceWorker';
import Root from 'Root';
ReactDOM.render(
<BrowserRouter>
<Root/>
</BrowserRouter>,
document.getElementById('root'));
registerServiceWorker();
After: What it wants me to do to my absolute paths -> relative paths
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import registerServiceWorker from './registerServiceWorker'; // Changed this
import Root from './Root'; // Changed this
ReactDOM.render(
<BrowserRouter>
<Root/>
</BrowserRouter>,
document.getElementById('root'));
registerServiceWorker();
webpack file
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
mode: 'development',
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
plugins: [
["syntax-async-functions"],
["#babel/plugin-proposal-decorators", { "legacy": true}],
]
},
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
};
module.exports.parallelism = 1;
jsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"baseUrl": "src"
},
"include": [
"src"
]
}
I'm also getting this warning which I wasn't getting when using npm
ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
With yarn I also get the same error as above, but then this special failure
./node_modules/enzyme/node_modules/htmlparser2/lib/esm/index.js 59:9
Module parse failed: Unexpected token (59:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return getFeed(parseDOM(feed, options));
| }
> export * as DomUtils from "domutils";
| // Old name for DomHandler
| export { DomHandler as DefaultHandler };
https://github.com/cheeriojs/cheerio/issues/2545
This did not work