Unable to build with webpack after v2

[esetnik]

5:29:56 AM: $ react-scripts build
5:29:59 AM: Creating an optimized production build...
5:32:37 AM: 
5:32:37 AM: Treating warnings as errors because process.env.CI = true.
5:32:37 AM: Most CI servers set it automatically.
5:32:37 AM: 
5:32:37 AM: Failed to compile.
5:32:37 AM: 
5:32:37 AM: ./node_modules/typed-usa-states/dist/index.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/states.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/states-with-zipcodes.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/states-with-population.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/states-with-counties.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/states-with-area.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/states-full.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
5:32:37 AM: ./node_modules/typed-usa-states/dist/cities.js
5:32:37 AM: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[scriptex]

Hi, @esetnik
I have tested this using create-react-app and was able to reproduce the issue.
A new patch has been released to npm which handles this issue.
Can you please try installing version 2.0.1 and see if the issue persists?
Thanks for reporting this!

[esetnik]

@scriptex The issue is solved when using react-scripts build but not when using react-scripts start.

[scriptex]

Hm, okay, looks like something is missing...
I will take a look when I have time, most likely after the holidays :)

[scriptex]

Hi again, @esetnik, Happy New Year!

I've setup a new project with create-react-app and installed the latest version of typed-usa-states.
I didn't see any issues when running yarn start or yarn build.

I actually did a pretty simple check if everything works. This is the default App.js file:

import logo from './logo.svg';
import './App.css';

import {
	usaStates,
	usaCities,
	usaStatesFull,
	usaStatesWithArea,
	usaStatesWithCounties,
	usaStatesWithPopulation,
	usaStatesWithZipCodes,
} from 'typed-usa-states';

console.log(
	usaStates,
	usaCities,
	usaStatesFull,
	usaStatesWithArea,
	usaStatesWithCounties,
	usaStatesWithPopulation,
	usaStatesWithZipCodes
);

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
				</a>
			</header>
		</div>
	);
}

export default App;

The app gets correctly built and I am able to see the logs in the browser console.

Can you please show me how you use the package? Maybe a small demo or a code sample, just to get the idea of your use case.

[esetnik]

Happy New Year to you too and thanks for getting back to me on this.

I'm using it basically the same way as you, except I am running this in a docker container and I noticed something interesting. If I give the container access to large amounts of memory and run yarn start then it does eventually finish building the project, however the webpack process takes a long time and consumes upwards of 8GB of memory. When I run the same process on my CI environment it fails with out of memory exceptions. The biggest difference from your code example is that I use typescript in my CRA project. I don't face either of these issues if I revert back to typed-usa-states@1.1.1

[scriptex]

Can you try to import the array you need directly?

I mean instead of using import { usaStates } from 'typed-usa-states' to use import { usaStates } from 'typed-usa-states/dist/states'.

I think this has to do with the way webpack works - it imports the whole index file which contains several pretty large arrays. Then it processes the large dataset and you run out of memory, this is particularly visible in a container environment where the RAM is not enough.

The workaround above will import only the array which you need (you can also import others instead of the example I have).

Let me know if this makes any difference.

[scriptex]

Hi, @esetnik, did you try what I suggested? Can you please let me know if the issue still persists.

[esetnik]

@scriptex this solved the issue. Thanks!