Parcel: Dynamic import doesn't work?

[devcati]

when i try code splitting, get a error:

  Uncaught Error: Cannot find module '7'

index.js:

import('./m').then(fn => {
    console.log(fn(1,2));
});

m.js:

export default (a, b) => a + b;

no more config...

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.0.3
| Node | 9.2.0
| npm/Yarn | npm
| Operating System | macOS 10.12.6

[jamiebuilds]

Weird, could you put up an example repo?

[TheLarkInn]

https://github.com/TheLarkInn/repro-parcel-112 Here's a repo to model after if needed, I wasn't able to repro myself but I'm on different OS so shrug. Anyways, maybe this will help expedite @devcati's reporting or help you James <3.

[ckken]

export const loadComponent = function (defaultKey = false) {
  return function (location, cb) {
    let key = defaultKey
    if (!key) {
      key = `${location.params.module}/${location.params.controller}`
      if (location.params.action) {
        key = `${key}/${location.params.action}`
      }
    }
    import(`src/pages/${key}/index.js`).then(loadRoute(location, cb, key)).catch(errorLoading(cb))
  }
}
export default function createRoutes() {
  return {
    path: '/',
    // component: main,

    // onEnter:oauth,

    indexRoute: {
      getComponent: loadComponent('home')
    },
    childRoutes: [
      {
        path: ':module/:controller',
        getComponent: loadComponent()
      },
      // 独立子页面

      {
        path: ':module/:controller/:action',
        getComponent: loadComponent()
      },
      {path: '*', component: Notfound}
    ]
  }
}

like webpack require.ensure or import(val)

[ckken]

like : babel-plugin-syntax-dynamic-import

[TheLarkInn]

I'm not sure if Parcel has (haven't gotten through entire codebase yet) support for what webpack call's ContextModules. I'm happy to help team understand how it works if they want to RFC/Propose implementing it.

[evenfrost]

That's weird, because on my one machine (running Ubuntu 16.10), I've got this very error Cannot find module 'X' when trying to use dynamic import or importing images. And on the other machine (Ubuntu 17.10) everything works seamlessly so far. Got Node.js v9.2 and Parcel v1.0.3 on both.

[ckken]

for example : https://github.com/ckken/parcel-react/blob/master/src/router.js

[devcati]

thanks @TheLarkInn reply. I found the problem in css. I use postcss-inline-svg in the css:

    h1 {
        background: svg-load('../pics/arrow_up.svg') no-repeat right;
    }

maybe svg-load disturbs the bundle tree. remove css, all is ok.

[evenfrost]

Minimal reproducible example is here. It starts happening when I include CSS file in index.html and have dynamic imports in my root JS file.

[wzrdtales]

any news?

[ranfdev]

I get the same error, but only when i'm building. When i run parcel index.html everything works, but if i run parcel build index.html i get that error message in some of the splitted chunks.
I'm using parcel 1.6.2 on elementary os (based on ubuntu).
Interesting: by removing the imports related to css files in the chunks, it works.

[MarcusAhlfors]

Code splitting has not worked for me for builds in the last versions, same thing now on 1.7.0. The module IDs doesn't seem to match between the main chunk and the splitted chunks. Haven't tried removing css files though as suggested by ranfdev. Would like to narrow this down but I don't know if I'll be able to find the time here in the near future.

[little-white]

@ranfdev my parcel version is 1.8.1 on mac pro,it works as you say that remove the css file.

// Demo.jsx
import React from 'react';

function Demo() {
  return <div className="name">Hello qiqi</div>;
}

export default Demo;

// Home.jsx
...
import Loadable from 'react-loadable';
const LoadableComponent = Loadable({
  loader: () => import('../Box/Demo'),
  loading: () => <div>Loading...</div>,
})
...

Interesting +1 👍

[code4cake]

Hey guys, getting sort of the same problem, the built passes, but I get the following error on the web console: Uncaught Error: Cannot find module 'Loader.844c947a.js,7,Loader.844c947a.map,7' at newRequire (loader.1eaab585.js:39)

Using:
"react-loadable": "5.4.0"
"babel-plugin-syntax-dynamic-import": "6.18.0",
"parcel-bundler": "^1.8.1"

