Coding Project - Setting up the Frontend with ReactJS, Babel and Webpack: Part 2

11.07.2021 — webpack, babel, eslint, reactjs, react, front-end, coding project, troubleshooting — 1 min read

I tried created the front end with create-react-app, but the webpack config was not configurable, and I had to follow the existing folder structure, of which I was not keen. So I decided to go the challenging route of setting it up on my own. :)

References

Setting up relative paths using the tilde "~"

My folder structure

1|-- my_app
2    |-- .babelrc
3    |-- .eslintrc.js
4    |-- .gitignore
5    |-- package-lock.json
6    |-- package.json
7    |-- webpack.config.js
8    |-- src
9        |-- App.js
10        |-- index.html
11        |-- index.js
12        |-- api
13        |   |-- apisauce.js
14        |-- components
15        |   |-- Error
16        |   |   |-- index.js
17        |   |-- Layout
18        |       |-- index.js
19        |       |-- styles.js
20        |-- config
21        |-- pages
22        |   |-- dynamic
23        |   |   |-- index.js
24        |   |   |-- test
25        |   |       |-- index.js
26        |   |-- home
27        |       |-- index.js
28        |-- services
29        |-- util

Webpack

To make sure webpack recognizes your relative paths, just add a resolve and alias objects to the config:

webpack.config.js

1const alias = {
2  '~': path.resolve(__dirname, './src'),
3  react: path.resolve(__dirname, './node_modules/react'),
4}
5
6webpackConfig.resolve = {
7  alias,
8}
9
10module.exports = webpackConfig

ESLint

To make sure your ESLint recognizes and resolves the path to the file, install the resolver package first.

1npm install eslint-import-resolver-webpack --save-dev

Add an alias object to the import/resolver setting. Note that . is relative to where the .eslintrc.js file lives. I wanted the relative path (represented by the tilde, ~) to be pointing to my src since I'll be importing within that scope anyway.

SO Answer

.eslintrc.js

1'import/resolver': {
2      node: true, // default for node modules
3      webpack: {
4        config: path.resolve(__dirname, 'webpack.config.js'), //
5      },
6      alias: [
7        ['~', path.resolve(__dirname, './src')],
8      ],
9    },

Troubleshooting

Error: Conflict: Multiple chunks emit assets to the same filename index.bundle.js (chunks main and vendors)

SO Answer

Fix this error by removing the hardcoded value for the output filename in webpack.config.js.

webpack.config.js

1output: {
2    path: path.join(__dirname, '/dist'),
3    filename: '[name].js',
4  },

Cannot go to other routes other than /

SO Answer

Add publicPath to output in webpack.config.js:

webpack.config.js

1output: {
2    publicPath: '/',
3  },

Set up historyApiFallback: true, in devServer:

webpack.config.js

1devServer: {
2    historyApiFallback: true,
3  },

In plugins, add hash and inject to HtmlWebpackPlugin options:

webpack.config.js

1plugins: [
2    new HtmlWebpackPlugin({
3      template: './src/index.html',
4      hash: true,
5      inject: true,
6    }),
7  ],

Module parse failed: Unexpected token (6:16)

1> ERROR in ./src/index.js 6:16
2> Module parse failed: Unexpected token (6:16)
3> 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
4
5| import App from './App';
6|
7| ReactDom.render(<App />, document.getElementById('app'));
8|

Fixed my .babelrc. Previously was babel.config.js.

regeneratorRuntime is not defined

Basically can't use async/await. SO Answer

Install some dependencies first.

1npm i regenerator-runtime core-js

Configure the .babelrc file.

1{
2    "presets": [
3      ["@babel/preset-env",
4        {
5          "useBuiltIns": "usage", // alternative mode: "entry"
6          "corejs": 3, // default would be 2
7          "targets": "> 0.25%, not dead"
8          // set your own target environment here (see Browserslist)
9        }
10      ]
11    ]
12}

cors preflight allow origin mismatch error

Tried to load my server data, and got this error when I checked the Network tab.

Fixed it server-side by allowing a more flexible origin. Obviously a temporary fix, will come back to it later.

SO Answer

Coding Project - Setting up the Frontend with ReactJS, Babel and Webpack: Part 2

References

Setting up relative paths using the tilde "~"

My folder structure

Webpack

ESLint

Troubleshooting

Error: Conflict: Multiple chunks emit assets to the same filename index.bundle.js (chunks main and vendors)

Cannot go to other routes other than /

Module parse failed: Unexpected token (6:16)

regeneratorRuntime is not defined

cors preflight allow origin mismatch error

Read more: