My package gives "ModuleNotFoundError" when importing it on CodeSandBox - node.js

Question

I published an npm package today and wanted to try it on CodeSandBox. It works if I npm install package-name in a local machine but importing same dependency on a CodeSandBox projects gives this error:
package.json
{
"name": "package-name",
"version": "1.0.20",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"keywords": [
"react"
],
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4"
}
}
My compiled files have these kind of imports at top:
import _defineProperty from "#babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "#babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "#babel/runtime/helpers/esm/slicedToArray";
I followed this tutorial. After I run npm run build, a dist folder creates in the main directory. Then I npm publish. I did try npm install package-name on a local machine and it works but as I said it does not work on CodeSandBox.

Answer 1

Try adding your devDependencies to dependencies. devDependencies are not exported in build and that is why maybe your babel/runtime is failing.
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
and then build and try.

Answer 2

Another way without needing to merge your devDependencies and dependencies is to set up your Codesandbox project in a Container Environment. Note that you have to set this before creation — as of writing you cannot switch between Container and Client environments after the fact.
In addition, if you are going to be importing a project into Codesandbox from Github, it implicitly sets the environment to Client. To workaround this, create a sandbox.config.json file at the root of your project with the following contents:
{
"template": "node"
}
Make sure this file exists before import. Creating it after the fact will not work.