Maybe I should name my imports with react-loadable somehow? or change my babel-plugin

Code

// Loader.js

import React from 'react';

const Loader = () => {
  return (
    <div>LOADER LOADER</div>
  )
};

export default Loader;

// App.js

import React from 'react';
import Loadable from 'react-loadable';
import Loader from './components/Loader/Loader';

const LoadableComponent = Loadable({
  loader: () => import('./components/Loader/Loader'),
  loading: () => <div>Loading...</div>,
  delay: 300,
});

const App = () => {
  return (
    <div>
      <p>This is the App view</p>
      <LoadableComponent />
    </div>
  )
}

export default App;

[ranfdev]

The problem is even worse in the latest version (1.8.1). I can build my app using 1.7.1, but with 1.8.1 i get the error Cannot find module '16'. This time i don't have any css file. I don't know how to reproduce this, i'm not doing anything strange, it's just a normal app using code splitting. I'm building with the cache disabled

[shunia]

@ranfdev Same here. So we go back to 1.7.1.
Though it's hard to choose, but we are switching to webpack for code splitting. :(

[danielbrodin]

Have the same problem using 1.8.1 with react, TypeScript and react-loadable.
Currently we have changed typescript to use commonjs modules which disables code-splitting :(

[tors]

Can confirm the bug. Getting Cannot find module '...'

[machycek]

Same issue with Cannot find module '...'. I'm not able to use codesplitting. Guess I'll need to move to webpack for the time being :/

[dobesv]

I seem to be having the same problem here, it happens with 1.8.1. But if I try to create a new small project to reproduce it, dynamic imports seem to work OK.

[raja]

Any resolution as of yet? 1.9.1 still has issues with dynamic imports (for react-loadable)

[ravilution]

I just tried below code. Works without any issue.

import('@material-ui/core/styles/createMuiTheme').then(
  ({ default: createMuiTheme }) => {
    console.log(createMuiTheme)
  },
)

[stevefan1999-personal]

🤔It seems like Parcel just require the imported file and don't give a damn afterward, that means module resolution will not be applied after all.

Using @ravilution's observation, try this:

const resolve = (maybeMod: Promise<any>): Promise<any> => maybeMod.then(mod => mod['default'] || mod)
...
(async function () {
  const App = await resolve(import('./components/App'))
  ...
})()

~Still it doesn't work with loadable-component (or react-loadable presumably).~
😥It did work, it is my react shim that is faulty and rendered undefined for me, should have had used official React instead.

[ThaddeusJiang]

I have a same problem.

[FaBeyyy]

almost one year and this still hasnt been fixed lmao

[devongovett]

Bug (at least in @dantesolis case) appears to be related to the async imported module also being included in the bundle synchronously. There is both import Loader from './components/Loader/Loader'; and import('./components/Loader/Loader') in the example. If you remove the sync import it works. Does this match up with other people's issues?

[amok]

@devongovett yes, confirmed in my case

but also I'm not able to import an svg file
it says something like

// index.js
import('./icon.svg').then(v => console.log(v))

==>

Uncaught (in promise) Error: Cannot find module 'icon.svg'

[mischnic]

The first three example repos I've tried don't work (anymore?) because they didn't respect the default export syntax:
```js
export default function() { return "test"; }

// ---

import("./module.js").then(res => {
console.log(
res() // res is not a function, it's {default: function(){return "test";} }
);
});

[JosiahWitt]

Here is a basic reproduction of the bug with React: https://github.com/JosiahWitt/parcel-dynamic-import-bug
It breaks if the app is reloaded on Page 2.

The interesting thing is if the image is removed from both pages (and the corresponding imports are removed), then the dynamic import works fine.

I was hoping to add an image to two pages in a larger app I'm building, but I guess I'll only add it to one page for now, since I've spend the better part of a day trying to get this to work. It doesn't even work to have a copy of the image for each page.

Other than this, I am really liking Parcel! Good work! :+1:

[QuackMartins]

My build doesn't work with dynamic import and --experimental-scope-hoisting option... it shows this error

I started digging around and added some logs on parcel-bundler/src/builtins/bundle-loader.js, I found it's being inited twice after bundled with my application... in the first run it's setup correctly, but the second run is messing things up

A simple workaround I did was to ensure the var bundleLoaders on parcel-bundler/src/builtins/bundle-loader.js would not get reset... By doing

var bundleLoaders = bundleLoaders || {};

My app started working again

The problem is that my approach is not a fix :disappointed:, despite I think this workaround can help some people in the wild

[QuackMartins]

@devongovett I think I'll dig a bit more today at night, do you have any suggestion where I should look in the tree shake process?

[zfrisch]

The problem is that my approach is not a fix , despite I think this workaround can help some people in the wild

@QuackMartins I'm having this exact same problem. Where did you put your "fix" ?

I'm not familiar with the code base as I just discovered parcel while trying to find an alternative to vueify that wasn't webpack, but I'm really concerned by this issue. I really just wanted a plug-and-play vue transpiler, but parcel replaced 90% of my build script(which is great), but now that I finished demoing a base example and am trying to hook it into my large application, the relative paths that require uses are giving it trouble.

I am a bit miffed that dynamic module loading is still an issue from so far back. It's confusing. Even if you had to point out your initial entry point with an absolute path - unfortunate, but okay just use __dirname or something - if you have an entry point and your loading assets file-to-file, a relative directory to an absolute path shouldn't be so hard for it to manage, right? I know Node has its inconsistencies but this seems like a really debilitating thing with an otherwise great Builder.

[zfrisch]

It seems like if I keep it to one folder away from root it'll compile without an issue? Very strange.

[ArtemZag]

I've also faced this bug.
Looks like it happens when you try to import the same static file in 2 dynamically loaded modules.
The asset is added to dependencies only for the first module. So, if you skip loading of the first module and just load the second one then you get this error.
Here is my example:
https://github.com/ArtemZag/parcel-dynamic-import-bug
There are 2 scripts:
"yarn try-ok" & "yarn try-bug"

[hmmhmmhm]

still no fiix about this error?
It's almost 2020 year and I'm going through this error again today.

[dobesv]

@hmmhmmhm it would be more helpful if you included a reproduction step, detailed errors, etc. Otherwise you might as well add an emoji to the issue description to vote for the issue.

[hmmhmmhm]

Sorry. I forgot to share my experience. I approached it in the same way as the above reproductions.
I solved the problem in a temporary way as follows.

"This error occurs only with asynchronously imported static files, Create a central path management js file that has all of your static file paths.Never asynchronously import manager files that have all those path information, but manage to access them through those manager files when writing static files."

[hmmhmmhm]

@dobesv
Is it ok to request a pull request after modifying the code so that all path information of static resource collected by Parcel is left behind in the initial chunk?

[dobesv]

@hmmhmmhm I don't know what's OK specifically, I'm not a project maintainer or anything. If you do have a fix for the issue you can open a PR. No guarantee they will accept it, of course, but it's worth a try.

[hmmhmmhm]

OK I should try it, It's definitely worth it.
Thanks for answer to me..!

[jeremyong]

Yikes I just found this issue after attempting to migrate a project to parceljs. I'll echo the concerns of others here, but I'd like to ask, is this something that is addressed in the upcoming parceljs 2?

[mischnic]

If this describes your situation, then yes it's fixed in Parcel 2 already:

Looks like it happens when you try to import the same file in 2 [dynamically loaded] modules.

[justin-hackin]

For me, dynamic import works as expected when the parameter is an inlined string. However, using a string variable in the import statement seems to prevent the loaders from working properly. I get an error Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Here's a reproduction of the issue: https://github.com/justin-hackin/react-minimal-starter-parcel . In this case I used json, but I also experienced the same bug using the svgr plugin. I even tried inlining a template string like ${file}.json in hopes it would help the loader, didn't work. I also upgraded to [email protected], removed JSX because it broke the build, and the bug was still present there.

Is there any way to force a particular loader to be used? In webpack you can inline the loaders as in: https://webpack.js.org/concepts/loaders/#inline

[mischnic]

@justin-hackin

Using a dynamic expression in an dynamic import makes Parcel ignore that call. The dev server is designed for SPA and therefore serves the index html file for unknown files, this is why you get that html error.

There are no "loaders" in Parcel. Using import("bundle-text:./myfile.json") with Parcel 2 should work in your case.

[devongovett]

Going to close this as it's fixed in v2.