I’m trying to import a module named Config from a services folder in my src directory, but I’m getting an error that the ./services/Config module can’t be found.
Here’s how I’m trying to import it:
import Config from './services/Config';
But if I import Config as ./services/Config.ts it works.
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module './services/Config' from 'D:githubrepoNamesrc'
I’ve verified that the Config file exists in the services folder and that the services folder is in the same location as my index.js file.
tsconfig.json:
{
"compilerOptions": {
/* Basic Options */
"target": "ES6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "NodeNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": [
"es2020",
"DOM"
], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
"resolveJsonModule": true,
/* Basic Options */
"declaration": true, /* Generates corresponding '.d.ts' file. */
"emitDeclarationOnly": true, /* Generates '.d.ts' file only. */
"isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
"outDir": "./dist", /* Redirect output structure to the directory. */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"strictNullChecks": true, /* Enable strict null checks. */
"strictFunctionTypes": true, /* Enable strict checking of function types. */
"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
"strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
"moduleResolution": "NodeNext", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"baseUrl": "./", /* Base directory to resolve non-absolute module names. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
},
"include": [
"src/**/*",
],
"exclude": [
"./node_modules"
],
}
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//const { PyodidePlugin } = require("@pyodide/webpack-plugin");
const webpack = require('webpack');
const fs = require('fs'); // to check if the file exists
const dotenv = require('dotenv');
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
module.exports = (env) => {
const currentPath = path.join(__dirname);
const basePath = currentPath + '/.env';
const envPath = basePath + '.' + env.ENVIRONMENT;
const finalPath = fs.existsSync(envPath) ? envPath : basePath;
const fileEnv = dotenv.config({ path: finalPath }).parsed;
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
return prev;
}, {});
return {
entry: path.join(__dirname, 'src', 'index.js'),
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /.js(?.*)?$/i,
}),
],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
},
mode: "development",
module: {
rules: [
{
test: /.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/,
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "ts-loader",
},
},
{
test: /.(woff(2)?|ttf|eot|png|svg|jpg|gif)(?v=d+.d+.d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[hash:8].[ext]",
outputPath: "assets/",
},
},
],
},
{
test: /.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /.js$/,
enforce: 'post',
use: {
loader: WebpackObfuscator.loader,
options: {
rotateStringArray: true
}
},
include: [
path.resolve(__dirname, 'src/stores/SimulationStore.js'),
path.resolve(__dirname, 'src/stores/MapStore.js'),
path.resolve(__dirname, 'src/stores/DevprojectsStore.js'),
path.resolve(__dirname, 'src/stores/SimulationResultsStore/SimulationResultsStore.js'),
path.resolve(__dirname, 'src/stores/AmenitiesStore.js'),
path.resolve(__dirname, 'src/services/market_equilibrium_simulator.js'),
]
}
]
},
plugins: [
//new PyodidePlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html')
}),
new webpack.DefinePlugin(envKeys),
// new CopyWebpackPlugin({
// patterns: [{ from: 'public' }]
// }),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "src/"),
},
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
devServer: {
historyApiFallback: true,
port: 3001,
open: true,
// host: '192.168.0.142',//your ip address
// port: 3001,
// disableHostCheck: true
allowedHosts: 'all'
}
}
};
.babelrc:
{
"presets": ["@babel/env", "@babel/react", "@babel/preset-typescript"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": false }],
// In contrast to MobX 4/5, "loose" must be false! ^
["babel-plugin-inline-json", {}]
]
}
.babel.config.js:
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }], "@babel/preset-typescript"],
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
};
