javascript - Error "No se puede encontrar el módulo" en Heroku al implementar

heroku javascript

Question

Por lo tanto, estoy creando una aplicación con React, y luego la implementaré en Heroku. Todo funciona muy bien en localhost y sin ningún error, y el paquete web también se compila sin errores. También he configurado env variales en Heroku.

Sin embargo, cuando lo despliego a Heroku aparece una pantalla en blanco y este error en la consola (requiero TodoApi correctamente y he intentado de varias formas: importar, etc., funciona en el host local sin problemas):

Intento averiguarlo durante días, por lo que cualquier ayuda es muy apreciada.

Uncaught Error: Cannot find module "TodoApi"
at bundle.js:20
at Object.<anonymous> (bundle.js:20)
at t (bundle.js:1)
at Object.<anonymous> (bundle.js:20)
at t (bundle.js:1)
at Object.<anonymous> (bundle.js:3)
at Object.<anonymous> (bundle.js:3)
at t (bundle.js:1)
at Object.<anonymous> (bundle.js:1)
at t (bundle.js:1)

Aquí están mis archivos webpack y package.json:

var webpack = require(''webpack'');
var path = require(''path'');
var envFile = require(''node-env-file'');
process.env.NODE_ENV = process.env.NODE_ENV || ''development'';
try {
envFile(path.join(__dirname, ''config/'' + process.env.NODE_ENV + ''.env''));
} catch(e) {
}
module.exports = {
entry: [
''script!jquery/dist/jquery.min.js'',
''script!foundation-sites/dist/js/foundation.min.js'',
''./app/app.jsx''
],
externals: {
jquery: ''jQuery''
},
plugins: [
new webpack.ProvidePlugin({
''$'': ''jquery'',
''jQuery'': ''jquery''
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new webpack.DefinePlugin({
''process.env'': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_KEY: JSON.stringify(process.env.API_KEY),
AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN),
DATABASE_URL: JSON.stringify(process.env.DATABASE_URL),
STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET),
MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID)
}
})
],
output: {
path: __dirname,
filename: ''./public/bundle.js''
},
resolve: {
root: __dirname,
modulesDirectories: [
''node_modules'',
''./app/components'',
''./app/api''
],
alias: {
app: ''app'',
applicationStyles: ''app/styles/app.scss'',
actions: ''app/actions/actions.jsx'',
reducers: ''app/reducers/reducers.jsx'',
configureStore: ''app/store/configureStore.jsx''
},
extensions: ['''', ''.js'', ''.jsx'']
},
module: {
loaders: [
{
loader: ''babel-loader'',
query: {
presets: [''react'', ''es2015'', ''stage-0'']
},
test: //.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
},
devtool: process.env.NODE_ENV === ''production'' ? undefined : ''cheap-module-eval-source-map''
};
{
"name": "reactapp",
"version": "1.0.0",
"description": "ReactApp",
"main": "index.js",
"scripts": {
"test": "NODE_ENV=test karma start",
"build": "webpack",
"start": "npm run build && node server.js"
},
"author": "John Smith",
"license": "MIT",
"dependencies": {
"axios": "^0.16.0",
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"deep-freeze-strict": "^1.1.1",
"expect": "^1.20.2",
"express": "^4.13.4",
"firebase": "^3.9.0",
"foundation-sites": "^6.3.1",
"jquery": "^2.2.1",
"moment": "^2.18.1",
"node-env-file": "^0.1.8",
"node-sass": "^4.5.2",
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.6",
"react-dom": "^0.14.7",
"react-redux": "^5.0.4",
"react-router": "^2.0.0",
"redux": "^3.6.0",
"redux-mock-store": "^1.2.3",
"redux-thunk": "^2.2.0",
"sass-loader": "^6.0.3",
"script-loader": "^0.6.1",
"style-loader": "^0.13.0",
"uuid": "^3.0.1",
"webpack": "^1.12.13"
},
"devDependencies": {
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-mocha": "^0.2.2",
"karma-mocha-reporter": "^2.2.3",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.1",
"mocha": "^2.5.3"
}
}
var React = require(''react'');
var { connect } = require(''react-redux'');
import Todo from ''Todo'';
var TodoApi = require(''TodoApi'');
export var TodoList = React.createClass ({
render: function() {
var { todos, showCompleted, searchText } = this.props;
var renderTodos = () => {
var filteredTodos = TodoApi.filterTodos(todos, showCompleted, searchText);
if(filteredTodos.length === 0) {
return (
<p className="container__message">No tasks</p>
);
}
return filteredTodos.map((todo) => {
return (
//add unique key prop to keep track of individual components
<Todo key={todo.id} {...todo} />
);
});
};
return (
<div>
{renderTodos()}
</div>
);
}
});
export default connect(
(state) => {
return state;
}
)(TodoList);

Answer 1

Usted requiere TodoApi pero este paquete no existe en su package.json . package.json

En su componente TodoList.jsx

var TodoApi = require("TodoApi");

Una mirada rápida a través del repositorio muestra que el paquete no existe en ninguna parte.

Answer 2

Creo que su problema radica en resolve parte del archivo de configuración de su paquete web. Parece que resolve.modulesDirectories no funciona correctamente cuando se implementa en Heroku. Creo que tiene más sentido configurar la resolución de tus ''./app/components'' y ''./app/api'' con resolve.root lugar de resolve.modulesDirectories . Intenta seguir la configuración de resolve y probablemente funcione con Heroku.

resolve: {
root: [
__dirname,
path.resolve(__dirname, "app/components"),
path.resolve(__dirname, "app/api")
],
modulesDirectories: [ ''node_modules'' ],
alias: {
app: ''app'',
applicationStyles: ''app/styles/app.scss'',
actions: ''app/actions/actions.jsx'',
reducers: ''app/reducers/reducers.jsx'',
configureStore: ''app/store/configureStore.jsx''
},
extensions: ['''', ''.js'', ''.jsx'']
}

Answer 3

El problema es exactamente lo que dice. El TodoApi.

Localmente funcionará porque TodoApi está probablemente en su directorio "node_modules". (No lo incluyó localmente en su index.html, ¿verdad?) El problema es que no está empaquetado en el paquete de implementación. Es por eso que no funciona.

En primer lugar, no sé si lo notó, pero (no desea) incluir node_modules en modulesDirectories y más tarde en module.loaders lo excluye nuevamente. Afortunadamente para ti no incluía, de lo contrario todavía estarías construyendo, jajaja. Además de eso, puedes borrar el pasaje de modulesDirectories . Y nunca piense que es una buena idea incluir node_modules como un directorio en cualquier cosa. ;)

