🐛 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module

[ghost]

bug report m9

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc:

{
  "presets": ["env"],
  "plugins": [
    "transform-object-rest-spread",
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src/js",
      "rootPathPrefix": "@"
    }]
  ]
}

package.json:

{
  "name": "parcel-remake",
  "version": "1.0.0",
  "description": "testtt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel src/index.html --no-hmr --no-source-maps --no-cache",
    "build": ""
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/"
  },
  "homepage": "https://github.com/",
  "devDependencies": {
    "babel-plugin-root-import": "^5.1.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.6.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "i18next": "^10.6.0",
    "whatwg-fetch": "^2.0.3"
  }
}

🤔 Expected Behavior

Import successfully a .js file

😯 Current Behavior

Throws error in console:

💁 Possible Solution

I noob can't solutionate

🔦 Context

Trying to make i18n support for my project

💻 Code Sample

The relevant piece of code:

import(`./${lang}.js`)
  .then(langFile => console.log(langFile))

🌍 Your Environment

Software	Version(s)
Parcel	1.6.2
Node	9.6.1
npm/Yarn	5.6.0
Operating System	Debian sid

[gunn4r]

I'm running into the same issue. Is this a confirmed bug or are we just doing something wrong?

[takahiro-saeki]

same with me. I wanna resolve this issue but I have no clue.

[DeMoorJasper]

Wondering if it works when using it like this:

import(`./en.js`).then(langFile => console.log(langFile))

Than it's just because parcel doesn't know what to precompile (should be a fairly easy fix in that case).

[larafale]

hello folks, same here. I just want to dynamically display images stored in the assets folder. (using react)

// random images
const images = ['random.png', 'random2.png']

class App extends Component {
  render() {
    return (<div className="images">
      { images.map((img, i) => <div key={i}>
        { import(`../assets/${img}`).then(image => <img src={image} />) }
      </div>) }
    </div>)
  }
}

but i also get the Uncaught (in promise) TypeError: Failed to fetch dynamically imported module error.

How can this be achived with parcel ?

[DeMoorJasper]

Issue #125 might be related

[larafale]

thanks @DeMoorJasper , i ended up using one of #1006 tips:

In the case that it's the latter (you DON'T need code splitting), the answer is simple: We support wildcard globs out of the box! 🚀

You should be able to just do:

import stuff from './path/*'
and that should import everything under the path directory into an object called stuff.

[zhayes]

I am metting the same problem. @DeMoorJasper

[brandonros]

In the case that it's the latter (you DON'T need code splitting)

Isn't the entire idea of code splitting is... say you have an app with 700 components, that you don't want to load them all on first load?

I have the same problem as well.

Than it's just because parcel doesn't know what to precompile (should be a fairly easy fix in that case).

I do agree that this is the issue... but... isn't that the entire point of code splitting?

[Nitu-Kumari]

Uncaught (in promise) TypeError: Failed to fetch

[davidmartinezros]

I have the same problem.
Here is the plunker: https://plnkr.co/edit/REhfoeZ3CaoYOneY?preview
And here de component: https://www.npmjs.com/package/app-draggable-portlets-template
Any solution?
Thanks in advanced,

David

[william-deckard]

I got around our issue with the following:

// This file can be created via a script if you know your conditions before runtime
const routes = {
  route1: () => import('./failepath'),
  route2: () => import('../filepath'),
  ...
}

const myRoutesThatINeed = [route1];
myRoutesThatINeed.forEach((route) => routes[route]().then((data) => ...