Haría lo siguiente para traer algo de estructura, para que pueda ver claramente qué está incluido y qué no. En la parte superior de tu webpack, define algunos directorios absolutos:

// Absolute directories
const root = (...dir) => path.resolve(__dirname, ...dir);
const lib = root(''lib''),
src = root(''src''), // or ''app''
project = root(''.'');

Esto lo sabe con certeza qué directorio está asignado y se lee más fácilmente. Luego configura tu archivo de entrada.

const entry = root(''app/app.jsx''); 

Y cámbielo bajo exportaciones de módulos:

root: src,
context: src,
entry: entry,
...

Siempre configuré el contexto en mi directorio src, lo que significa que, hasta el momento, el paquete web src es el directorio principal. Quita las otras cosas debajo de la entrada.

También comentaría el plugin de Uglify mientras aún no tienes la compilación funcionando, solo para excluir cosas que pueden crear errores propios.

Instale el paquete-webpack-analyzer .

npm i --save-dev webpack-bundle-analyzer

Y añádelo a tus complementos de webpack como este:

 new BundleAnalyzerPlugin({
analyzerMode: ''server'',
analyzerHost: ''localhost'',
analyzerPort: 9002,
reportFilename: ''report.html'',
openAnalyzer: true,
// Log level. Can be ''info'', ''warn'', ''error'' or ''silent''.
logLevel: ''info''
})

Esto abrirá una bonita vista gráfica de su paquete después de la compilación. Uno de los bloques necesita mencionar "TodoApi" y entonces estás bien. Si primero agrega el BundleAnalyzerPlugin sin cambiar su código, entonces puede ver que TodoApi probablemente no esté allí.